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

?

轉載于:https://www.cnblogs.com/zhouyou96/p/7456881.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的前端UI框架《Angulr》入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。