Angulr 項(xiàng)目的名稱為 Angulr，對！沒錯(cuò)！就是少個(gè) a，少個(gè) a 就是它正確的拼寫。

是一個(gè)以 Bootstrap 和 AngularJS 為基礎(chǔ)，并使用了大量前端開源組件合成的一個(gè)前端UI框架，是非常棒的UI框架。

今天就來和大家講講怎么使用這個(gè)框架。在這之前，先放幾張這個(gè)項(xiàng)目的截圖，給大家欣賞一下。

?

?好了，圖片欣賞完了，我們來正式開始使用這個(gè)框架吧。

打開項(xiàng)目，會(huì)發(fā)現(xiàn)以下文件夾：

?

目錄說明

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

這么一看來，除了 libs?和 src，其它文件夾里的東西就不重要了，甚至可以刪除都行。

如何創(chuàng)建一個(gè)新頁面？

入門的話，當(dāng)然是要講如何從無到有的一個(gè)過程了。比如我們現(xiàn)在要新制作一個(gè)?工單管理?的界面。

第一步，就是在導(dǎo)航欄上添加菜單項(xiàng)，找到?src\tpl\blocks\nav.html?這個(gè)文件，這個(gè)文件就是設(shè)置菜單的，添加以下代碼：

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"?是一個(gè)模塊，目前，我們還沒有編寫這個(gè)模塊的，所以點(diǎn)擊這個(gè)菜單不會(huì)有反應(yīng)。

另外，你改好之后，再刷新頁面，并不會(huì)看到這個(gè)菜單，是因?yàn)榫彺妗Ｈ绾稳コ@個(gè)緩存呢？辦法是使用瀏覽器直接訪問 src\tpl\blocks\nav.html?這個(gè)頁面，然后在瀏覽器上按 Ctrl+F5?強(qiáng)制刷新 nav.html?這個(gè)頁面，最后，再回到正常頁面按 F5?刷新，即可看到最新的效果。就像這樣：

我們可以看到，多出一個(gè)工單管理。然而，現(xiàn)在點(diǎn)擊這個(gè)工單管理不起作用的，因?yàn)檫€沒有 app.order.list?模塊。現(xiàn)在我們來創(chuàng)建這個(gè)模塊。

找到 src/js/config.router.js ，并在文件中添加以下代碼（添加到什么位置，自己憑經(jīng)驗(yàn)看著辦）：

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 })

然后還要添加兩個(gè)頁面，創(chuàng)建頁面 src/tpl/app_order.html ，注意應(yīng)使用 UTF-8?編碼，內(nèi)容如下 ：

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 <!-- 子模塊的內(nèi)容將會(huì)顯示在 ui-view 里面 --> 6 </div>

再創(chuàng)建頁面 src/tpl/app_order_list.html，注意應(yīng)使用 UTF-8?編碼，內(nèi)容如下：

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

此時(shí)，你就完成了頁面的創(chuàng)建，訪問頁面的時(shí)候，按 Ctrl+F5，強(qiáng)制刷新所有css和js，一個(gè)從無到有的過程就全部完成啦：

好了，現(xiàn)在你已經(jīng)創(chuàng)建出一個(gè)頁面了，至于這個(gè)頁面到底要怎么寫，你其實(shí)就完全可以去復(fù)制/粘貼了，項(xiàng)目中有大量的示例，開始使用 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

?

轉(zhuǎn)載于:https://www.cnblogs.com/zhouyou96/p/7456881.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。