the5fire的技术博客

关注python、vim、linux、web开发和互联网--life is short, we need python.


初识angularjs

作者:the5fire | 标签:         | 发布:2013-05-05 12:38 a.m. | 阅读量: 5879, 5809

之前有学习过一段时间的backbone,近期在同事的建议了稍稍的来了解了一下angularjs,和backbone一样,同是比较著名和流行的前端MVC框架。另外值得一提的是angularjs是由google组织开发的。

一开始看到angularjs的用法时还有些惊艳的,竟然可以这么操作DOM元素,可以说angularjs对html的标签进行了扩充。相比于backbonejs,它和DOM的结合是相当紧密,backbonejs本身对模板的支持感觉挺弱的。当然这取决于不同框架的设计目标不同。

另外再说MVC的事情,从目前所了解的angularjs来说,用它来写MVC的代码感觉不是那么清晰,它和DOM结合的如此紧密导致不同的层都要以页面为基础来做。从这点对比backbone来看,backbone中关于MVC的使用就清晰很多了。

因为目前还没大量的来使用angularjs进行练习,或者运用到项目中,所以随着以后不断的使用,或许会对angularjs有更深入的认识。

下面是一个练习的代码,简单的演示了angularjs对DOM的操作,也可以到这里进行在线查看:http://plnkr.co/edit/UHTR83x42XZpyg7wvX9z?p=preview

代码:

<!doctype html>
<html ng-app="timeExampleModule">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
    <script>
      function GreetCtrl($scope) {
        $scope.name = 'World';
      }

      function ListCtrl($scope) {
        $scope.names = ['Igor', 'Misko', 'Vojta'];
      }

      function MyCtrl($scope) {
        $scope.action = function() {
          $scope.name = 'OK';
        }

        $scope.name = 'World';
      }

      angular.module('timeExampleModule', []).
      // Declare new object called time,
      // which will be available for injection
      factory('time', function($timeout) {
        var time = {};

        (function tick() {
          time.now = new Date().toString();
          $timeout(tick, 1000);
        })();
        return time;
      });

      function ClockCtrl($scope, time) {
        $scope.time = time
      }
    </script>
  </head>
  <body>

<div>
  <div class="1">
     1 + 2 = {{ 1 + 2 }}
  </div>

  <hr/>

  <div class="2">
    10 * 2 = {{10 * 2 }}
  </div>

  <hr/>

  <div class="3">
    <input  type="text" ng-model="message"/>
    <div>
      {{ message }}
    </div>
  </div>

  <hr/>

  <div class"4">
    <div ng-controller="GreetCtrl">
      Hello {{name}}!
    </div>
    <div ng-controller="ListCtrl">
      <input type="text" ng-model="filtername"/>
      <ol>
        <li ng-repeat="name in names|filter:filtername">{{name}}</li>
      </ol>
    </div>
  </div>

  <hr/>

  <div ng-controller="MyCtrl">
      Hello {{name}}!
      <button ng-click="action()">
        OK
      </button>
  </div>

  <hr/>
  <div>
    <div ng-controller="ClockCtrl">
      Current time is: {{ time.now }}
    </div>
  </div>

</div>

  </body>
</html>

代码中最后的一个注入的例子还是挺有意思的。

相关资源: angularjs视频教程:http://pan.baidu.com/share/link?shareid=421562&uk=724988755&third=15#dir/path=%2Fangularjs 官网文档:http://docs.angularjs.org/guide/concepts 12种前端框架:http://www.infoq.com/cn/news/2012/05/js-mvc-framework/


----EOF-----

扫码关注,或者搜索微信公众号:码农悟凡


其他分类: