Angular.js的学习1.0
- AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写的库。它可通过 script标签添加到HTML 页面。
- AngularJS能做什么:
解决重复劳动—获取、事件、创建
接管UI - AngularJS好处在哪儿:自动同步
- 局限:
Angular是一个MVC‘框架’:数据是核心(特点)
举个栗子:
我希望实现一个效果是输入d1的值后在d2中也显示d1的值。未使用Angular.js
1.先document获取d1/d2。
2.将d1的值赋值给d2
那么这样的话就会产生了重复的代码。
<input type="text" name="name" value="" id="d1">
<input type="text" name="name" value="" id="d2">
那么如果使用了Angular.js呢?
//1.引入angular.js
<script type="text/javascript" src="angular.js"></script>
<body>
//2.定义angular.js的范围 <html ng-app="">
//3.数据从哪来 ng-model="a" 给模型取一个名字为a
<input type="text" name="name" value="" ng-model="a">
//4.数据到哪去 ng-bind="a" 绑定a的数据
<div class="" ng-bind="a"></div>
</div>
</body>
但是呢,上面只有用如果我想在div中添加文字那么则会被吞掉,不显示我的文字。如何解决?
<input type="text" name="name" value="" ng-model="a">
<input type="text" name="name" value="" ng-model="b">
//{{}}这个相当于一个占位符,就像前台获取后台传的值el表达式一样{$}
<div class="">结果是:{{a*b}}</div>
这写打开网站时则会显示一开始的结果为:NaN
那么如何解决这个问题?
ng-init 初始化值
将a,b的值初始化为0