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

具体见下篇

时间: 2024-11-18 08:12:27

Angular1.x使用小结的相关文章

zmNgFrameWork 架构升级ng1.5和md5静态资源缓存方案【angular1.x】

前言: 在我前面的博客,angular项目总结——angular + browserify + gulp + bower + less 架构分享  把我开发angular的架构进行了分享,并上传到了github https://github.com/zimv/zmNgFrameWork . 而后我又在我的 gulp系列 里分享了 gulp-rev:项目部署缓存解决方案----gulp系列(六) ,也更新了github上gulpStart的rev分支 https://github.com/zimv

“英雄之旅”见闻和小结----angular2系列(三)

前言: 本系列在前面两篇文章,介绍了Zone.js和angular2的基础概念.而后对于ng2的学习,还是由官方的 Tour of Heroes 开始. 以下内容经过提炼和个人理解,当然也会有不正确的地方,欢迎指正.有兴趣的朋友,可以自己开始ng2之旅,再结合本篇文章一起理解. ng2的配置比较麻烦,任意的引入包可能导致一些报错,建议直接官方下载 quickStart . ng2 将所有api分成7个类型,在查阅api的时候,可以多留意一下他们的类型,便于理解  @Component @Comp

使用Apache POI导出Excel小结--导出XLS格式文档

使用Apache POI导出Excel小结 关于使用Apache POI导出Excel我大概会分三篇文章去写 使用Apache POI导出Excel小结--导出XLS格式文档 使用Apache POI导出Excel小结--导出XLSX格式文档 使用Apache POI导出Excel--大数量导出 导出XLS格式文档 做企业应用项目难免会有数据导出到Excel的需求,最近在使用其,并对导出Excel封装成工具类开放出来供大家参考.关于Apache POI Excel基本的概念与操作我在这里就不啰嗦

【转载】小结一下linux 2.6内核的四种IO调度算法

在LINUX 2.6中,有四种关于IO的调度算法,下面综合小结一下: 1) NOOP NOOP算法的全写为No Operation.该算法实现了最最简单的FIFO队列,所有IO请求大致按照先来后到的顺序进行操作.之所以说“大致”,原因是NOOP在FIFO的基础上还做了相邻IO请求的合并,并不是完完全全按照先进先出的规则满足IO请求.NOOP假定I/O请求由驱动程序或者设备做了优化或者重排了顺序(就像一个智能控制器完成的工作那样).在有些SAN环境下,这个选择可能是最好选择.Noop 对于 IO

Android基础入门教程——8.1.3 Android中的13种Drawable小结 Part 3

Android基础入门教程--8.1.3 Android中的13种Drawable小结 Part 3 标签(空格分隔): Android基础入门教程 本节引言: 本节我们来把剩下的四种Drawable也学完,他们分别是: LayerDrawable,TransitionDrawable,LevelListDrawable和StateListDrawable, 依旧贴下13种Drawable的导图: 1.LayerDrawable 层图形对象,包含一个Drawable数组,然后按照数组对应的顺序来

Android基础入门教程——8.1.2 Android中的13种Drawable小结 Part 2

Android基础入门教程--8.1.2 Android中的13种Drawable小结 Part 2 标签(空格分隔): Android基础入门教程 本节引言: 本节我们继续来学习Android中的Drawable资源,上一节我们学习了: ColorDrawable:NinePatchDrawable: ShapeDrawable:GradientDrawable!这四个Drawable~ 而本节我们继续来学习接下来的五个Drawable,他们分别是: BitmapDrawable:Insert

安卓小结《1》

Activity的生命周期和启动模式的知识点小结: 1.如果Activity切换的时候,新Activity是透明,旧的不会走onStop方法. 2.新的Activity切换的时候,旧Activity  会先执行,onpause,然后才会启动新的activity. 3. Activity在异常情况下被回收时,onSaveInstanceState方法会被回调,回调时机是在onStop之前,当Activity被重新创建的时 候,onRestoreInstanceState方法会被回调,时序在onSt

date命令小结

在写linux shell脚本时,date是经常要用到的一个命令,这篇文章就此做个小结,以防自己用到时到处找 1.最基本的,显示当前的具体时期:直接敲入 date即可,如下, [email protected]:~/scripts$ date 2015年 01月 03日 星期六 21:46:49 CST 2.显示某个文件上次修改的时间:date -r file [email protected]:~/scripts$ date -r save.sh 2015年 01月 02日 星期五 23:29

java 小结2 多态问题。

面向对象这个东西,其实我们一直是不是都没有感觉到自己在用,以后我一定要用用.以前学c#时候认真的看过一次,最近一直研究java.随便再看看. 多态问题: 在java中多态分为(1)编译时多态和(2)运行时多态 (1)编译时多态比较容易理解:其实就是通过方法重载,就是方法的重载,同一个函数名但是可以参数不一样.这就是重载(so easy) (2)运行时多态:这个是通过方法覆盖实现的,就是子类在继承父类的时候,通过对某个方法的重写,覆盖父类方法. 简单的说:比如我们有个父类A,子类B通过Extend