前端UI框架《Angulr》入門

Angulr 項目的名稱爲 Angulr，對！沒錯！就是少個 a，少個 a 就是它正確的拼寫。

是一個以 Bootstrap 和 AngularJS 爲基礎，並使用了大量前端開源組件合成的一個前端UI框架，是很是棒的UI框架。

今天就來和你們講講怎麼使用這個框架。在這以前，先放幾張這個項目的截圖，給你們欣賞一下。

 

 好了，圖片欣賞完了，咱們來正式開始使用這個框架吧。

打開項目，會發現如下文件夾：

 

目錄說明

• grunt :構建配置文件 (這個文件夾裏的東西可忽略，不用管它)
• html: 靜態頁面 (注：這僅僅是一堆靜態頁面，沒有用到 angularjs)
• lading: 官方網站 (這個文件夾裏的東西可忽略，不用管它)
• libs: 支持庫 jquery,bootstrap,angular 等
• src: 主要風格、工匠風格、反轉風格、音樂平臺、幫助等，都在這個文件夾裏面
• swig: 前端swig源代碼 (這個文件夾裏的東西可忽略，不用管它)

這麼一看來，除了 libs 和 src，其它文件夾裏的東西就不重要了，甚至能夠刪除都行。

如何建立一個新頁面？

入門的話，固然是要講如何從無到有的一個過程了。好比咱們如今要新制做一個 工單管理 的界面。

第一步，就是在導航欄上添加菜單項，找到 src\tpl\blocks\nav.html 這個文件，這個文件就是設置菜單的，添加如下代碼：

1 <li ui-sref-active="active">
2         <a ui-sref="app.order.list">
3             <i class="glyphicon glyphicon-list-alt icon text-info"></i>
4             <span class="font-bold">工單管理</span>
5         </a>
6 </li>

注意，這裏的 ui-sref="app.order.list" 是一個模塊，目前，咱們尚未編寫這個模塊的，因此點擊這個菜單不會有反應。

另外，你改好以後，再刷新頁面，並不會看到這個菜單，是由於緩存。如何去除這個緩存呢？辦法是使用瀏覽器直接訪問 src\tpl\blocks\nav.html 這個頁面，而後在瀏覽器上按 Ctrl+F5 強制刷新 nav.html 這個頁面，最後，再回到正常頁面按 F5 刷新，便可看到最新的效果。就像這樣：

咱們能夠看到，多出一個工單管理。然而，如今點擊這個工單管理不起做用的，由於尚未 app.order.list 模塊。如今咱們來建立這個模塊。

找到 src/js/config.router.js ，並在文件中添加如下代碼（添加到什麼位置，本身憑經驗看着辦）：

 1 // order
 2 .state('app.order', {
 3     abstract: true,
 4     url: '/order',
 5     templateUrl: 'tpl/app_order.html'
 6 })
 7 .state('app.order.list', {
 8     url: '/order/list',
 9     templateUrl: 'tpl/app_order_list.html'
10 })

而後還要添加兩個頁面，建立頁面 src/tpl/app_order.html ，注意應使用 UTF-8 編碼，內容以下 ：

1 <div class="bg-light lter b-b wrapper-md">
2     <h1 class="m-n font-thin h3">工單管理 <kbd class="pull-right">Order Manager</kbd></h1>
3 </div>
4 <div ui-view>
5     <!-- 子模塊的內容將會顯示在 ui-view 裏面 -->
6 </div>

再建立頁面 src/tpl/app_order_list.html，注意應使用 UTF-8 編碼，內容以下：

<div>這是工單列表</div>

此時，你就完成了頁面的建立，訪問頁面的時候，按 Ctrl+F5，強制刷新全部css和js，一個從無到有的過程就所有完成啦：

好了，如今你已經建立出一個頁面了，至於這個頁面到底要怎麼寫，你其實就徹底能夠去複製/粘貼了，項目中有大量的示例，開始使用 Angulr 吧。

 

最後，提供 Angulr 2.2 的漢化版給你們下載哦。 

下載地址： https://files.cnblogs.com/files/zhouyou96/Angulr-2.2-%E6%B8%B8%E5%93%A5%E6%B1%89%E5%8C%96%E7%89%88.zip