脚本宝典收集整理的这篇文章主要介绍了Angular1.x关于module,controller,作用域的概念，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
Angular中控制器是一个函数，是用来增强视图的，用来向视图的作用域添加功能。默认的控制器函数，是定义在全局作用域中的。如
function myController($scoPE){
$scope.message ='hi guys!'
}
创建一个控制器时，Angular会生成一个新的$scope（局部作用域）,控制器的作用域是可以嵌套的，如父控制器和子控制器。
$scope可以
提供观察者以监测数据模型的变化
可以把数据模型的变化通知给应用
可以嵌套
给表达式提供运行时环境
$rootscope是和根ng-app绑定的。
为了避免污染全局，就要用到模块，修改为如下
angular.module('myapp',[])
.controller('myController',function($scope){
$scope.message ='hi guys!'
})
和以上几个概念都有关的还有一个概念指令directives,可以理解为自定义htML元素，和属性。
指令在创建时，angular也会为她创建一个作用域。这个作用域分为外部作用域和独立作用域。
来看下最简单的指令
<;my-directive></my-directive>
angular.module('myapp',[])
.directive('my-directive',function(){
return {
restrict:'E',
template:'<a href="http://baidu.COM">Click me to baidu</a>'
}
})
给指令传递数据，可以直接使用外部controller的作用域的属性。存在的问题是一旦控制器被移除或修改，我们的指令就要修改。
可以如下形式，通过创建独立作用域，使用绑定策略来传递数据给指令
<my-directive></my-directive>
angular.module('myapp',[])
.directive('my-directive',function(){
return {
scope:{}/*创建独立作用域*/
restrict:'E',
template:'<a href="http://baidu.com">Click me to baidu</a>'
}
})
实例如下
<div my-directive my-url="http://baidu.com" my-link-text="Click me to baidu">
angular.module('myapp',[])
.directive('my-directive',function(){
return{
restrict:'A',
repalce:true,
scope:{
myUrl:@,
myLinkText:@
},
template:'<a href='{{myUrl}}'>'+'{{myLinkText}}</a>'
};
});
&绑定，对于带参数的调用，需要传递一个对象，对象的key是参数名称，值是参数内容。
如<div show="show(email)">,在指令中调用show({email:data})
最后就controller与scope的概念再举例说命一下，一定要知道controller就是函数，$scope是局部作用域。
VAR module=angular.module('myApp',[])
// module.controller('mainController',function() {
// // body...//
this.name ="Ari";
// this.hello = function(){
// alert('hi');
// }
// });
module.controller('mainController',mainController);
function mainController(){
this.name ="Ari";
this.hello = function(){
alert('hi');
}
}
module.controller('controller2',controller2);
function controller2($scope){
$scope.sex ="女";
}
借用controler as可以在代码中去除对$scope的依赖，让你写出耦合性小的纯JS函数。
** 可以规定对于controller as的写法如下：链接
angular.module("app",[])
.controller("demoController",[function(){
var vm = this;
vm.title = "angualr";
return vm;
}])
其优势为：
定义vm这样会让我们更好的避免JavaScript的this的坑。
如果某个版本的angular不再支持controller as,可以轻易的注入$scope,修改为 var vm = $scope;
因为不再注入$scope了，controller更加的POJO，就是一个很普通的JavaScript对象。
也因为没有了$scope，而controller实例将会成为scope上的一个属性，所以在controller中我们再也不能使用$watch,$emit,$on之类的特殊方法，因为这些东西往往不该出现在controller中的，给大家一个警告，更好的控制。但是一旦如果没办法必须用的话，可以在征得项目组一致同意，将此controller退回$scope.
因为controller实例将会只是$scope的一个属性，所以view模板上的所有字段都会在一个引用的属性上，这可以避开JavaScript原型链继承对于值类型的坑。参加https://github.com/angular/an...
controller as 对于 coffescript,liveScript更友好。
模板上定义的每个字段方法都会在scope寄存在controller
as别名上的引用上，所以在controller继承中，不会在出现命名冲突的问题。
以上是脚本宝典为你收集整理的Angular1.x关于module,controller,作用域的概念全部内容，希望文章能够帮你解决Angular1.x关于module,controller,作用域的概念所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。