1.引入脚本文件
<link rel="stylesheet" href="http://lib.sinaapp.com/js/bootstrap/v3.0.0/css/bootstrap.min.css"> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" /> <script src="http://lib.sinaapp.com/js/jquery/2.0.1/jquery-2.0.1.min.js"></script> <script src="http://lib.sinaapp.com/js/bootstrap/v3.0.0/js/bootstrap.min.js"></script> <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script> <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular-route.min.js"></script>
2.显示值
<body> <div ng-app="app" ng-controller="controller"> <h1>{{ inputValue }}</h1> </div> </body> <script type="text/javascript"> var app=angular.module('app',[]); app.controller('controller',function($scope){ $scope.inputValue="william's home"; }); </script>
3.双向绑定
<div ng-app="app" ng-controller="controller"> <input type="text" ng-model="inputValue"> <h1>{{ inputValue }}</h1> </div>
修改input中的值，h1标题中的内容也会修改
4添加事件
<body> <div ng-app="app" ng-controller="controller"> <button ng-click="myclick()">Click Me</button> </div> </body> <script type="text/javascript"> var app=angular.module('app',[]); app.controller('controller',function($scope){ $scope.myclick=function(){ alert("click") } }); </script>
可以看出对$scope扩展属性和方法，就可以在html通过ng-model,ng-click使用
5 显示表格
<body>
<div ng-app="app" ng-controller="controller">
<table class="">
<tr ng-repeat="x in names">
<td>{{ x.firstName }}</td>
<td>{{ x.lastName }}</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
var app=angular.module('app',[]);
app.controller('controller',function($scope){
$scope.names=[
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
});
</script>
6通过get获取数据
<body> <div ng-app="app" ng-controller="controller"> <table class=""> <tr ng-repeat="x in names"> <td>{{ x.firstName }}</td> <td>{{ x.lastName }}</td> </tr> </table> </div> </body> <script type="text/javascript"> var app=angular.module('app',[]); app.controller('controller',function($scope,$http){ $http.get("data.json") .success(function (response) {$scope.names = response;}); }); </script>
data.json
[ { "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "lastName":"Jones" } ]
get后的url可以替换为任意地址，比如服务端的rest api地址，只要返回类型是json即可