angularJS快速入门

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即可

posted @ 2016-12-27 09:56  william的博客  阅读(190)  评论(0)  编辑  收藏  举报