AngularJS 路由和模板实例及路由地址简化方法(必看)  更新时间:2016年06月24日 09:33:13   投稿:jingxian   下面小编就为大家带来一篇AngularJS 路由和模板实例及路由地址简化方法(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 最近一同事在学习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,代码及说明如下: 1 2 3 4 5 6 7 8 这是头部 9 10 11 12 13 14 这是底部15 16 17 18 19 20 运行实例,效果如下。 浏览器打开输入地址:http://localhost:2987/index.html#/detail和http://localhost:2987/index.html#/list分别可以看到如下图所示页面: 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 2 3 4 5 6 7 8 9 10 11 12 13 14 如上面代码显示,其中 的意思是,如果请求地址中包含list或detail(根据需求自己书写正则表达式),那么会被重定向到index.html页面,这样在页面上输入http://localhost:2987/detail的时候IIS会先返回模板页(index.html),然后AngulaJS路由才开始执行。 在浏览器输入http://localhost:2987/detail回车,发现并没有得到我们想要的结果,也就是说,路由没有匹配上。 网上查了很久,终于找到解决方案,就是在html页面中添加标签如下: 1 2 3 4 5 6 7 8 9 这是头部10 11 12 13 14 15 这是底部16 17 18 19 20 21 这样,在浏览器上输入:http://localhost:2987/detail回车就会看到我们想要的结果,截图如下: 遗留问题:为什么添加标签就能成功了呢?这个问题还要请教一下广大的博友们。 对于上述有内容,如有哪写得不对的,尽情吐槽!!! 以上就是小编为大家带来的AngularJS 路由和模板实例及路由地址简化方法(必看)全部内容了,希望大家多多支持脚本之家~ 您可能感兴趣的文章: C++中rapidjson组装继续简化的方法 Three.js利用dat.GUI如何简化试验流程详解 js创建数据共享接口——简化框架之间相互传值 用jQuery简化JavaScript开发分析 javascript简化代码 A=alert w=document.writeln javascript下with 的简化代码写法 javascript if 的简化代码 javascript表格控件:Chgrid,简化型 JavaScript代码简化技巧实例解析 angularjs 路由 模板 相关文章 AngularJS创建一个上传照片的指令实例代码 这篇文章主要介绍了AngularJS创建一个上传照片的指令实例代码,需要的朋友可以参考下 2018-02-02 AngularJS入门教程之数据绑定原理详解 这篇文章主要介绍了AngularJS数据绑定原理,较为详细的分析了AngularJS数据绑定的原理、使用技巧与相关注意事项,需要的朋友可以参考下 2016-11-11 Angularjs实现上传图片预览功能 本文通过实例代码给大家介绍了Angularjs实现上传图片预览功能,非常不错,具有参考借鉴价值,需要的朋友参考下吧 2017-09-09 简介AngularJS的视图功能应用 这篇文章主要介绍了AngularJS的视图功能应用,包括ng-view和ng-template以及$routeProvider的使用,以及 $routeProvider 需要的朋友可以参考下 2015-06-06 angularjs 实现带查找筛选功能的select下拉框实例 本篇文章主要介绍了angularjs 实现带查找筛选功能的select下拉框实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。 2017-01-01 如何用DevUI搭建自己的Angular组件库 DevUI 是一款面向企业中后台产品的开源前端解决方案,它倡导沉浸、灵活、至简的设计价值观,提倡设计者为真实的需求服务,为多数人的设计,拒绝哗众取宠、取悦眼球的设计。如果你正在开发 ToB 的工具类产品,DevUI 将是一个很不错的选择! 2021-05-05 angular.extend方法的具体使用 本篇文章主要介绍了angular.extend方法的具体使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-09-09 利用Angular7开发一个Radio组件的全过程 这篇文章主要给大家介绍了关于如何利用Angular7开发一个Radio组件的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Angular7具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧 2019-07-07 Angular.js中控制器之间的传值详解 angular中每个controller(控制器)都会有自己的$scope,通过为这个对象添加属性赋值,就可以将数据传递给模板进行渲染,每个$scope只会在自己控制器内起作用,而有时候需要用到其他控制器中的数据就要考虑到控制器之间参数的传递了,下面来看看详细的介绍。 2017-04-04 AngularJS实现根据变量改变动态加载模板的方法 这篇文章主要介绍了AngularJS实现根据变量改变动态加载模板的方法,结合实例形式简单分析了AngularJS动态加载模板的主要操作技巧与模板实现代码,需要的朋友可以参考下 2016-11-11 最新评论

最近一同事在学习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,代码及说明如下:

www.jb51.net

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分别可以看到如下图所示页面:

www.jb51.net www.jb51.net

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回车就会看到我们想要的结果,截图如下:

www.jb51.net

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

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

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

您可能感兴趣的文章:

  • C++中rapidjson组装继续简化的方法
  • Three.js利用dat.GUI如何简化试验流程详解
  • js创建数据共享接口——简化框架之间相互传值
  • 用jQuery简化JavaScript开发分析
  • javascript简化代码 A=alert w=document.writeln
  • javascript下with 的简化代码写法
  • javascript if 的简化代码
  • javascript表格控件:Chgrid,简化型
  • JavaScript代码简化技巧实例解析
张贴在3