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 这个文件,这个文件就是设置菜单的,添加以下代码:

 <li ui-sref-active="active">
<a ui-sref="app.order.list">
<i class="glyphicon glyphicon-list-alt icon text-info"></i>
<span class="font-bold">工单管理</span>
</a>
</li>

注意,这里的 ui-sref="app.order.list" 是一个模块,目前,我们还没有编写这个模块的,所以点击这个菜单不会有反应。

另外,你改好之后,再刷新页面,并不会看到这个菜单,是因为缓存。如何去除这个缓存呢?办法是使用浏览器直接访问 src\tpl\blocks\nav.html 这个页面,然后在浏览器上按 Ctrl+F5 强制刷新 nav.html 这个页面,最后,再回到正常页面按 F5 刷新,即可看到最新的效果。就像这样:

我们可以看到,多出一个工单管理。然而,现在点击这个工单管理不起作用的,因为还没有 app.order.list 模块。现在我们来创建这个模块。

找到 src/js/config.router.js ,并在文件中添加以下代码(添加到什么位置,自己凭经验看着办):

 // order
.state('app.order', {
abstract: true,
url: '/order',
templateUrl: 'tpl/app_order.html'
})
.state('app.order.list', {
url: '/order/list',
templateUrl: 'tpl/app_order_list.html'
})

然后还要添加两个页面,创建页面 src/tpl/app_order.html ,注意应使用 UTF-8 编码,内容如下 :

 <div class="bg-light lter b-b wrapper-md">
<h1 class="m-n font-thin h3">工单管理 <kbd class="pull-right">Order Manager</kbd></h1>
</div>
<div ui-view>
<!-- 子模块的内容将会显示在 ui-view 里面 -->
</div>

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

<div>这是工单列表</div>

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

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

  1. layui经典模块化前端UI框架初识

    layui产生背景 layui相对于vue来说确实稍有逊色,但是官网提供的入门文档以及完善的框架结构,使的很多人开始用layui来开发前端页面,那么什么人会去使用layui呢? 针对后端开发人员,在对 ...

  2. 前端UI框架和JS类库

    一.前端框架库: 1.Zepto.js 地址:http://www.css88.com/doc/zeptojs/ 描述:Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jqu ...

  3. 2015年最全的移动WEB前端UI框架

    目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了.在移动WEB开发的过程中,使用合适的移动WEB UI框架可以大大提升我们的开发效率.下面P ...

  4. facebook开源前端UI框架React初探

    最近最火的前端UI框架非React莫属了.赶紧找时间了解一下. 项目地址:http://facebook.github.io/react/ 官方的介绍:A JavaScript library for ...

  5. 如何选择适合的前端UI框架

    根据近几年前端框架的热门,在前端开发框架不断更新与交换的时代,每一年都有黑马出现,是否适合自己开发的项目就不得而知了,只有认真的了解之后才能知道,这里主要给大家说一下如何选择适合旅游的前端UI框架?相 ...

  6. 前端UI框架小汇总

    前言: 近期,小弟根据GitHub.前端社区.掘金等平台对当前流行的前端UI框架的进行了小小的整理和汇总(ps:前端UI框架的应用是通过GitHub star数,社区热度和使用范围等进行的粗略的汇总[ ...

  7. web前端UI框架

    分类:WEB前端 时间:2016年1月13日 目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了.在移动WEB开发的过程中,使用合适的移动WE ...

  8. 前端UI框架选择区别对比推荐

    UI选择务必慎重,货比三家. 弱水三千只取一瓢:弱水三千只取一瓢,源起佛经中的一则故事,警醒人们在一生中可能会遇到很多美好的东西,但只要用心好好把握住其中的一样就足够了 老牌构建于jQuery框架之上 ...

  9. 推荐几个精致的web UI框架及常用前端UI框架

    1.Aliceui Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS 的更好方式. git ...

随机推荐

  1. pug模板引擎(原jade)

    前面的话 为什么要引入pug,pug有什么特别之处呢?有一些嵌套层次较深的页面,可能会出现巢状嵌套,如下图所示 在后期维护和修改时,一不小心少了一个尖括号,或者某个标签的开始和闭合没有对应上,就会导致 ...

  2. Java栈与堆 (转)

    1. 栈(stack)与堆(heap)都是Java用来在Ram中存放数据的地方.与C++不同,Java自动管理栈和堆,程序员不能直接地设置栈或堆. 2. 栈的优势是,存取速度比堆要快,仅次于直接位于C ...

  3. linux(centos)下安装PHP的PDO扩展

    PHP 数据对象PDO扩展为PHP访问数据库定义了一个轻量级的一致接口.PDO 提供了一个数据访问抽象层,这意味着,不管使用哪种数据库,都可以用相同的函数(方法)来查询和获取数据.最近在我们的建站和O ...

  4. Java IO(一):IO和File

    一.IO 大多数的应用程序都要与外部设备进行数据交换,最常见的外部设备包含磁盘和网络.IO就是指应用程序对这些设备的数据输入与输出,Java语言定义了许多类专门负责各种方式的输入.输出,这些类都被放在 ...

  5. 花了一年时间完成的 在线G代码编辑,加工系统 G-Code Editor V1.0

    G代码是数控程序中的加工指令.一般都称为G指令.可以直接用来驱动机床,各种控制系统.是一种数控行业标准.传统的G代码编写以及编辑无法在线编辑,也不能实时看到g代码编辑的最后加工路径已经不能直接对编辑的 ...

  6. 微信小程序开发-新闻列表之新闻列表绑定

    微信小程序开发-新闻列表之新闻列表绑定开发教程: 1.效果图预览 2.准备工作 在拿到效果图后不要先急着去写代码,而是要去分析一下页面的整体结构,用什么方式定位和布局.小程序里建议使用flex布局,因 ...

  7. 用gensim学习word2vec

    在word2vec原理篇中,我们对word2vec的两种模型CBOW和Skip-Gram,以及两种解法Hierarchical Softmax和Negative Sampling做了总结.这里我们就从 ...

  8. Unity3D 中材质球(Material)预制体打包成AB(AssetBundle)出现材质丢失问题的解决方案

    关于Unity3D中打AB(AssetBundle)资源包,默认是不连Shader一同打包进去的,所以得自行添加,添加方式比较简单,不需要往项目中添加Shader,只是点选一下就可以了,具体实现方式如 ...

  9. 如何将R包安装到自定义路径

    参考  设置环境变量R_LIBS将R包安装到自定义路径   实际上是可以解决问题的, #环境变量完成以后,启动(重启)R,运行 .libPaths() 加载R包时,发现路径仍然未变成自定义的. 那么参 ...

  10. Vmware虚拟机三种网络模式详解

    原文来自http://note.youdao.com/share/web/file.html?id=236896997b6ffbaa8e0d92eacd13abbf&type=note 我怕链 ...