一、数据绑定
1、ng-app:使用angular控制哪一块就在哪一块的html中加入ng-app
例如:
<body ng-app> //表示angular控制整个的body区域
<!--angular的表达式--!>
{{1+2}} //在页面上输出3
{{name}} //在页面上输出name变量中的值
{{"name"}} //在页面上输出name字符串
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script> //注意要引入angular.js文件,从angular官网下载
<script>
<!--js表达式--!>
var string="alert(1+3)";
eval(string); //eval(string) 函数可计算某个字符串,并执行其中的的 JavaScript 代码
</script>
</body>
总结:angular表达式与js表达式的区别:
属性求值:js是对于window对象的,即是挂载到window对象上的,而angular所有的属性求值是对于scope的。
宽容:表达式求值对于undefined和null,angular是宽容的,但是js会报错。
没有流程控制语句:angular表达式中不能进行条件分支,循环,抛出异常。
过滤器:可以将表达式的结果传入过滤器链。
2、ng-model:数据的双向绑定(view层<=>model层)
<input type="text" ng-model="name" value="" />
{{name}}
<input type="text" ng-model="name" value="" />
浏览器中的结果:
3、ng-controller:控制器
//index.js中文件代码:声明一个控制器
var firstController = function($scope){//注意形参必须是$scope
$scope.name = "张三";
$scope.age= "20";
}
//index.html中代码
<div ng-app>
<div ng-controller="firstController"> //在控制器控制的html代码块内的变量由控制器的function定义的变量提供
<input type="text" ng-model="name" value="" />
{{name}}
</div>
</div>
<script type="text/javascript" src="app/index.js"></script> //引入控制器的声明文件
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
运行结果:
4、ng-bind:解决html加载时间导致页面显示未渲染的变量如{{name}}的问题
//index.html中代码
<div ng-app>
<div ng-controller="firstController"> //在控制器控制的html代码块内的变量由控制器的function定义的变量提供
<input type="text" ng-model="name" value="" />
<div ng-bind="name"></div> //ng-bind绑定的是当前作用域中name的变量,当angular.js还未加载成功的过程中也不会显示未渲染的变量,而是空白的
</div>
</div>
<script type="text/javascript" src="app/index.js"></script> //引入控制器的声明文件
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
未使用ng-bind未加载angular.js时页面显示:
使用后未加载angular.js时页面的显示:
5、多个控制器的作用域问题
<div ng-controller="outer"> //外层控制器
<input type="text" value="" ng-model="name">
<div ng-controller="inner"> //内层控制器
<input type="text" value="" ng-model="name">
</div>
</div>
原则:angular的控制器的作用域与js的作用域相似
当内层控制器没有声明name时,两个input的值都为外层控制器的name变量值。在浏览器中改变value值(即改变view视图层的value值),不会对外层控制器中的name产生影响,一旦修改了内层input的value值,那么当改变外层input的值或者外层控制器内name的变量值都不会再对内层的name产生影响了。