// 需要在 AngularJS 启动时候引入 ngUtils 模块importngUtilsfrom'angular-utils';angular.module('app',[ngUtils]);- @Router
@Router 只记录路由配置(注意这里指的是 UI-Router ^0.2.18), 并未进行路由配置. 因此使用 decoratedModule 中的 routerAll 方法配置路由
注意: 如果使用 Uglify 压缩代码, 请禁用 mangle
{ mangle: false }如果使用 UglifyJS2 压缩代码, 请保持函数名称mangle: { keep_fnames: true }
import{Router}from'angular-utils/decorators';import{decoratedModule}from'angular-utils/utils';importExampleTplUrlfrom'./example.tpl.html';
@Router('example',{url: '/example',templateUrl: ExampleTplUrl,controller: 'ExampleCtrl',controllerAs: 'vm'})exportdefaultclassExampleCtrl{constructor(){this.init();}init(){}}// app.jsimport{decoratedModule}from'angular-utils/utils';importAppCtrlfrom'./AppCtrl';exportdefaultdecoratedModule('App',[]).routerAll().controller(`AppCtrl`,AppCtrl).name;注意: 关于 UI-Router 多命名视图配置
classTicketList{}classTicketDetail{}letrouterConf={url: '/ticket',views: {'': {templateUrl: './src/app/ticket/ticket.html',controller: 'TicketController',controllerAs: 'vm'},'list@ticket': {templateUrl: './src/app/ticket/list/list.html',controller: TicketList,controllerAs: 'vm'},'detail@ticket': {templateUrl: './src/app/ticket/detail/detail.html',controller: TicketDetail,controllerAs: 'vm'}}};
@Router('ticket',routerConf)classTicketController{constructor(){}}- @$Timeout
import{$Timeout}from'angular-utils/decorators';classAppCtrl{
@$Timeout(0,false)test(){}}- @$Apply
import{$Apply}from'angular-utils/decorators';classAppCtrl{
@$Applytest(){}}- @$Async
import{$Async}from'angular-utils/decorators';classAppCtrl{
@$Asyncasynctest(){constresult=awaitfetchSomeInfos();this.info=result.info;}}- @$Inject
依赖注入
import{$Inject}from'angular-utils/decorators';
@$Inject('$q','$scope')classAppCtrl{constructor(){// 使用注入对象this._$q;this._$scope;}}依赖注入与继承
@$Inject('$rootScope')classSuperCtrl{constructor(){}}
@$Inject('$q')classAppCtrlextendsSuperCtrl{constructor(){super();}test(){// 使用注入对象this._$q;this._$rootScope;}}- @Mixin
import{Mixin}from'angular-utils/decorators';constobj={myMethod(){}}
@Mixin(obj)classMainCtrl{constructor(){this.myMethod();}}- @InjectServices 注意 InjectService 无法注入 $scope, 因为 $scope 不是 service
import{InjectServices}from'angular-utils/decorators';
@InjectServices('$state','$log','$stateParams','$filter')exportdefaultclassPartialPage{constructor(title){this.title=title;}init(){// 使用注入的服务this._$state.go(/*...*/);}}- injectHelper.injector
备注: 使用该方法前:
importngUtilsfrom'angular-utils/module';angular.module('app',[ngUtils]);获取 $inject 对象, 方便获取依赖
importinjectHelperfrom'angular-utils/utils/injectHelper';injectHelper.injector.get('$http');- InterceptorFactory
由于 $resource 的 interceptor 配置, 不支持数组方式, 配置多拦截器. InterceptorFactory 可以实现多拦截器的效果, 例子请参考: InterceptorFactory_spec.js
import{InterceptorFactory}from'angular-utils/utils';- spread
为 Promise 提供 spread 方法
import{spread}from'angular-utils/utils';spread();Promise.resolve([1,2,3]).spread((a,b,c)=>{expect(a).toBe(1);expect(b).toBe(2);expect(c).toBe(3);});当然你也可以扩展 $q 中的 Promise (可以在 run 阶段执行方法)
spread(Object.getPrototypeOf($q.defer().promise).constructor);- decoratedModule
包装 angular 模块方法, 不对外提供 filter/service, 原因见No Service/Filter
另外 decoratedModule 提供了 namespace 方法, 用于启用 namespace, 这时候无论是声明 controller, directive 还是 component 时候, 都会自动添加 moduleName 前缀
避免重名问题.
import{decoratedModule}from'angular-utils/utils';- EventBus
用于取代 angular 原生的 $on $broadcast $emit 原因见ng中的事件订阅与发布
import{EventBus}from'angular-utils/utils';// 添加事件EventBus.addEvent('customEvent');EventBus.addEvent('customEvent2');// 订阅事件letlistener=function(){// do something that you like};EventBus.events.customEvent.sub(listener);EventBus.events.customEvent.sub((obj)=>{expect(obj.test).toBe('test');});// 发布事件EventBus.events.customEvent.pub({test: 'test'});// 禁用事件EventBus.events.customEvent.disable=true;// 事件禁用后, 无法触发该类事件EventBus.events.customEvent.pub({test: 'test'});// 启用事件EventBus.events.customEvent.disable=false;// 删除注册的 listener 函数EventBus.events.customEvent.clear(listener);// 删除所有 customEvent 事件的监听函数EventBus.events.customEvent.clear();// 删除事件EventBus.clear('customEvent');// 删除所有添加的事件EventBus.clear();将angular注册路由的代码用装饰器统一执行
- 下面有一段原生的路由配置：
// index.js 文件中设置路由importangularfrom'angular';importcontrollerfrom'./controller';importtemplateUrlfrom'./template.html';routerConfig.$inject=['$stateProvider'];functionrouterConfig($stateProvider){$stateProvider.state('le.member.information',{url: '/le/member',
templateUrl,
controller,controllerAs: '$ctrl'});}exportdefaultangular.module('ccms.le.member',[])// 添加子模块.config(routerConfig).name;- 使用@Route的方式改造路由注册，直接在对应controller上添加装饰器
@Route支持所有原生路由的参数配置，额外添加了stateName选项用于替代state，添加了modules用于设置子模块，添加了moduleName可以自定义路由注册时模块的名称
importtemplateUrlfrom'./templateUrl';importRoute,{routerHub,setModulePrefix}from'./decorators/Router';// 注册路由时，moduleName会默认使用prefix+stateName, 也可以使用moduleName选项自定义设置模块名称// setRouterPrefx('ccms');
@Route({stateName: 'le.member.information',
templateUrl,url: '/le/member',modules: []})exportdefaultclassMemberInformation{}- 还提供了routerHub和withRouter。routerHub提供类似vue-router的集中处理路由的方式。
import{routerHub}from'./decorators/Route'exportdefaultrouterHub({stateName: 'le.card',url: '/card',template: '<ui-view></ui-view>',children: [{stateName: 'le.card.create',url: '/create/:planId',controller: createCtrl,templateUrl: createTpl},{stateName: 'le.card.list',url: '/list',controller: listCtrl,templateUrl: listTpl}]});与@Route的涉及的思路一致，均使用装饰器的方式整合注册过程。 @Component整合了组件注册的代码
- 下面一段代码使用原生的方式注册组件
// index.jsimportangularfrom'angular';importtemplateUrlfrom'../base/template.html';importcontrollerfrom'./controller';constcomponentOpts={
controller,
templateUrl,bindings: {vAlign: '@?',// 垂直对齐hAlign: '@?',// 水平对齐styleObj: '<?',// 自定义样式className: '@',// 自定义类gap: '<?'// 内间距},transclude: true};exportdefaultangular.module('ccms.components.VGroup',[]).component('vGroup',componentOpts).name;- 对应的，使用@Component的方式注册组件
importGroupBasefrom'../base/base-controller';import{Inject}from'angular-es-utils';importComponentfrom'../../../sdk/utils/easy-component';importtemplateUrlfrom'../base/template.html';
@Component({name: 'vGroup',templateUrl: templateUrl,bindings: {vAlign: '@?',// 垂直对齐hAlign: '@?',// 水平对齐styleObj: '<?',// 自定义样式className: '@',// 自定义类gap: '<?'// 内间距},transclude: true})
@Inject('$transclude','$element','$compile','$scope')exportdefaultclassVGroupextendsGroupBase{constructor(){super();}}除了添加额外的name选项用于设置组件名称，支持原生注册组件的所有选项，组件名称使用驼峰形式，否则无法渲染。