• 我的AngularJS 学习之旅(二)


    记得某位大神说过,"时间就像海绵里的水,挤挤总是有的."。大多时候,与其说我是很忙而没时间去做自己想做的事, 倒不如说是懒得去做罢了。

    废话不多说,接前一篇继续吧

    3.3 指令(Directives)

      Angular  最强大的功能之一就是,你可以把模板编写成HTML的形式。
     [备注:Angular引入了一款强大的DOM转换引擎,可用它来扩展HTML的语法]

     常用的内置指令;

    {{ greeting }}    单向数据绑定

     ng-model          双向绑定

    3.4 过滤器(Filters)

      过滤器用来格式化表达式中的值。它可以用在视图模板(templates)、控制器(controllers)或者服务(services)中。我们很容易就能自定义过滤器。
     
      在模板中使用过滤器

      过滤器可以应用在视图模板中的表达式中,按如下的格式:{{ 表达式 | 过滤器名 }}

      example:

      例如,在"{{ 12 | currency }}"标记中格式化了数字12作为一种货币的形式来显示,它使用了currency过滤器。

    格式化之后的结果是"$12.00"。

     过滤器可以应用在另外一个过滤器的结果之上。这叫做“链式”使用,按如下格式:

    {{ 表达式 | 过滤器1 | 过滤器2 | ... }}过滤器可以拥有(多个)参数,按如下格式:

    {{ 表达式 | 过滤器:参数1:参数2:... }}

     example:

     例如,在“{{ 1234 | number:2 }}”的标记中格式化显示了数字1234为小数点后两位,使用了number过滤器。显示的结果为"1,234.00"。
     
     3.5 依赖注入
     依赖注入(DI)是一种让代码管理其依赖关系的设计模式。
     
     DI简介

    对象或函数可以通过三种方式获得所依赖的对象(简称依赖):

        1.创建依赖,通常是通过 new 操作符

        2.查找依赖,在一个全局的注册表中查阅它

        3.传入依赖,需要此依赖的地方等待被依赖对象注入进来

    第三种方式是最理想的,因为它免除了客户代码里定位相应的依赖这个负担,反过来,依赖总是能够很简单地被注入到需要它的组件中。

    这里还是以一个经典的例子来解释

    example:

    function SomeClass(greeter) {
        this.greeter = greeter;
      }
      
      SomeClass.prototype.doSomething = function(name) {
        this.greeter.greet(name);
      }

         上述例子中,SomeClass 不必在意它所依赖(只要A类型中用到了B类型实例,A就依赖于B)的greeter对象是从哪里来的,只要知道一点:在运行的时候,greeter 依赖已经被传进来了,直接用就是了。

         这个例子中的代码虽然理想,但是它却把获得所依赖对象的大部分责任都放在了我们创建 SomeClass 的客户代码中。

        为了分离“创建依赖”的职责,每个 Angular 应用都有一个 injector对象。这个injector 是一个服务定位器,负责创建和查找依赖。(译注:当你的app的某处声明需要用到某个依赖时,Angular 会调用这个依赖注入器去查找或是创建你所需要的依赖,然后返回来给你用)
     
    4、Angular与其他框架的兼容性
        
     ng-app 声明Angular边界

     纯Angular应用

          <html ng-app>
          //some code here
          ….      
          </html>

    如果是一款现有应用,该应用已经使用其他技术(如Java/Rails)来管理DOM,那么你可以让Angular只管理页面的一部分        

    <html>      
      <div  ng-app></div>
    </html>

    5、小结

    我们选择一个框架一定是看中了他的一些优势,当然没有万能的框架。和传统框架相比,Angular有自己的独特的优势:

      ①解决了界面展示和相关的业务混合在一起的问题
      ②Angular 中我们可以编写包含业务逻辑的控制器,而无需引用DOM
      当然,对于像我这样的初学者来说,Angular有不太好的地方,一方面相对来说资料比较少,另外就是调试较为复杂,可能对你来说,不是问题的问题,定位它,都会耽误太多时间。
     
    6.综合型的demo
    和大多数程序员一样,学习一个东西,笔者很急切将他们应用到项目中去,并逐渐能使用它搭建一个比较完善的项目架构。
    在客户端对JS的组织架构如下

    这里以home模块为例,分别包含homeModule主模块,homeCtrl,editCtrl,detailCtrl,lstCtrl控制器以及一个peopleservice服务

    这里其实就是实现了简单的增删改查功能

    运行起来的效果如下:

    这里使用的是ASP.NET MVC 5 结合的angular,代码部分,笔者正在整理中。。。

     参考资料:

          AngularJS中文社区

      《用AngularJS 开发下一代Web应用》

       深度理解依赖注入(Dependence Injection)

         

  • 相关阅读:
    [Bilingual]魔术农庄里的不变量 Invariants in Magic Farm
    包络线与对偶曲线
    【翻译】拓扑四日谈
    几何观止(经典几何对象)
    [Bilingual] Half of Adcanced Algebra 半本高代习题集
    Luis A. Caffarelli教授的出版作品【1】
    Luis A. Caffarelli教授的出版作品【2】
    Luis A. Caffarelli教授的出版作品【3】
    Untitled
    白云先生推荐书单之夷狄篇
  • 原文地址:https://www.cnblogs.com/lucky_hu/p/3946335.html
Copyright © 2020-2023  润新知