angularjsl路由_angularjs-router

AngularJS路由

1.什么是路由

1.AngularJS 路由允许我们通过不同的 URL 访问不同的内容。

2.可实现多视图的单页web应用

举例

http://localhost:8080/angular-route/index.html#/header

http://localhost:8080/angular-route/index.html#/content

http://localhost:8080/angular-route/index.html#/footer

当我们点击以上任一一个链接时，向服务器请求的地址都是 http://192.168.1.109:8000/angular-program/src/main.html， 而＃号之后的内容在向服务器端请求时会被浏览器忽略掉，所以我们在客户端实现＃号后面的功能实现即可。简单来说，路由通过＃＋标记帮助我们区分不同逻辑页面，并将其绑定到对应的控制器上。，而＃号之后的内容在向服务器端请求时会被浏览器忽略掉，所以我们在客户端实现＃号后面的功能实现即可。简单来说，路由通过＃＋标记帮助我们区分不同逻辑页面，并将其绑定到对应的控制器上。

2.常用的angularJS路由(ng-Route、ui-router)

ng-Route

1.引入文件和依赖

ngRoute模块包含在一个单独的文件中，所以需要在页面引入这个文件

https://cdn.bootcss.com/angular.js/1.6.1/angular.min.js

https://cdn.bootcss.com/angular.js/1.6.1/angular-route.min.js

在模块声明中注入对ngRoute的依赖，如下：

var app = angular.module('MyApp', ['ngRoute']);

2.定义路由表

$routeProvider提供了定义路由表的服务，它有两个核心方法，when(path,route)和otherwise(params)，先看一下核心中的核心when(path,route)方法。

path是一个string类型，表示该条路由规则所匹配的路径

route参数是一个object，用来指定当path匹配后所需的一系列配置项，包括以下内容：

template:string, //在ng-view中插入简单的html内容

templateUrl:string, //在ng-view中插入html模版文件

controller:string,function / array, //在当前模版上执行的controller函数

controllerAs:string, //为controller指定别名

redirectTo:string,function, //重定向的地址

resolve:object //指定当前controller所依赖的其他模块

controllerAs:

$scope是基于原型进行继承的，比如说当我们查找一个user对象时，angular会先查找当前$scope有没有user，如果没有的话就继续往上层$scope查找，直至$rootScope。

function ParentCtrl($scope) {

$scope.name = 'asdf';

$scope.age = 25;

}

function ChildCtrl($scope) {

$scope.age = 26;

}

name:{{name}},age:{{age}}

child name:{{name}},age:{{age}}

这就是继承关系，通过这种方式来访问一些变量很不可靠，或者说并不直观。所以，才有 controller as。

resolve属性里的值会在路由成功前被预先设定好，然后注入到控制器中。通俗地将，就是等数据都“就位”后，才进行路由

3.在主视图模板中指定加载子视图的位置

单页面程序都是局部刷新的，那这个“局部”是ngView,只需在模板中简单的使用此指令,在哪里用，哪里就是“局部”

ui-router

1.多视图，页面可以显示多个动态变化的不同区块

views:{

'header':{template:"

头部内容

"},

'nav':{template:"

菜单内容

"},

'body':{template:"

展示内容

"}

}

2.多视图，页面某个动态变化区块中，嵌套着另一个可以动态变化的区块

.state("parent", {//父路由

url: '/parent',

template:'

parent'

+'

'// 子View

+'

'

})

.state("parent.child", {//子路由

url: '/child',

template:'

child

'

})

3.绝对路径

views:{

'index':{template:"

//这里必须要绝对定位

'header@index':{template:"

头部内容header

"}, //表示名为header的view属于index模板

'nav@index':{template:"

菜单内容nav

"},

'body@index':{template:"

展示内容contents

"}

}

4.路由与控制器间参数传递

controller: function ($state) {

console.log($state.current.data.customData1) // 输出 5;

console.log($state.current.data.customData2) // 输出 "blue";

},

data: {

customData1: 5,

customData2: "blue"

}

5.路由间传递参数

show index

show test

controller:function($stateParams){

alert($stateParams.id)

}

controller:function($stateParams){

alert($stateParams.username)

}

3.总结

$route —> $state

$routeParams —> $stateParams

$routeProvider —> $stateProvider

(ui-router)应用程序内的一个区域 ： (ng-route)应用程序中的 url

(ui-router)可以嵌套的层次结构 ： (ng-route)只是平面层次结构

(ui-router)名称可以自定义 ： (ng-route)名称只能是 url

(ui-router)通过名称或 url 导航 ： (ng-route)只能通过 url 导航

(ui-router)可以存在多个视图(ui-view) ： (ng-route)只能单一视图(ng-view)

(ui-router)可以填充任何视图 ： (ng-route)只能填充一个视图

ui.router 是基于 state(状态)的， ngRoute 是基于 url 的，ui.router模块 具有更强大的功能，主要体现在视图的嵌套方面。