AngularJS前端UI框架《Angulr》入门

Angulr 项目的称号为 Angulr,对!没错!就是少个 a,少个 a
就是它是的拼写。

是一个以 Bootstrap 和 AngularJS
为底蕴,并采取了大量前端开源组件合成的一个前端UI框架,是甚深的UI框架。

今日尽管来与大家提出口怎么使这框架。在及时之前,先放大几布置是路之截图,给大家观赏一下。

AngularJS 1

AngularJS 2

AngularJS 3AngularJS 4

 

 好了,图片欣赏了了,我们来规范启幕运用是框架吧。

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

AngularJS 5 

目说明

  • 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             工单管理
5         </a>
6 </li>

小心,这里的
ui-sref=”app.order.list” 是一个模块,目前,我们尚无编制这模块的,所以点击是菜单不会见有反馈。

除此以外,你转移好后,再刷新页面,并无会见见到是菜单,是盖缓存。如何去这个缓存呢?办法是利用浏览器直接看
src\tpl\blocks\nav.html 这个页面,然后在浏览器上仍
Ctrl+F5 强制刷新 nav.html 这个页面,最后,再回去正常页面按
F5 刷新,即可见到最新的效力。就如这样:

AngularJS 6

我们可以看,多生一个工单管理。然而,现在点击是工单管理不起作用的,因为还无
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,一个由管至有经过就全好啦:

AngularJS 7

哼了,现在公曾经创造有一个页面了,至于这个页面到底要怎么形容,你其实就算全好去复制/粘贴了,项目遭到起恢宏底演示,开始使用
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

 

相关文章