AngularJS 系列 01 - HelloWorld和数据绑定
发布时间：2016-10-30 18:45:10 所属栏目：教程 来源：站长网
导读：副标题#e# AngularJS 系列 学习笔记 目录篇 前言： 好记性不如烂键盘，随笔就是随手笔记，希望以后有用。 本篇目录： 1. Hello World 2. AngularJS中的数据绑定 3. 简单的数据绑定 4. 数据绑定的最佳实践 写一个Hello World的应用是咱们接触任何一个语言的
|
在input元素上使用ng-model指令来实现数据绑定，如下所示： 1 <input type="text" ng-model="person.name" placeholder="请输入您的姓名...">
2 <h1>Hello, {{person.name}} !</h1>
这样绑定就设置好了，没错，就这么简单。瑾此而已。 咱们可以观察一下视图是如何更新数据模型的。当 <input> 中的值发生变化时， person.name 会被更新，而视图将反映出这个更新。
咱们仅通过视图就实现了一个双向数据绑定，为了从其他角度（后端到前端）解释双向数据绑定，后面会着重介绍控制器。
正如 ng-app 声明所有被它包含的元素都属于AngularJS应用一样，DOM元素上的 ng-controller 声明所有被它包含的元素都属于某个控制器。 为了解释这个概念，我们将上面的例子进行如下修改： 1 <!DOCTYPE html>
2 <html ng-app="myApp">
3 <head>
4 <meta charset="UTF-8">
5 <title>Hello World</title>
6 <script src="../script/angular.min.js"></script>
7 </head>
8 <body>
9 <div ng-controller="myController">
10 <h1>现在时间：{{clock}}</h1>
11 </div>
12 </body>
13 </html>
在这个例子中，我们会创建一个每秒钟走一步的时钟，并更新 {{clock}} 变量上的数据： 1 <script>
2 var app = angular.module('myApp', []);
3 app.controller('myController', function($scope, $timeout) {
4 var updateClock = function () {
5 $scope.clock = new Date();
6 $timeout(function () {
7 updateClock();
8 }, 1000);
9 };
10 updateClock();
11 });
12 </script>
在这个例子中，当定时器触发时会调用updateClock()函数，将$scope.clock的值设置为当前时间。 完整代码如下： 1 <!DOCTYPE html>
2 <html ng-app="myApp">
3 <head>
4 <meta charset="UTF-8">
5 <title>Hello World</title>
6 <script src="../script/angular.min.js"></script>
7 </head>
8 <body>
9 <div ng-controller="myController">
10 <h1>现在时间：{{clock}}</h1>
11 </div>
12
13 <script>
14 var app = angular.module('myApp', []);
15 app.controller('myController', function($scope, $timeout) {
16 var updateClock = function () {
17 $scope.clock = new Date();
18 $timeout(function () {
19 updateClock();
20 }, 1000);
21 };
22 updateClock();
23 });
24 </script>
25 </body>
26 </html>
上面的代码可以分开，修改成： 1 <!DOCTYPE html>
2 <html ng-app="myApp">
3 <head>
4 <meta charset="UTF-8">
5 <title>Hello World</title>
6 <script src="../script/angular.min.js"></script>
7 </head>
8 <body>
9 <div ng-controller="myController">
10 <h1>现在时间：{{clock}}</h1>
11 </div>
12
13 <script src="index.js"></script>
14 </body>
15 </html>
1 var app = angular.module('myApp', []);
2 app.controller('myController', function($scope, $timeout) {
3 var updateClock = function () {
4 $scope.clock = new Date();
5 $timeout(function () {
6 updateClock();
7 }, 1000);
8 };
9 updateClock();
10 });
由于JavaScript自身的特点，以及它在传递值和引用时的不同处理方式，通常认为，在视图中通过对象的属性而非对象本身来进行引用绑定，是AngularJS中的最佳实践。
（编辑：济南站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
