(1)控制器
在angular中控制器随处可见,控制器在MVC里面主要是做控制业务逻辑,控制model的数据。
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div ng-app="">
<div ng-controller="firstController">
<input type="text" value="" ng-model="name"/>
<input type="text" value="" ng-model="age"/>
`name`
`age`
</div>
</div>
<script type="text/javascript" src="app/index.js"></script>
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
</body>
</html>
可以看到div下,有一个ng-controller的指令,里面的firstController可以暂时理解为angular的表达式,它会去找firstController的变量。我们可以在index.js的文件里声明这个变量。
var firstController = function($scope){ // $scope 我们叫做作用域 // 申明一个Model $scope.name = '张三'; $scope.age = 20; }
在function中必须写成$scope,这是angular的依赖注入,他是angular的一个作用域,是管理控制器的,它也可以向外找,最上层有一个rootscope。
运行后可以看到此时name为张三,age为20,如果修改了任意一个,label也会改变,这就是上节所说的双向绑定。
(2)ng-bind
继续看下上面的代码,如果angular没加载完而页面已经渲染了,那会是什么样呢?
可以看到`name`和`age`会直接在页面上显示出来,当angular加载完后,数据马上会渲染上去。
模拟一下从服务器下载angular的过程,我们在页面中加一行alert代码。
<script> alert(3); </script>
可以看到在alert的时候页面上会显示用户不需要的东西,此时就可以用到ng-bind。
ng-bind是angular的一个指令。我们可以把html页面修改成如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div ng-app="">
<div ng-controller="firstController">
<input type="text" value="" ng-model="name"/>
<input type="text" value="" ng-model="age"/>
<div ng-bind="name"></div>
<div ng-bind="age"></div>
</div>
</div>
<script>
alert(3);
</script>
<script type="text/javascript" src="app/index.js"></script>
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
</body>
</html>
这样才运行的时候就不会渲染用户不需要的东西
点击确定后,会加载model中的数据:
通过审查页面元素,可以看到,ng-bind还为model自动添加了一个class
因此两个label会在下一行显示。
转载于:https://blog.51cto.com/xlows/1425255