AngularJS 路由和模板实例及路由地址简化方法(必看)


Posted in Javascript onJune 24, 2016

最近一同事在学习AngularJS,在路由与模板的学习过程中遇到了一些问题,于是今天给她写了个例子,顺便分享出来给那些正在学习AngularJS的小伙伴们。

话说这AngularJs 开发项目非常的爽,其中爽就爽在它的开发模式,使得代码更加的清晰、更加具有可读性、更简洁、更具有维护性。但是在使用AngularJS开发的过程中也有让我头疼的地方,那就是目前前端框架更多的还是以Jquery为主,很多插件都是依赖于Jquery的,AngulaJS的插件少之又少(除了AngularUI其他的Angular插件我就不知道了,如果哪位大神指导的话可以跟我分享一下)。为了保证Controller中代码清晰,不混乱,我们规定在Controller中不允许操作Dom,所以每次需要操作Dom元素的是我们都是指令去完成,因此就存在了,需要将很多Jquery插件转换成指令去操作,这是一件非常恶心的事情。好像扯远了,好吧~~

目录:

1.AngularJs路由介绍

2.AngularJS路由实例

3.AngularJS采用HTML5模式的路由结合WebServer重定向简化路由地址

1.AngularJS路由介绍

AngularJS路由与后端MVC的路由不一样。AngularJS的前端路由,需要在模板页提前对指定的(ng-app),定义路由规则(routeProvider),然后通过不同的URL,告诉(ng-app)加载哪个页面(HTML),再渲染到(ng-app)视图(ng-view)中。而MVC路由是通过不同的Url请求,然后根据路由规则请求控制器的Action,并返回View。AngularJS是一个纯前端的路由。后面我们会结合配置文件简化路由地址。

2.AngularJS路由实例

我们新建一个JS文件,此处我命名为app.js,在文件中我们写入如下代码:

1 angular.module("app", [ 2 'ngRoute' 3 ]) 4 .config(['$routeProvider', function ($routeProvider) { 5 $routeProvider.when("/list", { 6 template: "这是列表页" 7 }).when("/detail", { 8 template: "这是详情页" 9 })10 .otherwise({11 redirectTo: "/list"12 })13 }])

我们新建一个html文件命名为index.html,代码及说明如下:

AngularJS 路由和模板实例及路由地址简化方法(必看)

1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml" ng-app="app"> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <header> 8 <h2>这是头部</h2> 9 </header>10 <content>11 <div ng-view></div>12 </content>13 <footer>14 <h3>这是底部</h3>15 </footer>16 </body>17 </html>18 <script src="/scripts/angular/angular.min.js"></script>19 <script src="/scripts/angular-route/angular-route.min.js"></script>20 <script src="/scripts/app.js"></script>

运行实例,效果如下。

浏览器打开输入地址:http://localhost:2987/index.html#/detail和http://localhost:2987/index.html#/list分别可以看到如下图所示页面:

AngularJS 路由和模板实例及路由地址简化方法(必看)AngularJS 路由和模板实例及路由地址简化方法(必看)

3.AngularJS采用HTML5模式的路由结合WebServer简化路由地址

上图中我们可以看到,请求地址很长,对于有强迫症的我来说,很难接受这种类型的地址,于是我决定作出这样的改变:

1)AngulaJS开启HTML5模式路由,去掉#号:

对于ANgulaJS来说,其默认是没有打开Html5路由模式,我们通过如下做法开启HTML5路由模式:

1 angular.module("app", [ 2 'ngRoute' 3 ]) 4 .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { 5 //开启html5路由模式 6 $locationProvider.html5Mode(true) 7 $routeProvider.when("/list", { 8 template: "这是列表页" 9 }).when("/detail", {10 template: "这是详情页"11 })12 .otherwise({13 redirectTo: "/404.html"14 })15 }])

 这样按照上面的请求地址去掉#号后刷新页面,发现提示404找不到页面,原因是这样的地址请求到后台IIS会找不到对应的文件,因此直接返回404错误页面。因此我们需要在配置文件中添加WebServer配置,重定向文件如下:

1 <system.webServer> 2 <rewrite> 3 <rules> 4 <rule name="name" > 5 <match url="^list|detail*" ignoreCase="true"/> 6 <conditions logicalGrouping="MatchAll"> 7 <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/> 8 <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true"/> 9 </conditions>10 <action type="Rewrite" url="/index.html"/>11 </rule>12 </rules>13 </rewrite>14 </system.webServer>

如上面代码显示,其中<match url="^list|detail*" ignoreCase="true"/> 的意思是,如果请求地址中包含list或detail(根据需求自己书写正则表达式),那么会被重定向到index.html页面,这样在页面上输入http://localhost:2987/detail的时候IIS会先返回模板页(index.html),然后AngulaJS路由才开始执行。

在浏览器输入http://localhost:2987/detail回车,发现并没有得到我们想要的结果,也就是说,路由没有匹配上。

网上查了很久,终于找到解决方案,就是在html页面中添加<base>标签如下:

1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml" ng-app="app"> 3 <head> 4 <title></title> 5 <base href="/" /> 6 </head> 7 <body> 8 <header> 9 <h2>这是头部</h2>10 </header>11 <content>12 <div ng-view></div>13 </content>14 <footer>15 <h3>这是底部</h3>16 </footer>17 </body>18 </html>19 <script src="/scripts/angular/angular.min.js"></script>20 <script src="/scripts/angular-route/angular-route.min.js"></script>21 <script src="/scripts/app.js"></script>

这样,在浏览器上输入:http://localhost:2987/detail回车就会看到我们想要的结果,截图如下:

AngularJS 路由和模板实例及路由地址简化方法(必看)

遗留问题:为什么添加<base href="/" />标签就能成功了呢?这个问题还要请教一下广大的博友们。

对于上述有内容,如有哪写得不对的,尽情吐槽!!!

以上就是小编为大家带来的AngularJS 路由和模板实例及路由地址简化方法(必看)全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 Javascript
javascript encodeURI和encodeURIComponent的比较
Apr 03 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
Egret引擎开发指南之发布项目
Sep 03 Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 Javascript
angular+webpack2实战例子
May 23 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 17 Javascript
Webpack 之 babel-loader文件预处理器详解
Mar 23 Javascript
Vue 源码分析之 Observer实现过程
Mar 29 Javascript
详解Vue依赖收集引发的问题
Apr 22 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
老生常谈 关于JavaScript的类的继承
Jun 24 #Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 #Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 #Javascript
正则表达式(语法篇推荐)
Jun 24 #Javascript
javascript弹出窗口中增加确定取消按钮
Jun 24 #Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 #Javascript
JQuery DIV 动态隐藏和显示的方法
Jun 23 #Javascript
You might like
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
使用IE6看老赵的博客 jQuery初探
2010/01/17 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
Bootstrap进度条学习使用
2017/02/09 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
python 运算符 供重载参考
2009/06/11 Python
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
Django自定义过滤器定义与用法示例
2018/03/22 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
Python 使用type来定义类的实现
2019/11/19 Python
Python中无限循环需要什么条件
2020/05/27 Python
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
大四学生思想汇报
2014/01/13 职场文书
审计主管岗位职责
2014/01/31 职场文书
创业计划书如何编写
2014/02/06 职场文书
人力资源本科毕业生求职信
2014/06/04 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
小学教师教育随笔
2015/08/14 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers
golang 实现时间戳和时间的转化
2021/05/07 Golang
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫