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

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

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

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

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

赞 (0)

相关推荐

  • AngularJS监听路由变化的方法

    使用AngularJS时,当路由发生改变时,我们需要做某些处理,此时可以监听路由事件,常用的是$routeStartChange, $routeChangeSuccess.完整例子如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"

  • AngularJS路由实现页面跳转实例

    AngularJS是一个javascript框架,通过AngularJS这个类库可以实现目前比较流行的单页面应用,AngularJS还具有双向数据绑定的特点,更加适应页面动态内容. 所谓单页面应用就是在同一个页面动态加载不同的内容,而这里的"跳转"可以理解为是局部页面的跳转. AngularJS是通过改变location地址来实现加载不同的页面内容到指定位置,下面是一个简单应用AngularJS路由来实现页面"跳转"的实例: 使用app.config来定义不同的lo

  • 详解Angular4中路由Router类的跳转navigate

    最近一直在学习angular4,它确实比以前有了很大的变化和改进,好多地方也不是那么容易就能理解,好在官方的文档和例子是中文,对英文不太好的还是有很大帮助去学习. 官方地址:https://angular.cn/docs/ts/latest/api/router/index/Router-class.html 在学习的过程中路由(router)机制是离不开的,并且好多地方都要用到. 首先路由配置Route: import { NgModule } from '@angular/core'; im

  • 使用AngularJS对路由进行安全性处理的方法

     简介 自从出现以后,AngularJS已经被使用很长时间了. 它是一个用于开发单页应用(SPA)的javascript框架. 它有一些很好的特性,如双向绑定.指令等. 这篇文章主要介绍Angular路由安全性策略. 它是一个可用Angular开发实现的客户端安全性框架. 我已经对它进行了测试. 除了保证客户端路由安全性外,你也需要保证服务器端访问的安全性. 客户端安全性策略有助于减少对服务器进行额外的访问. 然而,如果一些人采用欺骗浏览器的手段访问服务器,那么服务器端安全性策略应当能够拒绝未授

  • angular.js之路由的选择方法

    在一个单页面中,我们可以添加多个模块,使得网页只在需要的时候加载这个模块.模块的切换大致上可以代替网页的切换,于是,我们便可以通过模块的切换实现网页的切换,这个切换是按需加载的. 乍一看非常普通的东西,但是仔细想想就可以发现,这种思想可以解决非常多的资源. 例如,假如有一个页面,需要显示1000种商品的信息,每个商品的表现形式各不相同(设他们有各自独立的css和js),那么一般来说,我们就需要准备1000张网页去加载这些信息.但是,使用这种模块化思想,我们就可以仅仅在后台设定1000个各不相同的

  • AngularJS监听路由的变化示例代码

    话不多说,我们下面直接来看实现的示例代码 [一]Angular 路由状态发生改变时可以通过' $stateChangeStart '.' $stateChangeSuccess '.' $stateChangeError '监听,通过注入'$location'实现状态的管理 代码示例如下: function run($ionicPlatform, $location, Service, $rootScope, $stateParams) { //路由监听事件 $rootScope.$on('$s

  • angular.js 路由及页面传参示例

    页面传参数方法:1.$rootScope.2.(url)/user/:name/:age. 页面转换方法:1.href="#/" rel="external nofollow" rel="external nofollow" rel="external nofollow" .2.$state.Go.3.$location.path.4.ui-sref (1)自带路由ngRoute <html> <head&g

  • AngularJS 路由详解和简单实例

    AngularJS 路由详解和简单实例

    AngularJS 路由 本章节我们将为大家介绍 AngularJS 路由. AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 通常我们的URL形式为 http://runoob.com/first/page,但在单页Web应用中 AngularJS 通过 # + 标记 实现,例如: http://runoob.com/#/first http://r

  • AngularJS中的路由使用及实现代码

    AngularJS中的路由使用及实现代码

    前  言 本章节将为大家介绍 AngularJS 路由.AngularJS 路由允许我们通过不同的 URL 访问不同的内容.通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 1.1 Angular JS路由基础知识讲解 在AngularJS中使用路由: 1. 导入路由文件:angular-route.js 2. 在主模块中注入"ngRoute". angular.module("app",[

  • Angularjs制作简单的路由功能demo

    从官网下载了最新版本的Angularjs 版本号:1.3.15 做一个简单的路由功能demo 首页:index.html <!DOCTYPE html > <html> <head> <meta charset="utf-8" /> <title>测试</title> <script src="./js/angular.min.js"></script> <scri

随机推荐