AngularJS 系列 01 - HelloWorld和数据绑定
发布时间：2016-11-10 01:27:52 所属栏目：教程 来源：站长网
导读：副标题#e# AngularJS 系列 学习笔记 目录篇 前言： 好记性不如烂键盘，随笔就是随手笔记，希望以后有用。 本篇目录： 1. Hello World 2. AngularJS中的数据绑定 3. 简单的数据绑定 4. 数据绑定的最佳实践 写一个Hello World的应用是咱们接触任何一个语言的
|
上面的代码可以分开，修改成： 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中的最佳实践。
如果把这个实践应用到上面的例子中，需要把视图中的代码改成如下： 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.now}}</h1>
11 </div>
12
13 <script src="index.js"></script>
14 </body>
15 </html>
在这个例子中，相比每秒钟都更新$scope.clock，更新clock.now的值才是更美妙的做法。 （编辑：PHP编程网 - 湛江站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐