Hello大家好，继前两篇文章中我们了解了什么是AngularJS以及AngularJS的表单验证，今天源码时代H5学科讲师跟大家再来谈谈AngularJS的单页面前端路由及其用法。
现在越来越多的网站都用到了前端路由，那它和多页面跳转及传统开发有什么区别呢，我们为什么要用单页面路由呢？
在传统开发中，我们点击一个链接跳转到一个新的页面，这个跳转地址相当于一个二级地址。而路由的跳转并不是跳转到一个新的页面，而是在当前的页面进行跳转，相当于是在一个页面内跳转，使得前端页面体验更流畅。所有的交互和展现在一个页面运行以达到减少服务器请求，提高客户体验的目的。
接下来我们从一个简单的单页面跳转来看看单页面应用倒地怎么用。
首先我们得加载angular的主文件：
< src="https://cdn.bootcss.com/angular.js/1.3.19/angular.min.js"></>
其次我们要加载angular的对应版本的路由插件：
< src="https://cdn.bootcss.com/angular.js/1.3.19/angular-route.js"></>
注意：对应版本（！）
申明根元素：
<html ng-app="myApp">
接下来在项目中引入路由这个插件：
<!-- 插件引入 -->
< type="text/java">
var route = angular.module('myApp',['ngRoute']);
route.controller('mytest',['$scope',function($scope){
}]);
</>
另外确定路由区域：
其中'ng-view'这个指令是和'ngRoute'相互呼应的，只有引入了路由这个插件，'ng-view'这个指令才会生效。他实际的功效相当于圈（div）了一块儿地出来，作为路由结果的展示。即路由只控制这块地上倒地展示哪一个文件（div）中的内容。
接下来就来完成类似于这样的功能
在body中准备路由导航项
这里我们简单列出了三个导航项，跳转地址分别是’#1’,’#2’,’#3’，对应首页、商城和列表。当然你还可以列出更多。此处需要注意的是前面的‘#’不能忽略。
对应路由设置为：
var route = angular.module('myApp',['ngRoute']);
route.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/1',{
template:'<h1>我的首页</h1>'
})
.when('/2',{
template:'<h1>我的商城</h1>'
})
.when('/3',{
template:'<h1>商城列表</h1>'
})
// 初始化默认路径
.otherwise({
redirectTo:'/1'
});
}]);
其中的‘template’可由‘templateUrl’替代，条件是当我们跳转的内容不是本文中所用的一个简单的h1标签，而是一个复杂的页面或区块。
看看效果图：
你们可能发现，当用户进入网页时，显示区域并没有内容呈现，故我们下面给网页一个默认路由的操作。
// 初始化默认路径
.otherwise({
redirectTo:'/1'
});
这样用户进入页面时，即默认页面即我们的路径为‘1’的首页。界面如下：
至此，一个基本的路由就已经搭建好了。
附源码如下：
本文章由源码时代H5前端学科讲师原创!
转载须注明出处!感谢大家的配合!
现在越来越多的网站都用到了前端路由，那它和多页面跳转及传统开发有什么区别呢，我们为什么要用单页面路由呢？
在传统开发中，我们点击一个链接跳转到一个新的页面，这个跳转地址相当于一个二级地址。而路由的跳转并不是跳转到一个新的页面，而是在当前的页面进行跳转，相当于是在一个页面内跳转，使得前端页面体验更流畅。所有的交互和展现在一个页面运行以达到减少服务器请求，提高客户体验的目的。
接下来我们从一个简单的单页面跳转来看看单页面应用倒地怎么用。
首先我们得加载angular的主文件：
< src="https://cdn.bootcss.com/angular.js/1.3.19/angular.min.js"></>
其次我们要加载angular的对应版本的路由插件：
< src="https://cdn.bootcss.com/angular.js/1.3.19/angular-route.js"></>
注意：对应版本（！）
申明根元素：
<html ng-app="myApp">
接下来在项目中引入路由这个插件：
<!-- 插件引入 -->
< type="text/java">
var route = angular.module('myApp',['ngRoute']);
route.controller('mytest',['$scope',function($scope){
}]);
</>
另外确定路由区域：
其中'ng-view'这个指令是和'ngRoute'相互呼应的，只有引入了路由这个插件，'ng-view'这个指令才会生效。他实际的功效相当于圈（div）了一块儿地出来，作为路由结果的展示。即路由只控制这块地上倒地展示哪一个文件（div）中的内容。
接下来就来完成类似于这样的功能
在body中准备路由导航项
这里我们简单列出了三个导航项，跳转地址分别是’#1’,’#2’,’#3’，对应首页、商城和列表。当然你还可以列出更多。此处需要注意的是前面的‘#’不能忽略。
对应路由设置为：
var route = angular.module('myApp',['ngRoute']);
route.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/1',{
template:'<h1>我的首页</h1>'
})
.when('/2',{
template:'<h1>我的商城</h1>'
})
.when('/3',{
template:'<h1>商城列表</h1>'
})
// 初始化默认路径
.otherwise({
redirectTo:'/1'
});
}]);
其中的‘template’可由‘templateUrl’替代，条件是当我们跳转的内容不是本文中所用的一个简单的h1标签，而是一个复杂的页面或区块。
看看效果图：
你们可能发现，当用户进入网页时，显示区域并没有内容呈现，故我们下面给网页一个默认路由的操作。
// 初始化默认路径
.otherwise({
redirectTo:'/1'
});
这样用户进入页面时，即默认页面即我们的路径为‘1’的首页。界面如下：
至此，一个基本的路由就已经搭建好了。
附源码如下：
本文章由源码时代H5前端学科讲师原创!
转载须注明出处!感谢大家的配合!
