[AngularJS学习笔记] 基础学习01
2016-06-06开始学习AngularJS
AngularJS是会extend HTML的
ng-directives
先学习了四个
- ng-app：定义AngularJS Application的指令
- ng-model：绑定HTML控件数据的指令
- ng-bind：绑定数据到HTML view的指令
- ng-init: 初始化AngularJS application的变量
示例：
<!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app="" ng-init="lastName='Guo'"> <p>Name: <input type="text" ng-model="name"></p> <p ng-bind="name"></p> <p>The name is <span ng-bind="lastName"></span></p> </div> </body> </html>
以上的示例里，
ng-app指令，作用是告诉AngularJS<div>这个元素是一个AngularJS application的“拥有者”。
ng-model指令，把输入框的value绑定到了application的一个变量名下
ng-bind指令，把<p>元素的innerHTML绑定到了application的某一个变量名下
ng-init指令，是初始化某些application变量
AngularJS Expressions
表达式在AngularJS里面用双花括号表示 {{ expression }}
表达式也可以写在指令里，例如：ng-bind="expression"
表达式可以包括对变量的绑定和运算，例如：
1 <div ng-app="" ng-init="myCol='lightblue'"> 2 3 <input style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}"> 4 5 </div>
这个顺序应是这样的：
- ng-model绑定这个input为myCol
- 再把value绑定到myCol中
- 最后是style也绑定到myCol中
基本上是要是JS的表达式，Angular都可以放在{{}}中或者是ng-bind中
包括JS对象，JS数组等等
例如：
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}; points=[1,15,19,2,40]"> <p>The name is <span ng-bind="person.lastName"></span></p> <p>The third result is {{ points[2] }}</p> </div>
AngularJS表达式和JavaScript表达式的比较：
- 两者都可以包含literals, operators, variables。
- AngularJS的表达式可以直接放在HTML里，但是JavaScript不行，必须跟HTML分离开。
- AngularJS的表达式不支持if else，loops和exceptions，但是JavaScript可以。
- AngularJS的表达式支持filter，JavaScript没有。
