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

AngularJS 例子

2018-07-26 16:38 更新

我們從一個(gè)完整的例子開始認(rèn)識(shí) AngularJS ：

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

<title>試驗(yàn)</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 就是一個(gè) jQuery 對(duì)象
      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 代碼當(dāng)中，引入了一些標(biāo)記，這些就是 AngularJS 的模板機(jī)制，它不光完成數(shù)據(jù)渲染的工作，還實(shí)現(xiàn)了數(shù)據(jù)綁定的功能。

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

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

最后，可以使用：

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

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

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

這里說的一個(gè) App 就是 ng 概念中的一個(gè) Module 。

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

AngularJS 依賴注入 →

寫筆記

我要補(bǔ)充