每天一个小知识点14（Angularjs总结二）



Angularjs总结 二

---

控制器的含义:

AngularJS中的控制器是一个函数，用来向视图的作用域中添加额外的功能。用它来给作用域对象设置初始状态，并添加自定义行为。

当在页面上创建一个新的控制器时， AngularJS会生成并传递一个新的$scope给这个控制器。可以在这个控制器里初始化$scope。由于AngularJS会负责处理控制器的实例化过程，所以只需编写控制函数即可。

function myController($scope) {
 $scope.say = "hello";
}

---

上边创建的控制器是在全局创建的，这样并不是很合理污染了全局命名空间，更合理的做法是创建一个模块，并在模块中去创建一个控制器

注意点1：使用ng-controller指令可以将一个控制器对象附加到DOM元素上，

注意点2，当创建了模块之后ng-app不需要放到全局上面去，而是放在了需要的地方

div ng-app="myApp"><h1 ng-controller="myController">{{say}}</h1></div> 
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller("myController",function($scope){
$scope.say="hello world";
});
</script>

---

只需创建控制器作用域中的函数，就能创建可以在视图中使用的自定义操作。AngularJS允许我们在视图中像调用普通数据一样调用$scope上的函数。

内置指令ng-click 可以将按钮、链接等其他任何DOM元素同点击事件进行绑定 ng-click指令将浏览器中的mouseup事件，同设置在DOM元素上的事件处理程序绑定在一起

<div ng-app="myApp">
<div ng-controller="FirstController">
<h4>点击button按钮添加值，点击a标签减少值</h4>
<button ng-click="add(1)" class="button">Add</button>
<a ng-click="subtract(1)" class="button alert">Subtract</a>
<h4>Current count: {{ counter }}</h4>
</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('FirstController', function($scope) {
$scope.counter = 0;
$scope.add = function(amount) { $scope.counter += amount; };
$scope.subtract = function(amount) { $scope.counter -= amount; };
});
</script>

注意点，他们用的是同一个scope

---

制器可以将与一个独立视图相关的业务逻辑封装在一个独立的容器中。尽可能地精简控制器是很好的做法。作为AngularJS开发者，使用依赖注入来访问服务可以实现这个目的。

AngularJS同其他JavaScript框架最主要的一个区别就是，控制器并不适合用来执行DOM操作、格式化或数据操作，以及除存储数据模型之外的状态维护操作。它只是视图和$scope之间的 桥梁。

AngularJS允许在$scope上设置包括对象在内的任何类型的数据，并且在视图中还可以展示对象的属性。

<div ng-app="myApp">
<div ng-controller="myController">
<p>{{people.name}}</p>
</div>
</div>
<script type="text/javascript">
   angular.module('myApp', []).controller("myController",function($scope){  //注意这是简写形式
   $scope.people={
   name:"zhangsan"
   };
   });
</script>

---

在拥有ng-controller='MyController' 这个属性的元素内部的任何子元素中，都可以访问person对象， 因为 它是定义在$scope上的。

$scope对象用来从数据模型向视图传递信息。同时，它也可以用来设置事件监听器，同应用的其他部分进行交互，以及创建与应用相关的特定业务逻辑。

AngularJS通过作用域将视图、控制器和指令隔离开来，这样就很容易为功能的具体部分编写测试。

重点：控制器嵌套（作用域包含作用域）

AngularJS应用的任何一个部分，都有父级作用域存在。对于ng-app所处的层级来讲，它的父级作用域就是$rootScope。 所有的作用域都通过原型继承而来，也就是说它们都可以访问父级作用域

AngularJS在当前作用域中无法找到某个属性时，便会在父级作用域中进行查找。

<div ng-app="myApp">
<div ng-controller="parController">
<div ng-controller="chiController">
<h1  ng-click="say()">say hello</h1>
{{people}}
</div>
</div>
</div>
<script type="text/javascript">
var app=angular.module("myApp",[])
app.controller("parController",function($scope){
$scope.people={gender:"male"}
})
app.controller("chiController",function($scope){
$scope.say=function(){
$scope.people.name="zhangsan"
}
})
</script>

---

表达式：

表达式在AngularJS应用中被广泛使用，因此深入理解AngularJS如何使用并运算表达式是非常重要的。 {{}}——这就是一个基础的表达式 它的用法是使用{{}}将一个变量绑定到了$scope对象上边，然后在视图中取出来使用当用$watch进行监听时， AngularJS会对表达式或函数进行运算。 这里涉及到一个新的是知识点：$watch——根据名字就知道他是做什么用的:监视——在这里它的作用是对模型中的数据进行监视，并且当数据发生改变的时候做相应的响应

AngularJS提供了一个非常方便的$watch方法，它可以在每个scope中监视其中的变量

案例：

<div ng-app="watch" >
<input ng-model='name' type='text'/>
<div>change count: {{count}}</div>
</div>
<script>
angular.module('watch',[])
.run(['$rootScope',function($scope){   //run这个东西先不用管，后边会解释
$scope.count = 0;
$scope.name = 'Alfred';
$scope.$watch('name',function(){
$scope.count++;
})
}]);
</script>

---

$watch来对$scope中的name进行监视，并在它发生变化的时候将$scope中的count属性增加1。因此，每当对name进行一次修改时，下面显示的change count数字就会增加1。

其实表达式和eval() 非常相似，但是由于表达式由 AngularJS来处理

---

有几点不同点： 1. 所有的表达式都在其所属的作用域内部执行，并有访问本地$scope的权限；

1. 不允许使用任何流程控制功能（条件控制，例如if/eles）；

$parse可以将一个表达式转换为一个函数。这个函数可以被调用，其中的参数是一个上下文对象，通常来说是作用域。

案例：

<div ng-app="myApp">
<div ng-controller="myController">
<p>{{val}}</p>
</div>
</div>
<script type="text/javascript">
var app=angular.module("myApp",[])
app.controller("myController",function($scope,$parse){
  $scope.name="zhangsan";
var expr="name =='wangwu'"
var fun=$parse(expr);
$scope.val=fun();
})
</script>