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 的模板机制,它不光完成数据渲染的工作,还实现了数据绑定的功能。

同时,在 HTML 中的本身的 DOM 层级结构,被 AngularJS 利用起来,直接作为它的内部机制中,上下文结构的判断依据。比如例子中 p 是 div 的子节点,那么 p 中的那些模板标记就是在 div 的 Ctrl 的作用范围之内。

其它的,也同样写一些 js 代码,里面重要的是作一些数据的操作,事件的绑定定义等。这样,数据的变化就会和页面中的 DOM 表现联系起来。一旦这种联系建立起来,也即完成了我们所说的“双向绑定”。然后,这里说的“事件”,除了那些“点击”等通常的 DOM 事件之外,我们还更关注“数据变化”这个事件。

最后,可以使用:

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

来把整个页面驱动起来了。(你可以看到一个可被控制大小的红色方块)

简单来说,就是定义一个 App ,然后 bootstrap 时指定需要用哪些 App 。( App 之间的依赖关系在定义时声明就好了)

这里说的一个 App 就是 ng 概念中的一个 Module 。


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号