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 相关文章推荐
js和jquery批量绑定事件传参数一(新猪猪原创)
Jun 23 Javascript
javascript模拟的Ping效果代码 (Web Ping)
Mar 13 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
Vue.js系列之项目搭建(1)
Jan 03 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 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 缓存实现代码及详细注释
2010/05/16 PHP
php strftime函数的详细用法
2018/06/21 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
javascript 节点遍历函数
2010/03/28 Javascript
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
Js 回车换行处理的办法及replace方法应用
2013/01/24 Javascript
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
AngularJS中的作用域实例分析
2018/05/16 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
javascript中可能用得到的全部的排序算法
2020/03/05 Javascript
vue 封装 Adminlte3组件的实现
2020/03/18 Javascript
vue路由权限校验功能的实现代码
2020/06/07 Javascript
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
纯HTML5+CSS3制作图片旋转
2016/01/12 HTML / CSS
大学生求职中的自我评价
2013/10/01 职场文书
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
军训 自我鉴定
2014/02/03 职场文书
食品销售计划书
2014/04/26 职场文书
经典演讲稿汇总
2014/05/19 职场文书
2014年师德承诺书
2014/05/23 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
优秀党员先进材料
2014/12/18 职场文书
应急管理工作总结2015
2015/05/04 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书
部门主管竞聘书
2015/09/15 职场文书
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技