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 相关文章推荐
一个判断email合法性的函数[非正则]
Dec 09 Javascript
js几个验证函数代码
Mar 25 Javascript
Javascript跨域请求的4种解决方式
Mar 17 Javascript
jquery实现勾选复选框触发事件给input赋值
Feb 01 Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
分享19个JavaScript 有用的简写写法
Jul 07 Javascript
webpack 静态资源集中输出的方法示例
Nov 09 Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 Javascript
老生常谈 关于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
提升PHP性能的21种方法介绍
2013/06/25 PHP
解析PHP的session过期设置
2013/06/29 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
关于js类的定义
2011/06/28 Javascript
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
[15:39]教你分分钟做大人:龙骑士
2014/10/30 DOTA
详解supervisor使用教程
2017/11/21 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
缅甸网上购物:Shop.com.mm
2017/12/05 全球购物
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
信用社实习人员自我鉴定
2013/09/20 职场文书
留学推荐信范文
2014/05/10 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
商业计划书之服装
2019/09/09 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书
python之json文件转xml文件案例讲解
2021/08/07 Python
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers