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 相关文章推荐
用JQuery在网页中实现分隔条功能的代码
Aug 09 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
Dec 30 Javascript
js猜数字小游戏的简单实现代码
Jul 02 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
JavaScript数组去重的多种方法(四种)
Sep 19 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
小程序实现授权登陆的解决方案
Dec 02 Javascript
vue中渲染对象中属性时显示未定义的解决
Jul 31 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 Javascript
axios封装与传参示例详解
Oct 18 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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
php实现网站文件批量压缩下载功能
2015/10/28 PHP
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
关于文本限制字数的js代码
2007/04/02 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
2015/08/24 Javascript
快速学习JavaScript的6个思维技巧
2015/10/13 Javascript
在React框架中实现一些AngularJS中ng指令的例子
2016/03/06 Javascript
jQuery实现的右下角广告窗体跟随效果示例
2016/09/16 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
2017/04/17 jQuery
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
JS实现验证码倒计时的注册页面
2018/01/02 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
2018/08/06 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
Node.js的进程管理的深入理解
2019/01/09 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
Django中URLconf和include()的协同工作方法
2015/07/20 Python
python如何通过protobuf实现rpc
2016/03/06 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
毕业生实习证明
2014/09/19 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
财务务虚会发言材料
2014/10/20 职场文书
车队安全员岗位职责
2015/02/15 职场文书
男方婚前保证书
2015/02/28 职场文书
2015年酒店工作总结
2015/04/28 职场文书
早安问候语大全
2015/11/10 职场文书
聊聊golang中多个defer的执行顺序
2021/05/08 Golang