前端UI框架《Angulr》入门

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

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

我们可以看到，多出一个工单管理。然而，现在点击这个工单管理不起作用的，因为还没有 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，一个从无到有的过程就全部完成啦：

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

转载于:https://www.cnblogs.com/zhouyou96/p/7456881.html

前端UI框架《Angulr》入门相关推荐

后端程序员转行前端，强烈推荐这6个前端UI框架，第二款小程序UI框架颜值最高！...
昨天有个同事问我有没有可以直接上手的前端UI框架. 那今天就给大家推荐6个简单.视觉体验好的前端框架没吃过猪肉,肯定见过猪跑! Jquery Mobile demo地址: https://demos ...
oracle 前端ui框架,Layui(前端UI框架) 2.6.4 官方最新版
Layui最好用的前端ui框架是一款带着浓烈情怀的国产前端UI框架,她追求极简,又不失丰盈的内在,说她是史上最轻量的结晶,似乎并不为过.一切都源自于她对原生态的执着,对前端社区的那些噪杂声音的过滤,以 ...
element ui点击按钮弹出款_前端猿应该知道的十大最流行的前端UI框架
在前端项目开发过程中,现在很少有人会使用原生的CSS来搭建页面,总归都会引入一些前端UI框架以减少代码的书写.一般为了方便自己的使用,很多大公司都有自己的一套UI框架,同时也会把其开源出来.下面就是最 ...
前端ui框架_跨屏建站发布同名响应式前端ui框架
跨屏建站发布同名响应式前端ui框架,它是跨屏建站关于前端页面构建上的积累的结晶,现已开源,我们将持续的用开源的方式做好ui框架产品,用心做好建站产品. 关于跨屏UI框架是基于Bootstrap的扩展 ...
element ui 多个子组件_vue前端UI框架，一点都不圆润，盘它！
面对众多vue前端UI框架,看着它们干干巴巴.麻麻赖赖的样子,一点都不圆润,跟我一起盘它! Vue移动端UI框架 1.Vux(star:15620) VUX(读音 [v'ju:z],同 views)是 ...
2014年最受欢迎WEB前端UI框架
2014年已经过了一半,WEB前端受到更多人的观注,WEB前端也已经逐渐成为一种职业头衔! 相应的WEB前端UI框架更是受到新人追捧,下边为大家列出目前最受欢迎.最优秀的前端框架以供大家选择一款适合自 ...
原有ui项目调用qml_从0开始写前端UI框架：概述
# 缘起经常听说:不要重复造轮子,我深同此看法.如果在项目开发阶段,你还在研究和仿造现成的轮子,那项目的交付期将会是遥遥无期,能不能造出轮子不说,就算是造出的轮子,功能别人已经实现过了的功能,你的 ...
antvue 有赞布局_UI大全：前端UI框架集合（持续更新，当前32个）
2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semanti ...
2018年流行的vue前端UI框架
2018年九个很受欢迎的vue前端UI框架作者: 祈澈菇凉原文: https://blog.csdn.net/qq_36538012/article/details/82152052 最近在逛各大 ...

前端UI框架《Angulr》入门

前端UI框架《Angulr》入门相关推荐

最新文章

热门文章