angle一個非常好用的響應式Bootstrap管理模板Angle3.8.5_Angle3.8.0_Angle3.7.5_Angle3.7.0_Angle3.6_Angle3.5_angle 3.5
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。使用這些工具中的任一個分析站點或查詢元素結構,如類、id或標籤將幫助您節省時間。
快速提示: 用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。使用這些工具中的任一個分析站點或查詢元素結構,如類、id或標籤將幫助您節省時間。
快速提示: 用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
相關文章
- Bootstrap 響應式後臺管理皮膚boot
- 29個基於Bootstrap的HTML5響應式網頁設計模板bootHTML網頁
- 非常好用的PHP模板引擎PHP
- bootstrap6-響應式影像boot
- 21 個超棒的免費的 Joomla 響應式模板OOM
- bootstrap 響應式工具 隱藏效果boot
- 35 個免費的響應式網站模板下載網站
- 35個免費的響應式網站模板下載網站
- bootstrap17-響應式表格佈局boot
- bootstrap 響應式佈局 居中問題boot
- SwiftyPhotos 一個非常好用的PhotoKit框架介面Swift框架
- 自己實現一個VUE響應式--VUE響應式原理Vue
- 35 個免費創新的響應式 HTML5 模板HTML
- 20 個高質量響應式的 HTML/CSS 網站模板HTMLCSS網站
- 關於一個非常好用的載入條,只是一個人圖片樣式
- 模仿bootstrap寫響應式圖片佈局boot
- bootstrap32-響應式實用工具類boot
- (五)Bootstrap 輔助組和響應式工具boot
- 使用BootStrap進行響應式佈局案例boot
- 基於 Bootstrap 的響應式後臺儀表板boot
- 20 個免費的 Bootstrap 模板boot
- 響應式佈局:CSS-flexbox & BootstrapCSSFlexboot
- 免費的Bootstrap管理後臺模板集合boot
- 7 個 Bootstrap 線上編輯器用於快速開發響應式網站boot網站
- Paste for mac(非常好用的剪下板管理神器)ASTMac
- 安利一個非常好用的 echarts geojson 生成器EchartsJSON
- bootstrap重置項 及響應式版心 row類清除marginboot
- [開發教程]第7講:Bootstrap響應式佈局boot
- 2014年8月 10 個全新的 Bootstrap 3 管理模板boot
- 實現一個簡易的響應式系統
- 分享一套基於bootstrap的後臺管理系統html模板bootHTML
- 推薦一個非常好用的Chrome擴充套件應用,用於美化Json字串Chrome套件JSON字串
- 使用 useState 管理響應式狀態
- 使用media Queries實現一個響應式的選單
- 如何製作一個響應式的HTML5表格HTML
- 讓效能提升56%的Vue3.5響應式重構之“版本計數”Vue
- 推薦幾個 bootstrap 後端模板boot後端
- JavaScript 如何實現一個響應式系統JavaScript