angularjs的入门窥探

在年初的angular火爆的时期学跟着官方文档学了一下,了解一下它到底是什么样子的,语法什么的,零零闪闪看了一个星期左右的样子,本来准备推广到公司的项目中,有人说太灵活,大家也都不了解,出现问题觉得很解决也是一个问题,也就不了了之了,继续使用backbone了,这又让我想到了各种语言之间和各种框架之间好坏的争论,一直认为好坏是要看什么样的人来用它的。angular相对其它前端框架来实在是太强大和灵活了,所以注定它也是很大的,概念或者api都挺多的。简单记录一些觉得比较重要的概念。

##angular重要的一些概念

  1. angular的加载过程,或者说是浏览器解析的流程。从官方文档找到一张图来描述加载的过程:angular 加载过程

    详细流程:

    • 浏览器加载html file并解析成dom。
    • 加载angular的js文件。
    • angularjs的domContentLoaded事件触发。
    • angularjs的np-app指令来确定作用边界。
    • np-app对应的模块来配置注入器($injector)。
    • 注入器创建编译服务($compile service)和根作用域($rootscope)。
    • 编译服务编译模板dom并把它链接到根作用域。
  2. 数据绑定: 简单说就是html中某部分dom映射到某个javascript的属性,angular特别之处是双向绑定而且还是同步的。同样来自官方文档的图:

  3. 依赖注入: 是一种设计原则,可以用来减低计算机代码之间的耦合度。
    记得最开始听到这个词是在学java的spring框架的时候,始终没有理解透彻, 在angular中也应该差不多那个意思吧。wiki里面对这个词的描述wiki 链接。那angular又是怎么用得呢?angular是通过注入器(injector)用来处理依赖的创建的。一个很简单的ex:

    1
    2
    3
    4
    5
    6
    7
    function SomeClass(greeter) {
    this.greeter = greeter
    }
    SomeClass.prototype.doSomething = function(name) {
    this.greeter.greet(name);
    }

具体angular是怎么实现的呢?可以参考angular中文社区翻译的: angular开发指南

  1. 指令(directive): 标记dom节点,通过angular 编译来增加这个dom节点或者子节点特性行为。angular本身就封装了一些我们常用的,如: ng-bind、ng-repeat等等。 我们也可以自己写,下面是angularjs book中得一个简单列子.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    angular.module('app', [])
    .directive('focus',
    function(){
    return {
    link: function(scope, element, attrs){
    element[0].focus();
    }
    }
    })

在模板中使用<input type="text" focus></input> 就可以了,很像是一个dsl,非常的灵活.

###参考资料
http://docs.angularjs.org/
http://angularjs.cn/