前端UI框架《Angulr》入门

Angulr 项目的名目为 Angulr,对!没有错!即是少个 a,少个 a
正是它科学的拼写。

是一个以 Bootstrap 和 AngularJS
为根基,并使用了大气前端开源组件合成的2个前端UI框架,是不行棒的UI框架。

后天就来和我们讲讲怎么使用那个框架。在那前边,先放几张这些类型的截图,给大家欣赏一下。

图片 1

图片 2

图片 3图片 4

 

 好了,图片欣赏完了,大家来标准初步使用这么些框架吧。

展开项目,会发觉以下文件夹:

图片 5 

目录表达

  • 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伍 刷新,就能够看到最新的功能。如同这么:

图片 6

大家能够见见,多出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个从无到有的经过就全部成就啦:

图片 7

好了,未来你早就创设出八个页面了,至于那几个页面到底要怎么写,你实际就完全能够去复制/粘贴了,项目中有大气的言传身教,初叶运用
Angulr 吧。

 

最终,提供 Angulr 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

 

相关文章