angularJS快速入门

时间：2023-03-08 21:12:31

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

相关文章