您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
控制器的父子关系及route
发布时间：2019-08-10 20:57:44编辑：雪饮阅读（）
控制器的父子关系
在angular中控制器是有父子关系的，父子关系由调用方决定，如
控制器定义如：
<script>
var app=angular.module('mod1',[]);
app.controller('cont1',function($scope,$timeout){
$scope.a=12;
$timeout(function(){
alert('父级:'+$scope.a)
});
});
app.controller('cont2',function($scope){
$scope.a++;
alert($scope.a);
});
</script>
那么元素中调用如 ：
<body ng-app='mod1'>
<div ng-controller='cont1'>
<div ng-controller='cont2'>{{a}}</div>
</div>
</body>
这样调用，在控制器2种的输出则正常，即cont2是cont1的子控制器，cont2继承了cont1中的a属性。
另外根据延迟父级弹出及子控制器对属性a的值的修改可以判断子控制器继承父控制器的数据是以副本的形式存在的。
消息机制
在控制器的父子关系情况下父控制器还可以进行广播事件，然后子控制器可以接收指定广播，如
控制器定义如：
<script>
var app=angular.module('mod1',[]);
app.controller('cont1',function($scope){
$scope.fn=function(){
$scope.$broadcast('testevent',{a:12,b:5});
}
});
app.controller('cont2',function($scope){
$scope.$on('testevent',function(event,data){
console.log('event');
console.log(event);
console.log('data');
console.log(data);
})
});
</script>
元素中调用:
<body ng-app='mod1'>
<div ng-controller='cont1'>
<a href="javascript:;" ng-click="fn();">触发事件</a>
<div ng-controller='cont2'>{{a}}</div>
</div>
</body>
route
用route可以实现页面模块化，比较复杂，以一个示例来分析，如
<!DOCTYPE html>
<html>
<head>
<title>angular</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-route.js"></script>
<script>
var app=angular.module('mod1',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/user',{
template:'<h2>用户中心-内容</h2>'
})
.when('/article',{
template:'<h2>文章列表-内容</h2>'
})
});
app.controller('cont1',function($scope,$route){});
</script>
</head>
<body ng-app='mod1' ng-controller='cont1'>
<a href="#/user">用户中心</a>
<a href="#/article">文章列表</a>
<ng-view></ng-view>
</body>
</html>
解析：
要使用route首先需要页面引入angular-route.js
然后模块定义中要添加'ngRoute'的依赖
然后需要config配置下
然后控制器中也要引入$route的形参
对于视图中每个拆分的页面则用hash形式的url声明并且在视图中需要定义一个占位标签用于每个hash形式url将来被请求成功后的内容存放区域
config:
对于config以一个匿名函数进行配置，$routeProvider作为该匿名函数的形参，匿名函数内$routeProvider作为对象，该对象的then函数可以不断的进行连冠操作，每个连冠操作就是对每个hash形式url的配置，每个then的第一个参数就是hash的url，第二个参数是一个对象，该对象一般有template属性用于存放该hash的url的内容(拆分的子页面的内容)
route-config- templateUrl
如上面的route的config中每个then配置中对于其模板内容用template属性配置，但是当内容比较多的时候就比较鸡肋了，所以如果能够引入一个文件来就比较方便了，而templateUrl便是为此而来
config示例如：
app.config(function($routeProvider){
$routeProvider
.when('/user',{
templateUrl:'./views/user.html'
})
.when('/article',{
templateUrl:'./views/article.html'
})
});
route-config- controller
如上面模板的分离一样，控制器也可以单独指定，config时通过controller便可指定每个url中模板内容可以使用的控制器，则该模板就能使用指定的控制器中的变量了。
如：
<script>
var app=angular.module('mod1',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/user',{
templateUrl:'./views/user.html',
controller:'userController'
})
.when('/article',{
templateUrl:'./views/article.html'
})
});
app.controller('cont1',function($scope,$route){});
app.controller('userController',function($scope,$route){
$scope.name='雪饮';
$scope.sex='男';
});
</script>
route-config- templateUrl(script形式)
同上面的route-config- templateUrl相同，只是在模板内容不在一个单独文件中，仍旧在当前文件中以特殊的script标签定义，以id为标示，如
定义处：
<script>
var app=angular.module('mod1',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/user',{
templateUrl:'user.html',
controller:'userController'
})
.when('/article',{
templateUrl:'./views/article.html'
})
});
app.controller('cont1',function($scope,$route){});
app.controller('userController',function($scope,$route){
$scope.name='雪饮';
$scope.sex='男';
});
</script>
调用处：
<body ng-app='mod1' ng-controller='cont1'>
<script type="text/ng-template" id='user.html'>
<h2>user center</h2>
<h2>姓名:{{name}}</h2>
<h2>性别:{{sex}}</h2>
</script>
<a href="#/user">用户中心</a>
<a href="#/article">文章列表</a>
<ng-view></ng-view>
</body>
route-config- resolve
resolve用来在进入每个config-then时候的延迟过渡的，使用如：
.when('/article',{
templateUrl:'./views/article.html',
resolve:{
delay:function($q){
var delay=$q.defer();
setTimeout(function(){
delay.resolve();
},3000);
return delay.promise;
}
}
})
实际使用的时候应该是一个http请求，这里用setTimeout模拟的
换页事件
在route结构时的主控制器中的scope中可以分别监听routeChangeStart、routeChangeSuccess routeChangeError三个事件，该三个事件分别对应路由开始、路由成功、路由失败，在实际逻辑中可以对路由的这三个状态进行处理。示例如：
主控制器定义 ：
app.controller('cont1',function($scope,$route){
$scope.$on('$routeChangeStart',function(){
console.log('换页开始');
});
$scope.$on('$routeChangeSuccess',function(){
console.log('换页成功');
});
$scope.$on('$routeChangeError',function(){
console.log('换页失败');
});
});
关键字词：angular,控制器,route