前端UI框架《Angulr》入门

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

是一个以 Bootstrap 和 AngularJS 为基础,并使用了大量前端开源组件合成的一个前端UI框架,是非常棒的UI框架。

今天就来和大家讲讲怎么使用这个框架。在这之前,先放几张这个项目的截图,给大家欣赏一下。

前端UI框架《Angulr》入门_第1张图片

前端UI框架《Angulr》入门_第2张图片

前端UI框架《Angulr》入门_第3张图片前端UI框架《Angulr》入门_第4张图片

 

 好了,图片欣赏完了,我们来正式开始使用这个框架吧。

打开项目,会发现以下文件夹:

 

目录说明

  • 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 刷新,即可看到最新的效果。就像这样:

前端UI框架《Angulr》入门_第5张图片

我们可以看到,多出一个工单管理。然而,现在点击这个工单管理不起作用的,因为还没有 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 Managerkbd>h1>
3 div>
4 <div ui-view>
5     
6 div>

再创建页面 src/tpl/app_order_list.html,注意应使用 UTF-8 编码,内容如下:

<div>这是工单列表div>

此时,你就完成了页面的创建,访问页面的时候,按 Ctrl+F5,强制刷新所有css和js,一个从无到有的过程就全部完成啦:

前端UI框架《Angulr》入门_第6张图片

好了,现在你已经创建出一个页面了,至于这个页面到底要怎么写,你其实就完全可以去复制/粘贴了,项目中有大量的示例,开始使用 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

 

你可能感兴趣的:(前端UI框架《Angulr》入门)