文章目录
ng-router
ng-view的实现原理,是根据路由的切换,动态编译html模板——$compile(html)(scope)。
参考
AngularJS 路由
AngularJs ng-route路由详解
ng-router 快速搭建步骤
- 引入路由库
<script src="../public/js/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular-route.min.js"></script>
- ngRoute 模块作为主应用模块的依赖模块
var app = angular.module('routingDemoApp',['ngRoute'])
- 在html中添加占位符 —— 使用 ngView 指令
<div ng-view></div>
- 配置路由
angular.module('ngRouteExample', ['ngRoute'])
.controller('HomeController', function ($scope, $route) { $scope.$route = $route;})
.controller('AboutController', function ($scope, $route) { $scope.$route = $route;})
.config(function ($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'embedded.home.html',
controller: 'HomeController'
}).
when('/about', {
templateUrl: 'embedded.about.html',
controller: 'AboutController'
}).
otherwise({
redirectTo: '/home'
});
});
API 简单说明
一般主要通过两个方法:
when():配置路径和参数;
otherwise:配置其他的路径跳转,可以想成default。
when的第二个参数:
controller:对应路径的控制器函数,或者名称
controllerAs:给控制器起个别名
template:对应路径的页面模板,会出现在ng-view处,比如"<div>xxxx</div>"
templateUrl:对应模板的路径,比如"src/xxx.html"
resolve:这个参数着重说下,该属性会以键值对对象的形式,给路由相关的控制器绑定服务或者值。然后把执行的结果值或者对应的服务引用,注入到控制器中。如果resolve中是一个promise对象,那么会等它执行成功后,才注入到控制器中,此时控制器会等待resolve中的执行结果。
详细的例子,可以参考下面的样例。
redirectTo:重定向地址
reloadOnSearch:设置是否在只有地址改变时,才加载对应的模板;search和params改变都不会加载模板
caseInsensitiveMatch:路径区分大小写
ui-router
参考
ui-router 快速搭建步骤
- 引入路由库
<script src="../public/js/angular.min.js"></script>
<script src="../public/js/angular-ui-router.min.js"></script>
- ngRoute 模块作为主应用模块的依赖模块
var app = angular.module('myApp', ['ui.router'])
- 在html中添加占位符 —— 使用 uiView 指令
<div ng-app="myApp">
<div ui-view></div>
</div>
- 配置路由状态
//定义模板,并注入ui-router
var app = angular.module('myApp', ['ui.router'])
//定义路由----对服务进行参数初始化,这里配stateProvider服务的视图控制
app.config([
'$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/students"); //这条是相当于报错的时候跳转
$stateProvider
.state('login', {
url: '/login',
// template: './module/main/mainTemplate.html',
templateUrl: './module/login/loginTemplate.html',
controller: 'LoginController'
})
.state('main', {
url: '/main',
// template: './module/main/mainTemplate.html',
templateUrl: './module/main/mainTemplate.html',
controller: 'MainController'
})
},
])
state(name,stateConfig);
注册一个状态,并给定其配置。
参数:
name:状态的名称。
stateConfig:状态配置对象。配置具有以下各项属性:
template: string/function,html模板字符串,或者一个返回html模板字符串的函数。
templateUrl:string/function
,模板路径的字符串,或者返回模板路径字符串的函数。
templateProvider:function,返回html模板字符串或模板路径的服务。
controller:string/function
,新注册一个控制器函数或者一个已注册的控制器的名称字符串。
controllerProvider:function,返回控制器或者控制器名称的服务
controllerAs:string,控制器别名。
parent:string/object,手动指定该状态的父级。
resolve:object,将会被注入controller去执行的函数,<string,function>形式。
url:
string,当前状态的对应url。
views:object,视图展示的配置。<string,object>形式。
abstract:boolean,一个永远不会被激活的抽象的状态,但可以给其子级提供特性的继承。默认是true。
onEnter:function
,当进入一个状态后的回调函数。
onExit:function
,当退出一个状态后的回调函数。
reloadOnSearch:boolean,如果为false,那么当一个search/query参数改变时不会触发相同的状态,用于当你修改$location.search()的时候不想重新加载页面。默认为true。
data:object,任意对象数据,用于自定义配置。继承父级状态的data属性。换句话说,通过原型继承可以达到添加一个data数据从而整个树结构都能获取到。
params:url里的参数值,通过它可以实现页面间的参数传递。
ui-sref 实现页面跳转
- 根据定义好的 state名字实现路由切换
<a ui-sref="login">login</a>
<a ui-sref="main.students">main.student</a>
- 传递参数
<a ui-sref="main.myinfo({
username: 'huangbiao',
age: 18
})">传递参数跳转</a>
使用$state.go
实现页面跳转
app.controller('LoginController', ['$scope', '$state', function($scope, $state) {
$scope.firstName = "John";
$scope.lastName = "Doe";
console.log(this === $scope) // false
$scope.goHomePage = function () {
console.log(this === $scope) // true
console.log($state)
var paramObj = {
username: 'huangbiao',
age: 18
}
$state.go('main.myinfo', paramObj) // 根据路由名字,跳转到对应的路由界面
}
}]);