双向绑定测试：
<body ng-app> 请输入姓名：<input ng-model="myname"> <br> {{myname}},你好 </body>
这时候AngularJS会自动绑定对象myname，并且在下放的{{myname}}中显示出来
初始化指令：
通过ng-init来初始化对象，使对象有默认的数值：
<body ng-app ng-init="myname='陈大海'"> 请输入你的姓名：<input ng-model="myname"> <br> {{myname}},你好 </body>
此时默认显示出来的内容：
陈大海，你好
控制器：
<script >
//定义一个对象函数 var app =angular.module('myApp',[]);
//定义对象的controller，叫做myController，后方就是controller的内容 app.controller('myController',function($scope){ $scope.add=function(){ return parseInt($scope.x)+parseInt($scope.y) } }); </script>
调用
<body ng-app="myApp" ng-controller="myController"> x:<input ng-model="x" > y:<input ng-model="y" > 运算结果：{{add()}} </body>
也可以用$scope.x=10，设定x默认值为10
事件指令：
<head> <title> demo </title> <script src="angular.min.js"></script> <script > var app =angular.module('myApp',[]); app.controller('myController',function($scope){ $scope.x=10; $scope.add=function(){ $scope.z=parseInt($scope.x)+parseInt($scope.y); } }); </script> </head> <body ng-app="myApp" ng-controller="myController"> x:<input ng-model="x" > y:<input ng-model="y" > <button ng-click="add()">运算</button> 运算结果：{{z}} </body>
创建$scope.z对象和函数，但是并不主动调用函数，当按下ng-click的时候，进行add()的调用，然后主动回显结果
循环：
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> <script> var app = angular.module("myApp", []); app.controller("myController", function($scope) { $scope.list = [10,20,30,40] }); </script> </head> <body ng-app="myApp" ng-controller="myController"> <table> <tr ng-repeat="x in list"> <td>{{x}}</td> </tr> </table> </body
先用$scope创建一个list
在用ng-repeat命令调用该list
循环数组：
app.controller("myController", function($scope) { $scope.list= [ {name:'张三',shuxue:100,yuwen:93}, {name:'李四',shuxue:88,yuwen:87}, {name:'王五',shuxue:77,yuwen:56} ]; }); </script> </head> <body ng-app="myApp" ng-controller="myController"> <table> <tr> <td>姓名</td> <td>数学</td> <td>语文</td> </tr> <tr ng-repeat="entity in list"> <td>{{entity.name}}</td> <td>{{entity.shuxue}}</td> <td>{{entity.yuwen}}</td> </tr> </table>
类似类的调用。
内置服务：$http
<script> var app = angular.module("myApp",[]); app.controller("myController",function($scope,$http){ $scope.findAll=function(){ $http.get("data.json").success( function(response){ $scope.list=response; } ); } }); </script> </head> <body ng-app="myApp" ng-controller="myController" ng-init="findAll()"> <table> <tr> <td>姓名</td> <td>数学</td> <td>语文</td> </tr> <tr ng-repeat="entity in list"> <td>{{entity.name}}</td> <td>{{entity.shuxue}}</td> <td>{{entity.yuwen}}</td> </tr> </table>
data.json
[
{"name":"张三","shuxue":100,"yuwen":93},
{"name":"李四","shuxue":88,"yuwen":87},
{"name":"王五","shuxue":77,"yuwen":56},
{"name":"赵六","shuxue":67,"yuwen":86}
]
要注意<body ng-init="findAll()"> 要初始化angularJS的函数，即$scope.findAll(),不然http会注入失败。
