zoukankan      html  css  js  c++  java
  • Angular1.x使用小结

      之前工作以Angular1.x为主,主要做业务系统,以后工作中技术栈可能以vue为主,在此对Angular1.x的使用做一个简单总结,这里使用1.5+版本。

    基本概念

     1、依赖注入

      依赖注入,在angular中到处可见,这里不会照本宣科,只以很直白的方式的简单描述基本使用方式,以$scope注入为例。

      创建一个controller,注入$scope,有三种写法:

      1)隐式注入

    function HomeController($scope){};

      2)内联注入

    app.controller('HomeController',['$scope',function($scope){ }])

      3)显式注入

    app.controller(‘HomeController’,HomeController);
    
    HomeController.$inject=[‘$scope’];
    
    function HomeController($scope){
    
    }

      注意:由于第一种注入方式,是通过对函数做toString操作,然后使用正则匹配出参数名称,来实现注入,所以这种方式不能对代码进行压缩混淆处理。

     2、directive

      指令系统,我认为是angular1.x版本中最强大也是最复杂的部分,angular作者本身做后端出身,所以在整个指令周期也符合语言处理过程:经过编译(compile函数,会返回link函数)、链接处理(link函数)。

      1)指令最基本配置

    app.directive(‘dire’,function(){
    
    return function(){
    
      return {
    
        template/templateUrl:'', //模版
    
        scope:{} //为true或为对象表示隔离作用域
    
        restrict 'ACEM'//使用方式
    
        link:function(scope,ele,attrs,controllers){}
    
        compile:function(ele,attr){return function(){}}//如果此函数存在,link函数会被忽略,因为compile函数会返回link函数
    
        }
    
      }
    
    });

      2)关于绑定策略

      独立作用域父子作用域之间交换数据的方式,主要有三种(或说四种)

      @绑定,指令属性的值可以使用表达式,但是得出来的值一定是字符串;

      &绑定,表示引用绑定,主要绑定父作用域中函数,实现关注点的注入

      =绑定,表示双向数据绑定

      <绑定,表示单向绑定

      注意:对于&绑定的使用,主要是为了实现子作用域到父作用域的传递,个人比较喜欢vue中父子交互的方式:props in,event out。所以这里我一般使用 scope.$emit(‘xxx’,data),来实现子传父。

    3、component

      component是1.5+新增的方法,主要为了往angular2+的过度更自然一些,相当于指令restrict:’E’的简化,类似于vue中的component,不建议操作dom,一般只用于渲染,建议构建pure component。

    4、controller

      controller可以认为是一个封装程序逻辑的地方,这里和后端mvc中controller的作用类似,拿到modal,渲染模版,在angular中$scope是连接controller和view的桥梁,$scope是实现数据绑定的基础,详见文档,这里不再赘述。

      controller创建方式,主要分为静态工厂方法注册和动态注册:

      1)静态注册:

    app.controller(‘HomeController’,function(){})

      2)动态注册:

    $controllerProvider.register(“HomeController”,function(){})

      注意:动态注册是实现按需加载的基础,在项目结构实战模块会基于requirejs 来演示怎么实现动态按需加载controller(当然也可以使用oclazyload模块实现按需加载)。

    5、service

      service一般是封装通用代码,所谓通用代码一般是跨controller/directive等使用的代码,所以经常用来封装ajax接口访问、工具接口等。

      service创建方式有三种:

      1)、provider最原始的创建方式,可以注入到config中,加上provider后缀,有固定格式,必须返回$get函数

      2)、factory是对provider的封装,直接返回对象即可

      3)、service是最简单的创建方式,通过传递构造函数来创建服务。

    6、filter

      过滤器主要实现对象的格式化

    7、router

      内置路由模块ngRoute,用的较少,主要因为无法实现复杂路由比如嵌套,多层等,当然也可以结合ng-include实现类似效果,推荐使用第三方路由模块ui-router,ui-router是基于state的一种路由框架,是使用最多的一种路由模式。

    项目实战

    requirejs + ui-router+ angular

     具体见下篇

  • 相关阅读:
    Microsoft .NET Framework v4.0 正确安装方法
    彻底解决C#实现DataTable导出EXCEL表格
    利用log4net记录操作日志
    [转]驱动程序开发—编译正传(5)
    [转]驱动程序开发-概述(1)
    论富客户端程序的webservice实现
    在Vista中编程控制防火墙设定(C#)
    [转]驱动程序开发—编译前传(4)
    C#系统较时
    [转]驱动程序开发—工具篇(2)
  • 原文地址:https://www.cnblogs.com/Johnzhang/p/7191989.html
Copyright © 2011-2022 走看看