閱讀(4.9k) 書簽贊(0) 我要糾錯

AngularJS 例子

2018-07-26 16:38 更新

我們從一個完整的例子開始認識 AngularJS ：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<title>試驗</title>

<script type="text/javascript" src="http://s.zys.me/js/jq/jquery.js" rel="external nofollow" ></script>
<script type="text/javascript" src="http://s.zys.me/js/ng/angular.js" rel="external nofollow" ></script>

</head>
<body>
  <div ng-controller="BoxCtrl">
    <div style="width: 100px; height: 100px; background-color: red;"
         ng-click="click()"></div>
    <p>{{ w }} x {{ h }}</p>
    <p>W: <input type="text" ng-model="w" /></p>
    <p>H: <input type="text" ng-model="h" /></p>
  </div>


<script type="text/javascript" charset="utf-8">

  angular.module('app', [], angular.noop)
  .controller('BoxCtrl', function($scope, $element){
      //$element 就是一個 jQuery 對象
      var e = $element.children().eq(0);
      $scope.w = e.width();
      $scope.h = e.height();

      $scope.click = function(){
        $scope.w = parseInt($scope.w) + 10;
        $scope.h = parseInt($scope.h) + 10;
      }

      $scope.$watch('w',
        function(to, from){
          e.width(to);
        }
      );

      $scope.$watch('h',
        function(to, from){
          e.height(to);
        }
      );
  });


  angular.bootstrap(document.documentElement, ['app']);
</script>
</body>
</html>

從上面的代碼中，我們看到在通常的 HTML 代碼當中，引入了一些標記，這些就是 AngularJS 的模板機制，它不光完成數(shù)據(jù)渲染的工作，還實現(xiàn)了數(shù)據(jù)綁定的功能。

同時，在 HTML 中的本身的 DOM 層級結(jié)構(gòu)，被 AngularJS 利用起來，直接作為它的內(nèi)部機制中，上下文結(jié)構(gòu)的判斷依據(jù)。比如例子中 p 是 div 的子節(jié)點，那么 p 中的那些模板標記就是在 div 的 Ctrl 的作用范圍之內(nèi)。

其它的，也同樣寫一些 js 代碼，里面重要的是作一些數(shù)據(jù)的操作，事件的綁定定義等。這樣，數(shù)據(jù)的變化就會和頁面中的 DOM 表現(xiàn)聯(lián)系起來。一旦這種聯(lián)系建立起來，也即完成了我們所說的“雙向綁定”。然后，這里說的“事件”，除了那些“點擊”等通常的 DOM 事件之外，我們還更關(guān)注“數(shù)據(jù)變化”這個事件。

最后，可以使用：

angular.bootstrap(document.documentElement, ['app']);

來把整個頁面驅(qū)動起來了。（你可以看到一個可被控制大小的紅色方塊）

簡單來說，就是定義一個 App ，然后 bootstrap 時指定需要用哪些 App 。（ App 之間的依賴關(guān)系在定義時聲明就好了）

這里說的一個 App 就是 ng 概念中的一個 Module 。

以上內(nèi)容是否對您有幫助：

AngularJS 依賴注入 →

寫筆記

我要補充