关于路由的那点事儿
1.什么是路由？
关于路由，首先想到的是生活中的路由器。
类似路由器，AngularJS中的路由其实也是一样的概念
路由器，是将一个IP地址和一台唯一的电脑关联起来，这样我们在访问某个IP地址时就会访问到这台具体的电脑，如访问：192.168.1.100->路由器->李白的电脑
路由，就是将URL地址和对应的视图页面【如html页面】绑定起来，这样我们就可以通过某个URL地址直接访问到一个具体的视图页面了，如：访问http://www.baidu.com->路由->百度服务器上的index.html页面。
2.AngularJS中有哪些路由？
AngularJS应用开发过程中，项目中主要会使用到ng路由/ui路由
ng路由是官方提供的路由，不过存在不能直接处理路由嵌套的问题
ui路由是第三方提供的路由，可以处理深层的路由嵌套，但是建议不要超过三层
2.1. ng路由
AngularJS中，官方提供了ng-route组件用来进行路由处理，主要有以下几个服务辅助处理路由功能
$routeProvider 路由提供者服务
$routeParams 路由跳转过程中的参数处理服务
$route 路由对象
在AngularJS中的配置使用方式也是非常简单，通过模块的config()函数直接配置即可。
var app = angular.module("myApp", ["ngRoute"]);
app.config(["$routeProvider", function($routeProvider) {
$routeProvider.when("/index", {
templateUrl:"component/index.html",
controller:function($scope) { // TODO /index模板控制器}
}).when("/login", {
templateUrl:"component/login.html",
controller:function($scope) {// TODO /login模板控制器}
}).when("/regist", {
templateUrl:"component/regist.html",
controller:function($scope) {// TODO /regist模板控制器}
}).otherwise("/index");
}]);
在HTML页面中，可以通过链接的形式进行访问，通过ng-view指令进行视图模板的接收和显示
首页
登录
注册
以上就是一个路由的简单配置，其中主要涉及到几个API的使用
- when(url, {option})：对用户访问的url路径进行{option}处理的函数
url：表示用户访问的url路径
{option}：表示url路径对应的视图模板
1） templateUrl：表示和用户访问路径对应的html页面路径
2） controller：用来控制templateUrl指向的页面的控制器
- otherwise(path)：用户访问路径不存在时默认跳转的路径
path：url路径，一般会指定when()函数中配置的一个路径作为默认路径
但是，需要注意
AngularJS官方提供的ng-route，不支持路由的直接嵌套，如果项目中有路由嵌套的需求的话，请尽量不要考虑使用官方的ng路由
2.2. ui路由
ui路由是第三方提供的路由处理组件，主要有以下的服务进行路由服务的处理
$stateProvider 路由状态管理服务
$stateParams 路由中的参数管理服务
$state 路由状态服务
$urlRouterProvider url地址路由管理服务
配置使用的过程中，主要通过config()函数进行路由状态的配置和管理
var app = angular.module("myApp", ["ui.router"]);
app.config(["$stateProvider", "$urlRouterProvider", function($stateProvider,$urlRouterProvider) {
$stateProvider
.state({
name:"main",
url:"/main",
templateUrl:"component/main.html"
})
.state({
name:"main.home",
url:"/home",
templateUrl:"component/home.html"
})
.state({
name:"main.userinfo",
url:"/person",
templateUrl:"component/person.html"
})
.state({
name:"article",
url:"/article",
templateUrl:"component/article.html"
})
.state({
name:"article.edit",
url:"/edit",
templateUrl:"component/edit.html"
})
}]);
以上是路由的简单配置，主要实现了如下的页面跳转结构
|- index.html
|---- main.html
|-------- home.html
|-------- userinfo.html
|---- article.html
|-------- edit.html
HTML页面中的处理也是比较简单
index.html
------
首页
文章
main.html
-----
个人中心
用户资料
article.html
-----
编辑文章
以上路由代码仅供参考，后续会陆续更新！