总结一下
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div ng-app=""> <p> <input type="text" ng-model="hello"/></p> {{hello}} <div ng-bind="hello"></div> </div> </body> <script src="../js/angular-1.3.0.js"></script> </html>
上面代码的说明：
1. ng-app 指定管理DOM中哪个部分
2 ng-model 绑定HTML元素到应用程序(把它理解为需要把输入绑定到元素)
3 ng-bind ={{}} 即把输入绑定到输出上 ，这个元素就是输出
顺便复习下MVC M—>model 把它理解为数据层，就是核心数据什么的，SQL什么的
C--->controller 把它理解为处理数据的层面，即一个黑盒，一般view层数据经过C层改变到M层，或者数据流相反
V--->view 层 这个好理解，天天打交道的页面；
然后细细讲下Controller
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。
这里有一个$scope 变量 这是个什么鬼？
他是连接view 和 controller的桥梁
<body> <div ng-app=""> <div ng-controller="Controller"> <input type="text" ng-model="person.firstName"/> <input type="text" ng-model="person.secondName"/> {{person.firstName+":"+person.secondName}} </div> </div> <script src="../js/angular-1.3.0.js"></script> <script> function Controller($scope){ $scope.person={ firstName:"l", secondName:"jsd" } } </script>
ng-repeat
div ng-app="" ng-controller="namesController"> <ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li> </ul> </div> <script src="namesController.js"></script> <script> function namesController($scope) { $scope.names = [ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'} ]; } </script>
数量： <input type="number" ng-model="quantity"> 价格： <input type="number" ng-model="price"> <p>总价 = {{ (quantity * price) | currency }}</p>