WdBly Blog

懂事、有趣、保持理智

WdBly Blog

懂事、有趣、保持理智

周维 | Jim

603927378@qq.com

Angular1.X 使用

Angular1.X 使用

image.png

模块

angular模块通过angular.module(name, requires, configFn)方法生成:

// 创建一个模块 angular.module("app", ["ionic", "cordova"])
// 获取一个模块 angular.module("app")
  1. 参数name是模块名称;
  2. 参数requires表示依赖其他模块数组
  3. 参数configFn是方法或数组,负责在模块初始化时做一些配置,如果是数组,最后一个元素必须是方法。

方法configFn并不是在执行angular.module()的时候立即执行,而是当这个模块被第一次使用时,由注入器调用执行。同时,查看方法configFn中的this就会发现,这个this在浏览器中指向的是window,而不是module。而且,方法configFn只会执行一次,因此同一个angular模块不会重复配置。

参数requires中的字符串表示依赖的模块名称。如果不是字符串,则必须是方法(或数组格式的方法),那么,这个方法就代表了一个模块。

angular.module(“app”, [“module1”, …]).run()方法

和configFn类似,用于初始化。可在内部初始化全局数据

run方法会在模块module1 …全部加载完成后执行

angular.module(“app”, [“module1”, …]).config()方法

对模块进行配置

.config(function($provide, $stateProvider,$httpProvider,$controllerProvider, $compileProvider,$filterProvider){ // 比如$httpProvider是$http服务的提供商 // 我们可以再config中对服务商进行配置 // 比如$state服务, $filter服务等 })

$provide有5个用来创建供应商的方法:

constant

定义常量用的,它定义的值当然就不能被改变,它可以被注入到任何地方,但是不能被装饰器(decorator)装饰

value

它可以是string,number甚至function,它和constant的不同之处在于,它可以被修改,不能被注入到config中,但是它可以被decorator装饰

service

当使用service创建服务的时候,相当于使用new关键词进行了实例化。因此,你只需要在this上添加属性和方法,然后,服务就会自动的返回this。当把这个服务注入控制器的时候,控制器就可以访问在那个对象上的属性了。

在service里面可以不用返回东西,因为AngularJS会调用new关键字来创建对象。

factory

它是一个可注入的function,它和service的区别就是:factory是普通function,而service是一个构造器(constructor),这样Angular在调用service时会用new关键字,而调用factory时只是调用普通的function,所以factory可以返回任何东西,而service可以不返回(可查阅new关键字的作用)

当使用factory来创建服务的时候,相当于新创建了一个对象,然后在这个对象上新添属性,最后返回这个对象。当把这个服务注入控制器的时候,控制器就可以访问在那个对象上的属性了。

provider

provider是他们的老大,上面的几乎(除了constant)都是provider的封装,provider必须有一个get方法,当然也可以说provider是一个可配置的factory provider创建服务的时候,唯一可以让控制器访问的属性和方法是在get()函数里返回的属性和方法

decorator

它不是provider,它是用来装饰其他provider的,而前面也说过,他不能装饰Constant,因为实际上Constant不是通过provider()方法创建的。

config再run方法执行前执行

在整个angularJS的工作流中,也只有这个阶段可以是唯一可以对应用进行修改的地方

控制器

作用域

AngularJS启动并生成视图时,会将根ng-app元素同rootScope进行绑定。rootScope是所有$scope对象的最上层。

rootScope是AngularJS中最接近全局作用域的对象。在rootScope上附加太多业务逻并不是好主意,这与污染JavaScript的全局作用域是一样的。

$scope对象就是一个普通的JavaScript对象,我们可以在其上随意修改或添加属性。

scope对象在AngularJS中充当数据模型,但与传统的数据模型不一样,scope并不负责处理和操作数据,它只是视图和HTML之间的桥梁,它是视图和控制器之间的胶水。

双向绑定

drity check

模板解析

路由

ui-router

参考