AngularJS 講解,一數據綁定

時間 2019-11-26

原文原文鏈接

AngularJS 徹底使用javascript 編寫的客戶端技術。經過原生的Model-View-Controller（MVC，模型視圖控制器）功能加強了HTML。這個選擇能夠快捷和愉悅地構建出使人印象深入而且極富表現力的客戶端應用。javascript

AngularJS的源碼託管在GitHub上，能夠免費獲取。html

數據模型對象（model object）是指$scope對象。java

數據綁定:app

例子:時鐘的實現函數

 1 <!DOCTYPE html>
 2 <html ng-app="myApp">
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>tabs control</title>
 6     <script type="text/javascript" src="angular.min.js"></script>
 7 </head>
 8 <body>
 9     <div ng-controller="MyController">
10         <h1>clock:{{clock}}</h1>
11     </div>
12     <script type="text/javascript" src="clock.js"></script>
13 </body>
14 </html>

clock.jsatom

 1 (function () {
 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 })();

數據綁定的最佳實踐:spa

因爲JavaScript自身的特色，以及它在傳遞值和引用時的不一樣處理方式，一般認爲，在視圖中
經過對象的屬性而非對象自己來進行引用綁定，是Angular中的最佳實踐。code

修改成：xml

 1 <!DOCTYPE html>
 2 <html ng-app="myApp">
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>tabs control</title>
 6     <script type="text/javascript" src="angular.min.js"></script>
 7 </head>
 8 <body>
 9     <div ng-controller="MyController">
10         <h1>clock:{{clock.now}}</h1>
11     </div>
12     <script type="text/javascript" src="clock.js"></script>
13 </body>
14 </html>

clock.jshtm

 1 (function () {
 2     var app = angular.module("myApp", []);
 3     app.controller('MyController', function ($scope) {
 4         $scope.clock = {
 5             now: new Date()
 6         }
 7         var updateClock = function () {
 8             $scope.clock.now = new Date();
 9         }
10         setInterval(function () {
11             $scope.$apply(updateClock);
12         }, 1000);
13         updateClock();
14     })
15 })();