Angulr 项目的名目为 Angulr,对!没有错!即是少个 a,少个 a
正是它科学的拼写。
是一个以 Bootstrap 和 AngularJS
为根基,并使用了大气前端开源组件合成的2个前端UI框架,是不行棒的UI框架。
后天就来和我们讲讲怎么使用那个框架。在那前边,先放几张这些类型的截图,给大家欣赏一下。
好了,图片欣赏完了,大家来标准初步使用这么些框架吧。
展开项目,会发觉以下文件夹:
目录表达
- grunt :营造配置文件 (这些文件夹里的事物可忽略,不用管它)
- html: 静态页面 (注:这仅仅是一群静态页面,没有使用 angularjs)
- lading: 官网 (那一个文件夹里的事物可忽略,不用管它)
- libs: 支持库
jquery,bootstrap,angular 等 - src: 首要风格、工匠风格、反转风格、音乐平台、扶助等,都在这么些文件夹里面
- swig: 前端swig源代码 (那几个文件夹里的事物可忽略,不用管它)
这般一看来,除了 libs 和
src,别的文件夹里的东西就不主要了,乃至能够去除都行。
什么样创设三个新页面?
入门的话,当然是要讲如何从无到部分3个进度了。举例大家明日要新构建一个 工单处理 的界面。
率先步,就是在导航栏上增多菜单项,找到 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 工单管理
5 </a>
6 </li>
留意,那里的
ui-sref=”app.order.list” 是三个模块,最近,大家还不曾编写制定那么些模块的,所以点击那么些菜单不会有反馈。
除此以外,你改好之后,再刷新页面,并不会面到那几个菜单,是因为缓存。如何去除那个缓存呢?办法是利用浏览器直接待上访问
src\tpl\blocks\nav.html 那几个页面,然后在浏览器上按
Ctrl+F伍 强制刷新 nav.html 那一个页面,最终,再回到符合规律页面按
F伍 刷新,就能够看到最新的功能。如同这么:
大家能够见见,多出3个工单管理。可是,现在点击这几个工单管理不起成效的,因为还尚无
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-八 编码,内容如下 :
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-八 编码,内容如下:
<div>这是工单列表</div>
那会儿,你就成功了页面包车型大巴成立,访问页面包车型大巴时候,按
Ctrl+F伍,强制刷新全体css和js,2个从无到有的经过就全部成就啦:
好了,未来你早就创设出八个页面了,至于那几个页面到底要怎么写,你实际就完全能够去复制/粘贴了,项目中有大气的言传身教,初叶运用
Angulr 吧。
最终,提供 Angulr 2.二 的汉化版给大家下载哦。