前端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>