澳门在线威尼斯官方 > 威尼斯澳门在线 > AngularJs前端结构

原标题:AngularJs前端结构

浏览次数:86 时间:2019-12-12

练手项目简介

为了系统的学习“MEAN”技术栈,我虚构了一个小项目,先做一个介绍。

QuestionMaker,是一个用于生成调查问卷的系统,用户可以编辑试题(选择题、填空题),并可以实时预览编辑结果。然后还可以编辑一份试卷,为试卷添加试题,然后保存为一分完整的调查问卷。有点类似于调查派。先上一张截图吧:

图片 1

项目的功能主要是CRUD操作,所以非常适合angular的应用场景,双向绑定对于实现实时预览这样的功能简直是信手拈来。

项目的前后端是完全分离的,后端不渲染页面,只提供数据接口,前端使用ng的动态模板来渲染页面,通过ajax请求来获取所需数据。

项目我已经开源到github,有兴趣的同学可以查看:

问题三:paramr是做什么用的

params是路由之中页面的参数传递方式.

this.$router.push({

 path:"/detail",

 params:{

 name:'nameValue',

 code:10011

 }

});

腾讯视频链接:

PPT链接:

前端路由定义routes.js

本项目使用ui-router来做前端路由,这个目测也是现在最流行的做法。ui-router是一个第三方插件,由于ng内置的ngRouter功能较弱,无法实现嵌套路由和多视图路由,而ui-router引入了“状态”这个概念来控制视图,从而实现这些功能,所以ui-router成了最好的选择。它是angular-ui项目()中的一个模块,该项目还提供了很多基于ng的ui,像日期选择器什么的。ui-router貌似是最受欢迎的一个。

用ui-router可以实现嵌套路由和同一页面多视图,具体使用方法可以参考我博客中转载的几篇文章:

本项目中,由于整站无刷新,所以路径的层级会比较深,嵌套路由就派上了用场。在入口页面index.html中,用一个div来做父容器,加上ui-view属性,就可以在里面加载别的模板了。从试题列表到试题编辑页面的切换,就都在这个父容器中加载。

而在试题编辑页面,又有对应的题型编辑和试题预览视图,通过给ui-view赋予名字,就可以加载各自对应的模板,这里就是多视图的应用。代码片段如下:

JavaScript

<!--试题编辑视图--> <div ui-view="editArea"></div> <!--试题预览视图--> <div ui-view="previewArea"></div>

1
2
3
4
5
<!--试题编辑视图-->
<div ui-view="editArea"></div>
 
<!--试题预览视图-->
<div ui-view="previewArea"></div>

在试卷预览页面,我们也需要对试题进行展示,只需在页面上在定义一个ui-view,然后在路由中进行配置,就可以加载试题预览模版,很容易的实现了模板的复用。

页面中没有任何逻辑,只需在route.js中配置好路由规则,整站无刷新跳转就这么轻而易举的实现了。

问题一: 为什么ui-router可以嵌套路由而ng-router不能嵌套路由

服务合集services.js

接上面,所有和试题相关的服务端请求,我们可以封装成一个QuestionService,这个服务提供:提交试题、删除试题、更新试题等服务,这样层次就很清晰了。

所以,在services.js中,我们定义所有和服务相关的东西,在本项目中,我们的服务全都是ajax请求,可以用ng提供的$http服务来很方便的完成。事实上service中并不是必须写ajax请求,凡是可以抽象理解为“公共服务”的东西,都可以定义在这里,可以被其他模块随意调用。

6.更多讨论

为什么推荐用ui-router替代ngRoute

ngRoute在路由配置时用$routeProvider。

ui-router路由配置时用 $stateProvider 和$urlRouterProvider。

ngRoute是官方路由。

ui-route是第三方路由。

ngroute是用AngularJS框架的核心部分。

ui-router是一个社区库,它是用来提高完善ngroute路由功能的。

ui-router允许嵌套视图(nested views)和多个命名视图(multiple named views)。

总结

这个小项目的前端结构就是这个样子啦。从上面我们可以看出,用ng来做前端的架构还是很有条理的。controller、service、directive这些概念,本质上还是“模块”,所以我们可以以模块开发的方式来很爽快的写代码,文件与文件之间没有任何耦合和依赖。模块所需的依赖,我们通过ng的注入机制来给注入。所以在index.html中引入这些文件的时候,没有顺序要求,任意顺序引入皆可。

顺便说一句,前端代码的后处理,我已经用gulp写好了脚本,用npm安装所需的包后,执行gulp就可以编译生成dist目录。

本文只做angular前端架构入门级别的介绍,关于文中提到的一些具体技术细节,可以查看我写的angular系列文章

这个示例项目我已开源到github(),目前已经实现了基本功能。后续我会扩展更多的功能,到时候也必然会涉及到更多的技术问题,angular进行前端架构的路才刚刚开始。

1 赞 1 收藏 1 评论

图片 2

2.知识剖析

ngRoute是一个AngularJS的模块。其不是在AngularJS的核心库当中。

            在使用ngRoute的时候,实际上,我们是在应用的主模块中引入ngRoute模块并添加$routeProvider服务到主模块的config方法中来达到我们的目标。这与其他一些库的使用方式是类似的,如ng-grid。

            在ngRoute中,主要有$route、$routeProvider、$routeParams三个服务项目。

            $routeProvider用于在主应用主模块的配置方法中。$route与$routeParams一般常见于控制器中。

服务$routeProvider用来定义一个路由表,即地址栏与视图模板的映射

服务$routeParams保存了地址栏中的参数

服务$location用来实现用于获取当前url以及改变当前的url,并且存入历史记录

服务$route完成路由匹配,并且提供路由相关的属性访问及事件,如访问当前路由对应的controller

指令ngView用来在主视图中指定加载子视图的区域

angular路由可以实现多视图的单页Web应用。 当请求一个url时,根据路由配置匹配这个url,然后请求模板片段,并插入到ng-view中去。这种做法使网页局部刷新,减少了切换网页时带来的突兀感, 也减少了项目的代码量。

用“MEAN”技术栈开发web应用(一)AngularJs前端架构

2015/09/09 · CSS, HTML5, JavaScript · 1 评论 · MEAN

原文出处: 吕大豹   

答:因为ng-router没有明确的父子层级关系,ui-router明确了这一点

控制器合集controllers.js

controller.js里面是所有的controller定义,由于这个项目比较小,而且反正最后都要合并,所以就都放在一个文件里了,这样可以使用链式写法app.controller(‘a’, …).controller(‘b’, …), 一口气将所有的controller都定义好。如果项目比较大,controller多,可以把controllers建为一个文件夹,然后在里面放各个controller。

controller里面就是跟业务相关的一些代码了,如试题数据的初始化,添加答案、删除选项等操作。

但是当我们需要发起ajax请求的时候,如保存试题,就不宜在controller里面直接写了,这样会造成逻辑混杂代码混乱。所有需要请求服务端的操作,我们可以抽象为一个个服务,进行“分层”,通过ng提供的service机制来做调用。

鸣谢

感谢大家观看

BY :  李仁 | 吴昊杰

angular路由

小课堂

        分享人: 吴昊杰

首页index.html

这是项目的入口页面,其实就是一个大容器,在这里加载所有的js和css文件,然后提供一个视图容器就够了,因为从这个页面以后,我们页面就不再会有跳转,全部是通过前端路由来做局部刷新,首页的代码非常精简:

JavaScript

<!doctype html> <html ng-app="QMaker"> <head> <meta charset="utf-8"> <title>Question Maker</title> <link rel="stylesheet" href="/src/lib/bootstrap-3.3.5/css/bootstrap.min.css"> <script src="/src/lib/jquery-1.9.1.min.js"></script> <script src="/src/lib/angular-1.4.1.min.js"></script> <script src="/src/lib/angular-ui-router.min.js"></script> <link rel="stylesheet" href="/src/css/base.css"> <!--{main}--> <script src="/src/js/app.js"></script> <script src="/src/js/controllers.js"></script> <script src="/src/js/directives.js"></script> <script src="/src/js/filters.js"></script> <script src="/src/js/routes.js"></script> <script src="/src/js/services.js"></script> <!--{endmain}--> </head> <body> <div class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a href="#/" class="navbar-brand">Question Maker</a> </div> </div> </div> <div class="maincontent container-fluid" ui-view> </div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!doctype html>
<html ng-app="QMaker">
<head>
    <meta charset="utf-8">
    <title>Question Maker</title>
    <link rel="stylesheet" href="/src/lib/bootstrap-3.3.5/css/bootstrap.min.css">
    <script src="/src/lib/jquery-1.9.1.min.js"></script>
    <script src="/src/lib/angular-1.4.1.min.js"></script>
    <script src="/src/lib/angular-ui-router.min.js"></script>
 
    <link rel="stylesheet" href="/src/css/base.css">
    <!--{main}-->
    <script src="/src/js/app.js"></script>
    <script src="/src/js/controllers.js"></script>
    <script src="/src/js/directives.js"></script>
    <script src="/src/js/filters.js"></script>
    <script src="/src/js/routes.js"></script>
    <script src="/src/js/services.js"></script>
    <!--{endmain}-->
</head>
 
<body>
    <div class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="#/" class="navbar-brand">Question Maker</a>
            </div>
        </div>
    </div>
    <div class="maincontent container-fluid" ui-view>
 
    </div>
</body>
 
</html>

ngRoute实现原理

我们知道,设置

<ahref="#div1">div1</a>

            <ahref="#div2">div2</a>

            <ahref="#div3">div3</a>

        <divid="div1">我是div1</div>

            <divid="div2">我是div2</div>

            <divid="div3">我是div3</div>

这样的锚点,a链接会在同一页面中跳转。ngRoute利用了这一特性将锚点出的文件设置为模板,在锚点被链接时,监听到url的变化,加载相应的模板文件。

过滤器合集filters.js

我们的项目使用ng提供的动态模板,服务端不渲染页面,只提供数据接口。有些数据我们需要进行格式化后进行输出,这就用到filter了,所有的filter都放在这里。filter的定义和使用的非常简单,此不不多述了。

5.参考文献

菜鸟教程

AngularJS路由二三事(一):ngRoute

ngRoute 模块_AngularJS中文网

本文由澳门在线威尼斯官方发布于威尼斯澳门在线,转载请注明出处:AngularJs前端结构

关键词:

上一篇:没有了

下一篇:没有了