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 路由和模板实例及路由地址简化方法的更多相关文章
- angular.js的路由和模板在asp.net mvc 中的使用
angular.js的路由和模板在asp.net mvc 中的使用 我们知道angular.js是基于mvc 的一款优秀js框架,它也有一套自己的路由机制,和asp.net mvc 路由不太一样.as ...
- AngularJS进阶(一)深入理解ANGULARUI路由_UI-ROUTER
深入理解ANGULARUI路由_UI-ROUTER 最近在用 ionic写个webapp 看到几个demo中路由有好几种,搞的有点晕,查下资料研究下,做个笔记,其中大部分为摘抄别人的,做个说明免得被人 ...
- angularjs路由监听，uirouter感知路由变化，解决uirouter路由监听不生效的问题
壹 ❀ 引 angularjs除了惊为天人的双向数据绑定外,路由也是出彩的一笔,通过路由配置,我们能在不发起页面跳转的情况下,对当前页内容进行整体更新,angularjs提供了ngRoute模块用于 ...
- angularjs 路由回退，返回到上一个路由
在现阶段比较流行的angularjs框架中:路由是一个比较重要的应用:angularjs的单页面是其强大功能之一: 所有的页面其实就只是在一个页面就实现的:angularjs通过对路由的控制来进行页面 ...
- AngularJS html5Mode与ASP.NET MVC路由
AngularJS html5Mode与ASP.NET MVC路由共存 前言 很久之前便听说AngularJS,非常酷,最近也比较火,我也在持续关注这个技术,只是没有认真投入学习.前不久公司找我们部门 ...
- AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI- ...
- 第七节：Vuejs路由交互及后台系统路由案例
一. 简介 1.路由的概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源.那么url地址和真实的资源之间就有一种对应的关系 ...
- ASP.NET Core的路由[5]：内联路由约束的检验
当某个请求能够被成功路由的前提是它满足某个Route对象设置的路由规则,具体来说,当前请求的URL不仅需要满足路由模板体现的路径模式,请求还需要满足Route对象的所有约束.路由系统采用IRouteC ...
- 从Angular2路由引发的前后端路由浅谈
笔者的学习进度比较慢,直到两年以前写的网站都还是以服务端为主导的,即网站的所有视图都由服务器视图模板来渲染,笔者使用的是 DotNet MVC,开发套路就是在Controller里面写Action,在 ...
随机推荐
- ReplayingDecoder 解码器：别以为我有多厉害，也只不过是使用了一下装饰器模式而已~
原文地址 一.设计模式为啥老是用不好? 想要写出更屌的代码,提高代码的健壮性和可扩展性,那么设计模式可谓是必学的技能. 关于学习设计模式,大家可能都觉得设计模式的概念太过于抽象,理解起来有点费劲:又或 ...
- Locust性能测试1--简介安装及基本使用
1. Locust简介 Locust是易于使用的分布式用户负载测试工具,旨在对网站(或其他系统)进行负载测试,并弄清一个系统可以处理多少个并发用户,Locust翻译过来是蝗虫的意思,在测试期间,意在一 ...
- 数据结构与算法系列2 线性表 使用java实现动态数组+ArrayList源码详解
数据结构与算法系列2 线性表 使用java实现动态数组+ArrayList源码详解 对数组有不了解的可以先看看我的另一篇文章,那篇文章对数组有很多详细的解析,而本篇文章则着重讲动态数组,另一篇文章链接 ...
- Idea创建maven加载过慢解决方法
添加标签:archetypeCataloginternal问题解决!
- 5000字 | 24张图带你彻底理解Java中的21种锁
本篇主要内容如下: 本篇文章已收纳到我的Java在线文档. Github 我的SpringCloud实战项目持续更新中 帮你总结好的锁: 序号 锁名称 应用 1 乐观锁 CAS 2 悲观锁 synch ...
- vue 中使用echarts
前言:在vue2.0中使用百度echarts有三种解决方案. 一.原始方法直接使用 这样每次都要获取图表dom元素 然后通过setOption渲染数据,最后在mounted中初始化.很麻烦. < ...
- android开发之java代码中如何获取到当前时间。详情代码带注释。
/** *获取当前时间 * @return */ public String getTime(){ Date date= new Date();//创建一个时间对象,获取到当前的时间 SimpleDa ...
- 【Webpack】NodeJS + Webpack
目的:想要通过npm命令按照我们的规则生成静态资源(webpack4以后还能做到很多性能优化的配置,我所知道的只有css.js分包,以达到资源快速加载快速呈现的效果). 一.安装webpack npm ...
- 浅谈备受开发者好评的.NET core敏捷开发工具，讲讲LEARUN工作流引擎
通俗来讲,所谓一个工作流管理系统,如果将其拆分出来一个个单讲话,大致可理解为由工作流引擎.工作流设计器.流程操作.工作流客户界面. 流程监控.表单设计器.与表单的集成以及与应用程序的集成等几个部分组成 ...
- pwnable.kr之flag
拿到文件,先运行一下,输出: I will malloc() and strcpy the flag there. take it. 用python查看文件是否有什么保护, Arch: amd64-- ...