o
ANGLE
Overview
Support
Getting started
Tips
Starting the app
Customizing
Structure
Custom code
Build
Javascript
LESS
Vendor
Usage
Layout
Lazy Load
RTL
Routes
Translation
Dynamic Sidebar
Markdown Docs
Icons
Themes
Directives
Bootstrap
Constants
Colors
Media Queries
Requires
Credits
Angle
Overview 概述
This document aims to explain the best way to work with the product and its components.
本文档的目的在于说明与产品及其组件工作最好的方式。
Support 支持
In case you have questions Contact Support
万一你遇到问题，联系技术支持。
Getting started入门
Tips 提示
• Do not start from scratch, use an existing asset and modify it to learn how it works.
不从头开始,利用现有的资源并加以研究，学习它是如何工作的。
• Explore the sources for ideas and sample code.
探索思想的来源和示例代码
• Use Firebug or Chrome Developer Tools to find bugs on your website. Using one of those tools will help you to save time analyzing the site and finding elements structure, like classes, id or tags
o Quick tip: open your site with Chrome, press F12 and go to console tab, reload your page and if something goes wrong you will see your page errors in red text.
使用Firebug或者Chrome开发者工具在你的网站上找到bug。使用这些工具中的任一个分析站点或查找元素结构，如类、ｉｄ或标签将帮助您节省时间。
快速提示: 用Chrome打开你的网站,按F12，去控制台选项卡,重新加载页面,如果出现问题你会看到红色的文本页面错误。
• In case of error messages, someone might have seen it too, so you can try a Google search for a quick fix.
在错误消息的情况下，有人可能已经看到了它，所以你可以尝试谷歌搜索一个快速修复。
Starting the app 开启应用
Since this is AngularJS based application you need a server (Apache, IIS, xampp, etc)to serve the html files and perform http request to load all views.
AngularJS基础应用程序需要一个服务器(xampp Apache,IIS等)，为html文件执行http请求加载所有视图。
Important! Opening the index.html with a double click (i.e. using file:// protocol) will show you only a blank page because there’s no server that response to the requests made for each view in order to display the app interface.
注意！双击打开首页，（即使用：//协议）只会给您显示一个空白页，因为没有服务器提供为每个视图响应的应用程序的接口请求。
Customizing 定制
Structure结构
Before starting to customize the template, here are the project files organization structure:
开始定制模板之前,项目文件组织结构如下:
+-- app/
| +-- css/
| +-- documentation/（文档）
| +-- img/
| +-- js/
| +-- i18n/
| +-- pages/
| +-- vendor/
| +-- views/
+-- master/
| +-- jade/
| | +-- pages/
| | +-- views/
| +-- js/
| | +-- modules/（模块）
| | | +-- controllers/
| | | +-- directives/
| | | +-- services/
| | +-- custom/
| +-- less/
| | +-- app/
| | +-- bootstrap/
| | +-- themes/
| +-- gulpfile.js
| +-- package.json
| +-- bower.json
+-- server/
| +-- *.json
+-- vendor/
+-- index.html
________________________________________
Main folders explanation 主要文件夹的介绍
app/ folder
This folder contains the compiled files. This files are ready to deploy on your server.
此文件夹包含编译后的文件。这个文件是要部署在你的服务器上。
Pages（页面）
This folder contains the compiled html files for the single pages (out of the app).
此文件夹包含HTML文件单页。
views
This folder contains the compiled html files for the views and partials used for the app.
此文件夹包含应用程序的视图和局部视图的HTML文件。
i18n
This folder contains the json files use for translation.
此文件夹包含翻译用的json文件
Vendor（第三方提供的文件）
This folder contains vendor files not managed via bower
此文件夹包含不被本地软件包管理器管理的第三方文件
master/ folder
This folder contains the source files. You will find the following folders inside
此文件夹包含所有源文件，在master中你会发现以下文件：
• jade/ This folder contains JADE files. This files need to be compiled into html files to be displayed by a browser
jade/文件夹中包含jade文件。这些文件最终被编译为html文件，由浏览器显示出来。
less/ This folder contains the LESS files for the core styles and bootstrap styles.
less/文件夹中包含less文件主要为样式文件和bootstrap样式文件。
• js/ Here you will find pure JS files. All this files are concatenated into the file app.js.
js/这里都是纯js文件。所有这些文件都将对应到app.js文件中
vendor/ folder
This folder contains the vendor files used to include plugins and other components. This folder is handled via bower so optionally you can remove or upgrade the vendor components using such tool.
此文件夹包含第三方插件和其他第三方组件。通过客户端软件包管理器，你可以删除或更新第三方插件和组件。
server/ folder
This folder contains server side files used for demonstration and guide for the flot chart and file upload components.
此文件夹包含用于演示和指导在图表和文件上传组件的服务器端文件。
• sidebar-menu.json This file is important and required because it contains the sidebar menu definition.
sidebar-menu.json这个文件是很重要的，不能缺少，因为它包含工具demonstration栏菜单的定义。
Custom code 自定义代码
To add your own code you can follow this instructions:
你可以依照这些操作指南来增加您自定义的代码：
Working with css and js 使用css和js
• Create a file app/css/custom.css and add your own styles
创建一个app/css/custom.css样式文件，定义您自己的样式
• Create a file app/js/custom.js and add your own javascript
创建一个app/js/custom.js文件, 定义您自己的javascript
• Edit the file index.html and include custom.css after all other css files and custom.js after all other js files.
编辑文件index.html，放置custom.css文件在所有其他的CSS文件之后，放置custom.js文件在所有其他的JS文件后。
Working with source files 使用源文件
• For JS, go to folder master/js/custom and start editing the file custom.js. After compile the source again with gulp, your own code will included at th bottom of file app/js/app.js.
对于JS，在master/js中编辑custom.js文件。通过gulp编译之后，您自己的代码将会包含在app/js/app.js文件的底部。
• For LESS, go to folder master/less and create a folder called custom and add your won less files. Then edit file app.less and downloaded@import all your stylesheets at the bottom (overrides all app default styles)
对于LESS，在master/less中新建一个您自己的custom.less文件，然后在文件app.less底部导入您的样式表(这一过程将覆盖所有应用程序默认样式)
A note on updating 更新时请注意
The premise is, the less you change the downloaded code, the easier will be to apply any updates. Try always to keep your own code the most separated as possible from the package code to easily apply new updates when necessary.
您改变下载的代码越少，您应用任何更新就越容易。必要时，尽量保持你自己的代码与软件包代码的分离，这样可以方便地应用新的更新。
Build 构建
Important! You only need to follow this instructions in case you want to work with JADE, LESS and concatenate all JS modules.
重要提示！你只需要遵循这一指示，如果您想用JADE, LESS连接所有js模块。
Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications.
Node.js 是一个建立在Chrome的JavaScript运行时容易快速构建可扩展的网络应用平台。
Gulp is a task manager, you can define different tasks to run certain commands. Those commands does the compilation job for JADE and LESS, and concatenates the JS files.
Gulp 是一个任务管理器。您可以定义不同的任务来运行某些命令。这些命令编译JADE and LESS,并将JS文件连接起来。
Bower is a dependency manager, it works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for. Bower keeps track of these packages in a manifest file, bower.json.
Bower是一个依赖管理器，它的工作原理是从所有的获取和安装包，搜索、发现、下载，并保存你要寻找的东西。依赖管理器跟踪这些包在一个清单文件，bower.json中。
The package includes under the master/ folder the file gulpfile.js, package.json and bower.json to install the required components to compile the source files.
展开master下的gulpfile.js, package.json and bower.json去安装所需要的组件来编译源文件。
Installing tools 安装工具
The following steps are intended to be an orientation guide, if you are not experienced with this you will need to learn more about it from Google
以下步骤旨在给出一些指导方向，如果你不是很熟练，你可以在Google上学习更多相关知识。
• To install node and npm, go to http://nodejs.org/
安装node and npm，请参照网址http://nodejs.org/
• Run npm install -g bower to install bower to manage dependencies
执行npm install -g bower 安装依赖管理器来管理依懒性
• Download and install GIT for your platform http://git-scm.com/downloads
在您的电脑上下载和安装GIT 网址：http://git-scm.com/downloads
Once you have all tools installed
一旦你已经安装了所有的工具
• Open a terminal, go the package master/ folder, then run the command npm install. This command will install gulp and all project dependencies.
打开一个终端，打开master文件夹，然后执行 npm install命令，此命令将安装gulp和所有的项目依赖。
• Then, to install vendor dependencies, run bower install
然后安装第三方依赖，运行bower install
• Finally run gulp to start the task manager
最后执行gulp, 启动任务管理器
If everything goes fine, you should see the messages in the terminal telling you that most the task are done ok. The task will watch for files to compile them automatically all files when change.
如果一切顺利，你可以在终端上看到大部分的任务执行成功的消息。该任务将监视文件在更改时自动编译所有文件。
To enable the automatic page reload there is also included a LiveReload task that requires the Chrome plugin Livereload
启用自动重新载入页面还包括一个livereload任务需要Chrome插件livereload
Javascript
The Javascript source is divided in two main files that controls the app
JS是分为两个主要文件控制程序
base.js: contains the scripts to start the application
base.js: 包含启动应用程序的脚本
app.js: contains the modules used in the application (controllers, directive, etc)
app.js: 包含应用程序中使用的模块（控制器、指令等）
Note The edit the scripts included in base.js open the file vendor.base.json located under the master folder
注解：编辑脚本包含在base.js vendor.base.json位于主文件夹下
The app.js script build (concatenation) order is
app.js脚本构造顺序如下：
'js/app.init.js'
'js/modules/*.js'
'js/modules/controllers/*.js'
'js/modules/directives/*.js'
'js/modules/services/*.js'
'js/modules/filters/*.js'
LESS
The LESS files compiles into the file app.css. This file contains the bootstrap styles and the application custom styles.
LESS文件编译为app.css，此文件包含bootstrap样式和应用程序的定制样式。
Also the app-rtl.css is automatically generated with the same styles but inverted for RTL layout. To convert styles the node script css-flip is used.
所有的app-rtl.css 自动生成相同样式但RTL布局倒转的， 转换方式的节点脚本使用CSS翻转。
Vendor
Vendor script dependencies are managed by bower. Just run bower install in folder master/ and all dependencies will be installed.
第三方脚本依赖通过依赖管理器管理。 只需在master文件夹中运行bower install命令，所有的依赖关系将被安装。
After installing all dependencies is necessary to install them in the locations the app expects them. To do that, run gulp task with the command gulp scripts:vendor in the master folder.
在应用程序预计他们的位置安装完所有的依赖关系是必要的。在主文件夹运用gulp scripts:vendor 命令运行gulp任务。
This task will run automatically the tasks scripts:vendor:app and scripts:vendor:base
这项任务将自动运行任务scripts:vendor:app and scripts:vendor:base
Vendor folder 第三方文件
To avoid not necessary files that bower downloads there’s a task scripts:vendor:app that will copy all files required by the app from the bower_components folder to the main /vendor folder.
This files are listed in vendor.json file which contains the path of all necessary files required by the app components. Those files are usually required via the lazy load module and you can include fonts, svg, etc.
为了避免依赖管理器下载不必要的文件，有一个任务scripts:vendor:app将从bower_components文件复制应用程序所需的主要文件到vendor文件夹。
这个文件是在vendor.json文件中包含应用程序所需的所有必要的文件的路径组件。这些文件通常需要通过延迟加载模块,也可以包括字体、svg等。
Vendor Base 第三方组件基础
The base.js file is generated with the task scripts:vendor:base. This task will read the list of files in the vendor.base.json file and will concat and compress all files and move them to create the mentioned base.js file.
base.js文件是通过scripts:vendor:base生成的。这项任务将在vendor.base.json文件读取文件列表，将连接和压缩所有文件并将它们移动到创建上述base.js文件。
All files in base.js are loaded when the app is required for first time and contains all vendor scripts necessary to start the app (jquery, angular, etc).
在base.js所有文件被加载时，程序是第一时间要求和包含所有第三方的脚本需要启动应用程序（jQuery，angular，等）。
Vendor Updates第三方组件更新
To update vendor files via bower you can edit the bower.json file by adding the last version you want to download.
通过依赖管理器更新第三方组件，您可以通过编辑bower.json文件增加您下载到的最新的版本
Note The folder app/vendor contains vendor files that currently aren’t possible to be managed via bower
注解：app/vendor文件包含不能被当前依赖管理器管理的第三方文件。
Usage使用方法
Layout布局
Layout can be changed via the following classed applied to the body tag
通过将以下类运用body 标签中可以改变布局
.layout-fixed: Makes navbars become fixed while the user can scroll only content
.layout-fixed: 使navbars固定，而用户仅可以滚动其中内容
.layout-boxed: Limits the width of the main wrapper element
.layout-boxed:限制主框架的宽度
.aside-collapsed: Condenses the sidebar showing only icons
.aside-collapsed:收缩使边导航只显示图标
.aside-toggle: used internally for mobiles to hide the sidebar off screen
.aside-toggle:内部使用用来隐藏侧边栏使不显示在屏幕上
.offsidebar-open: used internally to display the offsidebar component (formally the right sidebar)
.offsidebar-open：内部使用显示offsidebar组件。
<html>
<head>
#metas and css
</head>
<body>
<section class="wrapper" data-ui-view>
#start include from app.html
<nav class="navbar topnavbar">
#top navbar content
</nav>
<aside class="aside">
#sidebar content (left)
</aside>
<aside class="offsidebar">
#offsidebar content (right)
</aside>
<section>
<div class="content-wrapper" data-ui-view>
#page content
</div>
</section>
#end include from app.html
</section>
#scripts
</body>
</html>
Lazy Load 懒加载
This app requires only the necessary scripts according to the view that is loaded saving tons unnecessary request to the server.
根据视图，这个程序只需要必要的脚本加载,节约不必要的服务器请求。
The lazy load is handled by a custom core function based on the plugin ocLazyLoad
懒加载是由一个基于插件oclazyload定制的核心功能处理
To configure the lazy scripts, you need to edit the constants APP_REQUIRES (constants.js)
配置懒加载脚本，你需要配置constants.js中常量
Then edit the app configuration (config.js) where you will find the routes configuration and add or edit the params using the special function resolveFor which handles the scripts request order for the current route.
然后编辑应用程序的配置（config.js文件），你会发现路由配置和添加或使用特殊功能寻求处理当前路径的脚本请求命令编辑参数。
RTL
RTL support uses the a tool called css-flip which inverts most the css properties to change the page orientation.
It’s also a property $rootScope.isRTL to detect when the site is in RTL mode.
RTL支持使用的工具称为CSS翻转，它颠倒大多数CSS属性更改页面方向。
$rootScope.isRTL能够检测该网站是否在RTL模式。
Routes路由
This app uses for routing the AngularUI Router with nested states making more simple to manage the routing system and load resource in cascade.
这个应用程序使用嵌套的状态更容易管理的路由系统和级联负载资源路由的angularui路由器。
All routes are defined in the file config.js
所有的路由都是在文件config.js中的定义
Translation翻译
The translation system uses the AngularUI Translate module.This modules simplifies the translation system by loading translate references from a JSON file and replacing the content where the reference has been used.
翻译系统使用AngularUI Translate 模块。这个模块简化了翻译系统通过加载来自JSON文件的翻译参考，然后替换引用已使用的内容。
Examples
<h3 ui-translate="reference.NAME">Text that will be replaced</h3>
<h3>{{ 'reference.NAME' | translate }}</h3>
<a href="#" title="{{ 'reference.NAME' | translate }}">Link</a>
The JSON files with translation references are located in the folder app/i18n
Dynamic Sidebar 动态栏
The sidebar is created dynamically from a JSON file.
侧边栏动态从JSON文件创建。
JSON properties format:
[
{
"text": "Item text", // replaced by translate reference
"sref": "app.dashboard", // the state name of the target route
"icon": "icon-speedometer", // the icon full classname
"translate": "sidebar.ITEM", // the translation reference
"heading": "true" // only when item is used as heading
},
...
]
This method is also useful if you pretend to generate a per user menu dynamically in the server.
这个方法也很有用,如果你假装在服务器动态生成每个用户菜单。
Markdown Docs Markdown文档
This documentation is loaded from a Markdown source using Flatdoc plugin. The menu and the content is generated automatically from the .md file and styled directly from custom css.
Via the flatdoc directive you can use it like this
本文档是从使用flatdoc Markdown源加载插件。菜单的内容是自动生成的。MD文件直接从自定义的CSS样式。
Via the flatdoc directive you can use it like this
通过flatdoc指令你可以像这样使用
<flatdoc src="path/to/readme.md"></flatdoc>
Icons
Icons included from 图标包括
• Font Awesome
• Skycons
• Weather Icons
Themes 主题
To change the color scheme you have 2 options:
改变配色方案你有2个选择:
From LESS files
Edit the LESS files in folder master/less/app and the file master/less/bootstrap/variables.less to use the color you want.
在master/less/app中编辑LESS文件， 在文件master/less/bootstrap/variables.less中使用您需要的文件
Like Bootstrap, most of the colors are based on @brand-* variables.
You can also edit the files in master/less/theme folder to create your own set of color schemes. This files must be included after the app.css in order to override the default color set.
像Bootstrap，大部分颜色是基于@brand-* 变量。您也可以编辑master/less/theme 文件创建您自己的配色方案。这个文件必须包含在app.css之后以覆盖默认的颜色设置。
Changing the theme from LESS files helps you to avoid bloating your css by not double declaring your color rules.
通过使用LESS文件改变主题可以帮助您避免使用大量的css代码来重复定义色彩规则。
From CSS files
This template support color schemes including a css file. You can find the color options in the folder app/css/ files are named theme-*.css
此模板支持配色方案包括一个CSS文件。你可以找到颜色选项在文件app/css/中以theme-*.css命名的主题
If you want to change or add a new component color, just inspect the color using your favorite browser devtool and then replace the value in the file.
如果您想更改或添加新组件的颜色，只需检测使用你喜欢的浏览器中的devtool，然后替换文件中的值。
This files are prepared to change the basic color scheme (both sidebars and top navbar) but if you want to make a more deep change I suggest you to check the LESS way which is more simple for multiple component changes.
这个文件是准备改变基本的配色方案（包括侧边栏和顶部导航栏）但是如果你想做一个更深刻的变化，我建议您检查LESS方法，这个针对多个组件的变化更加简单。
Directives 指令
This item include the following directives.
这个项目包括以下指令：
[href]
File: anchor.js
Disables null anchor behavior
禁用空锚行为
[animate-enabled]
File: animate-enabled.js
Enable or disables ngAnimate for element with directive
启用或禁用ngAnimate与指令元素
[chosen]
File: chosen-select.js
Initializes the chose select plugin
初始化选择插件
[classyloader]
File: classy-loader.js
Enable use of classyLoader directly from data attributes
使classyLoader直接从数据属性的使用
[reset-key]
File: clear-storage.js
Removes a key from the browser storage via element click
通过点击从浏览器存储中删除一个关键元素
[filestyle]
File: filestyle.js
Initializes the fielstyle plugin
初始化fielstyle插件
[flatdoc]
File: flatdoc.js
Creates the flatdoc markup and initializes the plugin
创建flatdoc标记和初始化插件
[form-wizard]
File: form-wizard.js
Handles form wizard plugin and validation
处理表单向导插件和验证
[toggle-fullscreen]
File: fullscreen.js
Toggle the fullscreen mode on/off
切换全屏模式开/关
[gmap]
File: gmap.js
Init Google Map plugin
初始化谷歌地图插件
[load-css]
File: load-css.js
Request and load into the current page a css file
请求和加载到当前页面的css文件
[markdownarea]
File: markdownarea.js
Markdown Editor from UIKit adapted for Bootstrap Layout.
Markdown Editor从UIKit适用于Bootstrap布局。
[masked]
File: masked.js
Initializes the masked inputs
初始化蒙版的输入
[search-open]
File: navbar-search.js
Open the search in the top navbar. Use [search-dismiss__] in buttons at close it.
打开搜索顶部导航条。使用[search-dismiss__]按钮关闭它。
[notify]
File: notify.js
Create a notifications that fade out automatically. Based on Notify addon from UIKit (http://getuikit.com/docs/addons_notify.html)
创建一个自动淡出通知。根据从UIKit通知插件(http://getuikit.com/docs/addons_notify.html)
[now]
File: now.js
Provides a simple way to display the current time formatted
提供了一个简单的方法来显示当前时间格式化
[paneltool]
Module panel-tools.js
Directive tools to control panels. Allows collapse, refresh and dismiss (remove) Saves panel state in browser storage.
Supports attributes [panel-dismiss] [panel-collapse] [panel-refresh]
控制面板的指令工具。允许折叠，刷新和删除，保存面板状态在浏览器存储中。
Supports attributes [panel-dismiss] [panel-collapse] [panel-refresh]
支持属性[面板删除] [面板折叠] [面板刷新]
[animate]
File: play-animation.js
Provides a simple way to run animation with a trigger. Requires animo.js
提供了一种简单的方法用触发器运行动画。需要animo.js
[scrollable]
File: scroll.js
Make a content box scrollable
内容框滚动
[sidebar]
File: sidebar.js
Wraps the sidebar and handles collapsed state
包的侧边栏，控件折叠状态
[skycon]
File: skycons.js
Include any animated weather icon from Skycons
包括Skycons中的任何动画天气图标
[sparkline]
File: sparkline.js
SparkLines Mini Charts
线性图表
[check-all]
File: table-checkall.js
Tables check all checkbox
表检查所有复选框
[tagsinput]
File: tags-input.js
Initializes the tag inputs plugin
初始化标签输入插件
[toggle-state]
File: toggle-state.js
Toggle a classname from the body tag. Useful to change a state that affects globally the entire layout or more than one item.
Elements must have [toggle-state=”CLASS-NAME-TO-TOGGLE”]. Use [no-persist] to avoid saving the sate in browser storage.
从body 的标签中切换一个类名。有用的改变影响全局布局或多个元素的状态。
Elements must have [toggle-state=”CLASS-NAME-TO-TOGGLE”]. Use [no-persist] to avoid saving the sate in browser storage.
元素必须有[toggle-state=”CLASS-NAME-TO-TOGGLE”]。使用[no-persist]避免在浏览器存储中保存状态。
[ui-slider]
File: ui-slider.js
Initializes the jQuery UI slider controls
初始化jQuery UI滑动控制
[validate-form]
File: validate-form.js
Initializes the validation plugin Parsley
初始化验证插件
[vector-map]
File: vector-map.js.js
Initializes jQuery Vector Map plugin
初始化jQuery矢量地图插件
Bootstrap
This item include all directives from Angular BootstrapUI.
这个项目包括所有Angular BootstrapUI指令。
Constants 常量
Colors
APP_COLORS
Defines the brand colors used in the css accessible from JS
通过JS访问定义中在css中的颜色值。
App.controller('ExampleCtrl', ['APP_COLORS', function(colors) {
console.log( colors.primary );
// prints #5d9cec
}]);
This constant is used together with the service colors to provide access from the $scope to each color by its name
此常量与服务颜色一起使用，使用$scope通过每种颜色的名称来提供访问。
Example
<div sparkline data-bar-color="{{colorByName('primary')}}" ></div>
Media Queries
APP_MEDIAQUERY
Defines the media queries used in the css accessible from JS
通过JS访问定义了媒体查询中访问的css
App.controller('ExampleCtrl', ['APP_MEDIAQUERY', function(mq) {
console.log( mq.mobile );
// prints 480
}]);
Requires
APP_REQUIRES
Defines the script used with the lazy load system.
定义脚本使用延迟加载系统。
Format:
// Put here all jQuery script (and not angular js)
scripts: {
'friendly-name' : ['path/to/plugin.js', 'path/to/plugin.css', '...'],
...
}
// Put here all angular js modules that needs to be instantiated
modules: {
{
name: 'toaster', files: ['path/to/module.js', 'path/to/module.css', '...']
},
...
}
Learn more by looking into the file config.js
Credits
Angular
Angular Docs
ocLazyLoad
uiRouter
uiTranslate
uiBootstrap
Toaster
Angular Loading Bar
Bootstrap
jQuery
Fastclick
Animo
Animate.css
Chosen
Codemirror
BS Filestyle
FlotCharts
gMap
Marked
ClassyLoader
CSSRadialBar
Modernizr
MomentJs
Parsley
Bootstrap Slider
Sparkline
BS Tags Input
slimSCroll
DataTables
FullCalendar
CsSpinner
InputMask
jVectorMap
FlatDoc
jQueryUI
UiKit Upload
UiKit Notify
UiKit MarkdownArea
Icons
Font Awesome
Skycons
Weather Icons
Demo images
uiFaces
Raumrot
Unsplash
© 2016 - Angle
Overview
Support
Getting started
Tips
Starting the app
Customizing
Structure
Custom code
Build
Javascript
LESS
Vendor
Usage
Layout
Lazy Load
RTL
Routes
Translation
Dynamic Sidebar
Markdown Docs
Icons
Themes
Directives
Bootstrap
Constants
Colors
Media Queries
Requires
Credits
Angle
Overview 概述
This document aims to explain the best way to work with the product and its components.
本文档的目的在于说明与产品及其组件工作最好的方式。
Support 支持
In case you have questions Contact Support
万一你遇到问题，联系技术支持。
Getting started入门
Tips 提示
• Do not start from scratch, use an existing asset and modify it to learn how it works.
不从头开始,利用现有的资源并加以研究，学习它是如何工作的。
• Explore the sources for ideas and sample code.
探索思想的来源和示例代码
• Use Firebug or Chrome Developer Tools to find bugs on your website. Using one of those tools will help you to save time analyzing the site and finding elements structure, like classes, id or tags
o Quick tip: open your site with Chrome, press F12 and go to console tab, reload your page and if something goes wrong you will see your page errors in red text.
使用Firebug或者Chrome开发者工具在你的网站上找到bug。使用这些工具中的任一个分析站点或查找元素结构，如类、ｉｄ或标签将帮助您节省时间。
快速提示: 用Chrome打开你的网站,按F12，去控制台选项卡,重新加载页面,如果出现问题你会看到红色的文本页面错误。
• In case of error messages, someone might have seen it too, so you can try a Google search for a quick fix.
在错误消息的情况下，有人可能已经看到了它，所以你可以尝试谷歌搜索一个快速修复。
Starting the app 开启应用
Since this is AngularJS based application you need a server (Apache, IIS, xampp, etc)to serve the html files and perform http request to load all views.
AngularJS基础应用程序需要一个服务器(xampp Apache,IIS等)，为html文件执行http请求加载所有视图。
Important! Opening the index.html with a double click (i.e. using file:// protocol) will show you only a blank page because there’s no server that response to the requests made for each view in order to display the app interface.
注意！双击打开首页，（即使用：//协议）只会给您显示一个空白页，因为没有服务器提供为每个视图响应的应用程序的接口请求。
Customizing 定制
Structure结构
Before starting to customize the template, here are the project files organization structure:
开始定制模板之前,项目文件组织结构如下:
+-- app/
| +-- css/
| +-- documentation/（文档）
| +-- img/
| +-- js/
| +-- i18n/
| +-- pages/
| +-- vendor/
| +-- views/
+-- master/
| +-- jade/
| | +-- pages/
| | +-- views/
| +-- js/
| | +-- modules/（模块）
| | | +-- controllers/
| | | +-- directives/
| | | +-- services/
| | +-- custom/
| +-- less/
| | +-- app/
| | +-- bootstrap/
| | +-- themes/
| +-- gulpfile.js
| +-- package.json
| +-- bower.json
+-- server/
| +-- *.json
+-- vendor/
+-- index.html
________________________________________
Main folders explanation 主要文件夹的介绍
app/ folder
This folder contains the compiled files. This files are ready to deploy on your server.
此文件夹包含编译后的文件。这个文件是要部署在你的服务器上。
Pages（页面）
This folder contains the compiled html files for the single pages (out of the app).
此文件夹包含HTML文件单页。
views
This folder contains the compiled html files for the views and partials used for the app.
此文件夹包含应用程序的视图和局部视图的HTML文件。
i18n
This folder contains the json files use for translation.
此文件夹包含翻译用的json文件
Vendor（第三方提供的文件）
This folder contains vendor files not managed via bower
此文件夹包含不被本地软件包管理器管理的第三方文件
master/ folder
This folder contains the source files. You will find the following folders inside
此文件夹包含所有源文件，在master中你会发现以下文件：
• jade/ This folder contains JADE files. This files need to be compiled into html files to be displayed by a browser
jade/文件夹中包含jade文件。这些文件最终被编译为html文件，由浏览器显示出来。
less/ This folder contains the LESS files for the core styles and bootstrap styles.
less/文件夹中包含less文件主要为样式文件和bootstrap样式文件。
• js/ Here you will find pure JS files. All this files are concatenated into the file app.js.
js/这里都是纯js文件。所有这些文件都将对应到app.js文件中
vendor/ folder
This folder contains the vendor files used to include plugins and other components. This folder is handled via bower so optionally you can remove or upgrade the vendor components using such tool.
此文件夹包含第三方插件和其他第三方组件。通过客户端软件包管理器，你可以删除或更新第三方插件和组件。
server/ folder
This folder contains server side files used for demonstration and guide for the flot chart and file upload components.
此文件夹包含用于演示和指导在图表和文件上传组件的服务器端文件。
• sidebar-menu.json This file is important and required because it contains the sidebar menu definition.
sidebar-menu.json这个文件是很重要的，不能缺少，因为它包含工具demonstration栏菜单的定义。
Custom code 自定义代码
To add your own code you can follow this instructions:
你可以依照这些操作指南来增加您自定义的代码：
Working with css and js 使用css和js
• Create a file app/css/custom.css and add your own styles
创建一个app/css/custom.css样式文件，定义您自己的样式
• Create a file app/js/custom.js and add your own javascript
创建一个app/js/custom.js文件, 定义您自己的javascript
• Edit the file index.html and include custom.css after all other css files and custom.js after all other js files.
编辑文件index.html，放置custom.css文件在所有其他的CSS文件之后，放置custom.js文件在所有其他的JS文件后。
Working with source files 使用源文件
• For JS, go to folder master/js/custom and start editing the file custom.js. After compile the source again with gulp, your own code will included at th bottom of file app/js/app.js.
对于JS，在master/js中编辑custom.js文件。通过gulp编译之后，您自己的代码将会包含在app/js/app.js文件的底部。
• For LESS, go to folder master/less and create a folder called custom and add your won less files. Then edit file app.less and downloaded@import all your stylesheets at the bottom (overrides all app default styles)
对于LESS，在master/less中新建一个您自己的custom.less文件，然后在文件app.less底部导入您的样式表(这一过程将覆盖所有应用程序默认样式)
A note on updating 更新时请注意
The premise is, the less you change the downloaded code, the easier will be to apply any updates. Try always to keep your own code the most separated as possible from the package code to easily apply new updates when necessary.
您改变下载的代码越少，您应用任何更新就越容易。必要时，尽量保持你自己的代码与软件包代码的分离，这样可以方便地应用新的更新。
Build 构建
Important! You only need to follow this instructions in case you want to work with JADE, LESS and concatenate all JS modules.
重要提示！你只需要遵循这一指示，如果您想用JADE, LESS连接所有js模块。
Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications.
Node.js 是一个建立在Chrome的JavaScript运行时容易快速构建可扩展的网络应用平台。
Gulp is a task manager, you can define different tasks to run certain commands. Those commands does the compilation job for JADE and LESS, and concatenates the JS files.
Gulp 是一个任务管理器。您可以定义不同的任务来运行某些命令。这些命令编译JADE and LESS,并将JS文件连接起来。
Bower is a dependency manager, it works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for. Bower keeps track of these packages in a manifest file, bower.json.
Bower是一个依赖管理器，它的工作原理是从所有的获取和安装包，搜索、发现、下载，并保存你要寻找的东西。依赖管理器跟踪这些包在一个清单文件，bower.json中。
The package includes under the master/ folder the file gulpfile.js, package.json and bower.json to install the required components to compile the source files.
展开master下的gulpfile.js, package.json and bower.json去安装所需要的组件来编译源文件。
Installing tools 安装工具
The following steps are intended to be an orientation guide, if you are not experienced with this you will need to learn more about it from Google
以下步骤旨在给出一些指导方向，如果你不是很熟练，你可以在Google上学习更多相关知识。
• To install node and npm, go to http://nodejs.org/
安装node and npm，请参照网址http://nodejs.org/
• Run npm install -g bower to install bower to manage dependencies
执行npm install -g bower 安装依赖管理器来管理依懒性
• Download and install GIT for your platform http://git-scm.com/downloads
在您的电脑上下载和安装GIT 网址：http://git-scm.com/downloads
Once you have all tools installed
一旦你已经安装了所有的工具
• Open a terminal, go the package master/ folder, then run the command npm install. This command will install gulp and all project dependencies.
打开一个终端，打开master文件夹，然后执行 npm install命令，此命令将安装gulp和所有的项目依赖。
• Then, to install vendor dependencies, run bower install
然后安装第三方依赖，运行bower install
• Finally run gulp to start the task manager
最后执行gulp, 启动任务管理器
If everything goes fine, you should see the messages in the terminal telling you that most the task are done ok. The task will watch for files to compile them automatically all files when change.
如果一切顺利，你可以在终端上看到大部分的任务执行成功的消息。该任务将监视文件在更改时自动编译所有文件。
To enable the automatic page reload there is also included a LiveReload task that requires the Chrome plugin Livereload
启用自动重新载入页面还包括一个livereload任务需要Chrome插件livereload
Javascript
The Javascript source is divided in two main files that controls the app
JS是分为两个主要文件控制程序
base.js: contains the scripts to start the application
base.js: 包含启动应用程序的脚本
app.js: contains the modules used in the application (controllers, directive, etc)
app.js: 包含应用程序中使用的模块（控制器、指令等）
Note The edit the scripts included in base.js open the file vendor.base.json located under the master folder
注解：编辑脚本包含在base.js vendor.base.json位于主文件夹下
The app.js script build (concatenation) order is
app.js脚本构造顺序如下：
'js/app.init.js'
'js/modules/*.js'
'js/modules/controllers/*.js'
'js/modules/directives/*.js'
'js/modules/services/*.js'
'js/modules/filters/*.js'
LESS
The LESS files compiles into the file app.css. This file contains the bootstrap styles and the application custom styles.
LESS文件编译为app.css，此文件包含bootstrap样式和应用程序的定制样式。
Also the app-rtl.css is automatically generated with the same styles but inverted for RTL layout. To convert styles the node script css-flip is used.
所有的app-rtl.css 自动生成相同样式但RTL布局倒转的， 转换方式的节点脚本使用CSS翻转。
Vendor
Vendor script dependencies are managed by bower. Just run bower install in folder master/ and all dependencies will be installed.
第三方脚本依赖通过依赖管理器管理。 只需在master文件夹中运行bower install命令，所有的依赖关系将被安装。
After installing all dependencies is necessary to install them in the locations the app expects them. To do that, run gulp task with the command gulp scripts:vendor in the master folder.
在应用程序预计他们的位置安装完所有的依赖关系是必要的。在主文件夹运用gulp scripts:vendor 命令运行gulp任务。
This task will run automatically the tasks scripts:vendor:app and scripts:vendor:base
这项任务将自动运行任务scripts:vendor:app and scripts:vendor:base
Vendor folder 第三方文件
To avoid not necessary files that bower downloads there’s a task scripts:vendor:app that will copy all files required by the app from the bower_components folder to the main /vendor folder.
This files are listed in vendor.json file which contains the path of all necessary files required by the app components. Those files are usually required via the lazy load module and you can include fonts, svg, etc.
为了避免依赖管理器下载不必要的文件，有一个任务scripts:vendor:app将从bower_components文件复制应用程序所需的主要文件到vendor文件夹。
这个文件是在vendor.json文件中包含应用程序所需的所有必要的文件的路径组件。这些文件通常需要通过延迟加载模块,也可以包括字体、svg等。
Vendor Base 第三方组件基础
The base.js file is generated with the task scripts:vendor:base. This task will read the list of files in the vendor.base.json file and will concat and compress all files and move them to create the mentioned base.js file.
base.js文件是通过scripts:vendor:base生成的。这项任务将在vendor.base.json文件读取文件列表，将连接和压缩所有文件并将它们移动到创建上述base.js文件。
All files in base.js are loaded when the app is required for first time and contains all vendor scripts necessary to start the app (jquery, angular, etc).
在base.js所有文件被加载时，程序是第一时间要求和包含所有第三方的脚本需要启动应用程序（jQuery，angular，等）。
Vendor Updates第三方组件更新
To update vendor files via bower you can edit the bower.json file by adding the last version you want to download.
通过依赖管理器更新第三方组件，您可以通过编辑bower.json文件增加您下载到的最新的版本
Note The folder app/vendor contains vendor files that currently aren’t possible to be managed via bower
注解：app/vendor文件包含不能被当前依赖管理器管理的第三方文件。
Usage使用方法
Layout布局
Layout can be changed via the following classed applied to the body tag
通过将以下类运用body 标签中可以改变布局
.layout-fixed: Makes navbars become fixed while the user can scroll only content
.layout-fixed: 使navbars固定，而用户仅可以滚动其中内容
.layout-boxed: Limits the width of the main wrapper element
.layout-boxed:限制主框架的宽度
.aside-collapsed: Condenses the sidebar showing only icons
.aside-collapsed:收缩使边导航只显示图标
.aside-toggle: used internally for mobiles to hide the sidebar off screen
.aside-toggle:内部使用用来隐藏侧边栏使不显示在屏幕上
.offsidebar-open: used internally to display the offsidebar component (formally the right sidebar)
.offsidebar-open：内部使用显示offsidebar组件。
<html>
<head>
#metas and css
</head>
<body>
<section class="wrapper" data-ui-view>
#start include from app.html
<nav class="navbar topnavbar">
#top navbar content
</nav>
<aside class="aside">
#sidebar content (left)
</aside>
<aside class="offsidebar">
#offsidebar content (right)
</aside>
<section>
<div class="content-wrapper" data-ui-view>
#page content
</div>
</section>
#end include from app.html
</section>
#scripts
</body>
</html>
Lazy Load 懒加载
This app requires only the necessary scripts according to the view that is loaded saving tons unnecessary request to the server.
根据视图，这个程序只需要必要的脚本加载,节约不必要的服务器请求。
The lazy load is handled by a custom core function based on the plugin ocLazyLoad
懒加载是由一个基于插件oclazyload定制的核心功能处理
To configure the lazy scripts, you need to edit the constants APP_REQUIRES (constants.js)
配置懒加载脚本，你需要配置constants.js中常量
Then edit the app configuration (config.js) where you will find the routes configuration and add or edit the params using the special function resolveFor which handles the scripts request order for the current route.
然后编辑应用程序的配置（config.js文件），你会发现路由配置和添加或使用特殊功能寻求处理当前路径的脚本请求命令编辑参数。
RTL
RTL support uses the a tool called css-flip which inverts most the css properties to change the page orientation.
It’s also a property $rootScope.isRTL to detect when the site is in RTL mode.
RTL支持使用的工具称为CSS翻转，它颠倒大多数CSS属性更改页面方向。
$rootScope.isRTL能够检测该网站是否在RTL模式。
Routes路由
This app uses for routing the AngularUI Router with nested states making more simple to manage the routing system and load resource in cascade.
这个应用程序使用嵌套的状态更容易管理的路由系统和级联负载资源路由的angularui路由器。
All routes are defined in the file config.js
所有的路由都是在文件config.js中的定义
Translation翻译
The translation system uses the AngularUI Translate module.This modules simplifies the translation system by loading translate references from a JSON file and replacing the content where the reference has been used.
翻译系统使用AngularUI Translate 模块。这个模块简化了翻译系统通过加载来自JSON文件的翻译参考，然后替换引用已使用的内容。
Examples
<h3 ui-translate="reference.NAME">Text that will be replaced</h3>
<h3>{{ 'reference.NAME' | translate }}</h3>
<a href="#" title="{{ 'reference.NAME' | translate }}">Link</a>
The JSON files with translation references are located in the folder app/i18n
Dynamic Sidebar 动态栏
The sidebar is created dynamically from a JSON file.
侧边栏动态从JSON文件创建。
JSON properties format:
[
{
"text": "Item text", // replaced by translate reference
"sref": "app.dashboard", // the state name of the target route
"icon": "icon-speedometer", // the icon full classname
"translate": "sidebar.ITEM", // the translation reference
"heading": "true" // only when item is used as heading
},
...
]
This method is also useful if you pretend to generate a per user menu dynamically in the server.
这个方法也很有用,如果你假装在服务器动态生成每个用户菜单。
Markdown Docs Markdown文档
This documentation is loaded from a Markdown source using Flatdoc plugin. The menu and the content is generated automatically from the .md file and styled directly from custom css.
Via the flatdoc directive you can use it like this
本文档是从使用flatdoc Markdown源加载插件。菜单的内容是自动生成的。MD文件直接从自定义的CSS样式。
Via the flatdoc directive you can use it like this
通过flatdoc指令你可以像这样使用
<flatdoc src="path/to/readme.md"></flatdoc>
Icons
Icons included from 图标包括
• Font Awesome
• Skycons
• Weather Icons
Themes 主题
To change the color scheme you have 2 options:
改变配色方案你有2个选择:
From LESS files
Edit the LESS files in folder master/less/app and the file master/less/bootstrap/variables.less to use the color you want.
在master/less/app中编辑LESS文件， 在文件master/less/bootstrap/variables.less中使用您需要的文件
Like Bootstrap, most of the colors are based on @brand-* variables.
You can also edit the files in master/less/theme folder to create your own set of color schemes. This files must be included after the app.css in order to override the default color set.
像Bootstrap，大部分颜色是基于@brand-* 变量。您也可以编辑master/less/theme 文件创建您自己的配色方案。这个文件必须包含在app.css之后以覆盖默认的颜色设置。
Changing the theme from LESS files helps you to avoid bloating your css by not double declaring your color rules.
通过使用LESS文件改变主题可以帮助您避免使用大量的css代码来重复定义色彩规则。
From CSS files
This template support color schemes including a css file. You can find the color options in the folder app/css/ files are named theme-*.css
此模板支持配色方案包括一个CSS文件。你可以找到颜色选项在文件app/css/中以theme-*.css命名的主题
If you want to change or add a new component color, just inspect the color using your favorite browser devtool and then replace the value in the file.
如果您想更改或添加新组件的颜色，只需检测使用你喜欢的浏览器中的devtool，然后替换文件中的值。
This files are prepared to change the basic color scheme (both sidebars and top navbar) but if you want to make a more deep change I suggest you to check the LESS way which is more simple for multiple component changes.
这个文件是准备改变基本的配色方案（包括侧边栏和顶部导航栏）但是如果你想做一个更深刻的变化，我建议您检查LESS方法，这个针对多个组件的变化更加简单。
Directives 指令
This item include the following directives.
这个项目包括以下指令：
[href]
File: anchor.js
Disables null anchor behavior
禁用空锚行为
[animate-enabled]
File: animate-enabled.js
Enable or disables ngAnimate for element with directive
启用或禁用ngAnimate与指令元素
[chosen]
File: chosen-select.js
Initializes the chose select plugin
初始化选择插件
[classyloader]
File: classy-loader.js
Enable use of classyLoader directly from data attributes
使classyLoader直接从数据属性的使用
[reset-key]
File: clear-storage.js
Removes a key from the browser storage via element click
通过点击从浏览器存储中删除一个关键元素
[filestyle]
File: filestyle.js
Initializes the fielstyle plugin
初始化fielstyle插件
[flatdoc]
File: flatdoc.js
Creates the flatdoc markup and initializes the plugin
创建flatdoc标记和初始化插件
[form-wizard]
File: form-wizard.js
Handles form wizard plugin and validation
处理表单向导插件和验证
[toggle-fullscreen]
File: fullscreen.js
Toggle the fullscreen mode on/off
切换全屏模式开/关
[gmap]
File: gmap.js
Init Google Map plugin
初始化谷歌地图插件
[load-css]
File: load-css.js
Request and load into the current page a css file
请求和加载到当前页面的css文件
[markdownarea]
File: markdownarea.js
Markdown Editor from UIKit adapted for Bootstrap Layout.
Markdown Editor从UIKit适用于Bootstrap布局。
[masked]
File: masked.js
Initializes the masked inputs
初始化蒙版的输入
[search-open]
File: navbar-search.js
Open the search in the top navbar. Use [search-dismiss__] in buttons at close it.
打开搜索顶部导航条。使用[search-dismiss__]按钮关闭它。
[notify]
File: notify.js
Create a notifications that fade out automatically. Based on Notify addon from UIKit (http://getuikit.com/docs/addons_notify.html)
创建一个自动淡出通知。根据从UIKit通知插件(http://getuikit.com/docs/addons_notify.html)
[now]
File: now.js
Provides a simple way to display the current time formatted
提供了一个简单的方法来显示当前时间格式化
[paneltool]
Module panel-tools.js
Directive tools to control panels. Allows collapse, refresh and dismiss (remove) Saves panel state in browser storage.
Supports attributes [panel-dismiss] [panel-collapse] [panel-refresh]
控制面板的指令工具。允许折叠，刷新和删除，保存面板状态在浏览器存储中。
Supports attributes [panel-dismiss] [panel-collapse] [panel-refresh]
支持属性[面板删除] [面板折叠] [面板刷新]
[animate]
File: play-animation.js
Provides a simple way to run animation with a trigger. Requires animo.js
提供了一种简单的方法用触发器运行动画。需要animo.js
[scrollable]
File: scroll.js
Make a content box scrollable
内容框滚动
[sidebar]
File: sidebar.js
Wraps the sidebar and handles collapsed state
包的侧边栏，控件折叠状态
[skycon]
File: skycons.js
Include any animated weather icon from Skycons
包括Skycons中的任何动画天气图标
[sparkline]
File: sparkline.js
SparkLines Mini Charts
线性图表
[check-all]
File: table-checkall.js
Tables check all checkbox
表检查所有复选框
[tagsinput]
File: tags-input.js
Initializes the tag inputs plugin
初始化标签输入插件
[toggle-state]
File: toggle-state.js
Toggle a classname from the body tag. Useful to change a state that affects globally the entire layout or more than one item.
Elements must have [toggle-state=”CLASS-NAME-TO-TOGGLE”]. Use [no-persist] to avoid saving the sate in browser storage.
从body 的标签中切换一个类名。有用的改变影响全局布局或多个元素的状态。
Elements must have [toggle-state=”CLASS-NAME-TO-TOGGLE”]. Use [no-persist] to avoid saving the sate in browser storage.
元素必须有[toggle-state=”CLASS-NAME-TO-TOGGLE”]。使用[no-persist]避免在浏览器存储中保存状态。
[ui-slider]
File: ui-slider.js
Initializes the jQuery UI slider controls
初始化jQuery UI滑动控制
[validate-form]
File: validate-form.js
Initializes the validation plugin Parsley
初始化验证插件
[vector-map]
File: vector-map.js.js
Initializes jQuery Vector Map plugin
初始化jQuery矢量地图插件
Bootstrap
This item include all directives from Angular BootstrapUI.
这个项目包括所有Angular BootstrapUI指令。
Constants 常量
Colors
APP_COLORS
Defines the brand colors used in the css accessible from JS
通过JS访问定义中在css中的颜色值。
App.controller('ExampleCtrl', ['APP_COLORS', function(colors) {
console.log( colors.primary );
// prints #5d9cec
}]);
This constant is used together with the service colors to provide access from the $scope to each color by its name
此常量与服务颜色一起使用，使用$scope通过每种颜色的名称来提供访问。
Example
<div sparkline data-bar-color="{{colorByName('primary')}}" ></div>
Media Queries
APP_MEDIAQUERY
Defines the media queries used in the css accessible from JS
通过JS访问定义了媒体查询中访问的css
App.controller('ExampleCtrl', ['APP_MEDIAQUERY', function(mq) {
console.log( mq.mobile );
// prints 480
}]);
Requires
APP_REQUIRES
Defines the script used with the lazy load system.
定义脚本使用延迟加载系统。
Format:
// Put here all jQuery script (and not angular js)
scripts: {
'friendly-name' : ['path/to/plugin.js', 'path/to/plugin.css', '...'],
...
}
// Put here all angular js modules that needs to be instantiated
modules: {
{
name: 'toaster', files: ['path/to/module.js', 'path/to/module.css', '...']
},
...
}
Learn more by looking into the file config.js
Credits
Angular
Angular Docs
ocLazyLoad
uiRouter
uiTranslate
uiBootstrap
Toaster
Angular Loading Bar
Bootstrap
jQuery
Fastclick
Animo
Animate.css
Chosen
Codemirror
BS Filestyle
FlotCharts
gMap
Marked
ClassyLoader
CSSRadialBar
Modernizr
MomentJs
Parsley
Bootstrap Slider
Sparkline
BS Tags Input
slimSCroll
DataTables
FullCalendar
CsSpinner
InputMask
jVectorMap
FlatDoc
jQueryUI
UiKit Upload
UiKit Notify
UiKit MarkdownArea
Icons
Font Awesome
Skycons
Weather Icons
Demo images
uiFaces
Raumrot
Unsplash
© 2016 - Angle
angle一个非常优秀的响应式Bootstrap管理模板本站拥有Angle3.8.5,Angle3.8.0,Angle3.7.5,Angle3.7.0,Angle3.6,angle 3.5 admin 下载,angle 3.5.4,angle 3.0,,angle 3.5.4 下载等版本已通过官方授权Angle3.8.5,Angle3.8.0,Angle3.7.5,Angle3.7.0,Angle3.6,angle 3.5 admin 下载,angle 3.5.4,angle 3.0,angle 3.5.4 下载7
