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 相关文章推荐
JavaScipt基本教程之前言
Jan 16 Javascript
javascript+xml技术实现分页浏览
Jul 27 Javascript
JavaScript使用技巧精萃[代码非常实用]
Nov 21 Javascript
js工具方法弹出蒙版
May 08 Javascript
Jquery解析json数据详解
Dec 26 Javascript
jQuery实现垂直半透明手风琴特效代码分享
Aug 21 Javascript
基于Javascript实现弹出页面效果
Jan 01 Javascript
JS中的==运算: [''] == false —&gt;true
Jul 24 Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 Javascript
JavaScript实现的拼图算法分析
Feb 13 Javascript
微信小程序实现聊天室
Aug 21 Javascript
vue keep-alive的简单总结
Jan 25 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
浅析php学习的路线图
2013/07/10 PHP
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
JSQL  一个 web DB 的封装
2010/05/05 Javascript
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
Javascript中For In语句用法实例
2015/05/14 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
Linux下编译安装MySQL-Python教程
2015/02/02 Python
Python中datetime常用时间处理方法
2015/06/15 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
python pycurl验证basic和digest认证的方法
2018/05/02 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
详解如何解决canvas图片getImageData,toDataURL跨域问题
2018/09/17 HTML / CSS
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
美国名牌太阳镜折扣网站:Eyedictive
2017/05/15 全球购物
应届生求职信范文
2014/06/30 职场文书
教师个人培训总结
2015/02/11 职场文书