Angular 1.x个人使用的经验小结

前言

angular1.x作为经典的mvc框架，可以创建能够复用的组件,也可进行双向数据绑定。国内的vue.js/avaloon.js都是同类型的框架，之前工作以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是实现数据绑定的基础，详见文档，这里不再赘述。