AngularJS爬坑之路——路由关于路由的那点事儿
AngularJS爬坑之路——路由关于路由的那点事儿
关于路由的那点事儿
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指令进行视图模板的接收和显示
<a href="#!/index">首页</a>
<a href="#!/login">登录</a>
<a href="#!/regist">注册</a>
<ng-view></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
------
<header>
<a ui-sref="index">首页</a>
<a ui-sref="article">文章</a>
</header>
<section>
<ui-view></ui-view>
</section>main.html
-----
<header>
<a ui-sref=".home">个人中心</a>
<a ui-sref=".userinfo">用户资料</a>
</header>
<section>
<ui-view></ui-view>
</section>article.html
-----
<header>
<a ui-sref=".edit">编辑文章</a>
</header>
<section>
<ui-view></ui-view>
</section>以上路由代码仅供参考，后续会陆续更新！