angular-utils
注意: 0.2.x 版本的使用方式与之前 0.1.x 的使用方式有所不同
// 需要在 AngularJS 启动时候引入 ngUtils 模块;angular;
使用 装饰器
- @Router
@Router 只记录路由配置(注意这里指的是 UI-Router ^0.2.18), 并未进行路由配置. 因此使用 decoratedModule 中的 routerAll 方法配置路由
注意: 如果使用 Uglify 压缩代码, 请禁用 mangle
{ mangle: false }
如果使用 UglifyJS2 压缩代码, 请保持函数名称mangle: { keep_fnames: true }
;;; @ { this; } { } // app.js;; 'App' name;
注意: 关于 UI-Router 多命名视图配置
let routerConf = 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' ; @ { }
- @$Timeout
; @ { }
- @$Apply
; @$Apply { }
- @$Async
; @$Async async { const result = await ; thisinfo = resultinfo; }
- @$Inject
依赖注入
; @ { // 使用注入对象 this_$q; this_$scope; }
依赖注入与继承
@ { } @ { super; } { // 使用注入对象 this_$q; this_$rootScope; }
- @Mixin
; const obj = { } @ { this; }
- @InjectServices 注意 InjectService 无法注入 $scope, 因为 $scope 不是 service
; @ { thistitle = title; } { // 使用注入的服务 this_$state; }
使用 utils
- injectHelper.injector
备注: 使用该方法前:
;angular;
获取 $inject 对象, 方便获取依赖
; injectHelperinjector;
- InterceptorFactory
由于 $resource 的 interceptor 配置, 不支持数组方式, 配置多拦截器. InterceptorFactory 可以实现多拦截器的效果, 例子请参考: InterceptorFactory_spec.js
;
- spread
为 Promise 提供 spread 方法
; ;Promise;
当然你也可以扩展 $q 中的 Promise (可以在 run 阶段执行方法)
;
- decoratedModule
包装 angular 模块方法, 不对外提供 filter/service, 原因见No Service/Filter
另外 decoratedModule 提供了 namespace
方法, 用于启用 namespace, 这时候无论是声明 controller, directive 还是 component 时候, 都会自动添加 moduleName 前缀
避免重名问题.
;
- EventBus
用于取代 angular 原生的 $on $broadcast $emit 原因见ng中的事件订阅与发布
; // 添加事件EventBus;EventBus; // 订阅事件let { // do something that you like}; EventBuseventscustomEvent; EventBuseventscustomEvent; // 发布事件EventBuseventscustomEvent; // 禁用事件EventBuseventscustomEventdisable = true; // 事件禁用后, 无法触发该类事件EventBuseventscustomEvent; // 启用事件EventBuseventscustomEventdisable = false; // 删除注册的 listener 函数EventBuseventscustomEventclearlistener; // 删除所有 customEvent 事件的监听函数EventBuseventscustomEventclear; // 删除事件EventBusclear'customEvent'; // 删除所有添加的事件EventBusclear;
@Component
和@Route
的使用说明
@Route
将angular注册路由的代码用装饰器统一执行
- 下面有一段原生的路由配置:
// index.js 文件中设置路由;;; routerConfig$inject = '$stateProvider'; { $stateProvider ; } // 添加子模块 name;
- 使用@Route的方式改造路由注册,直接在对应controller上添加装饰器
@Route支持所有原生路由的参数配置,额外添加了stateName选项用于替代state,添加了modules用于设置子模块,添加了moduleName可以自定义路由注册时模块的名称
;; // 注册路由时,moduleName会默认使用prefix+stateName, 也可以使用moduleName选项自定义设置模块名称// setRouterPrefx('ccms'); @
- 还提供了routerHub和withRouter。routerHub提供类似vue-router的集中处理路由的方式。
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 ;
@Component
与@Route的涉及的思路一致,均使用装饰器的方式整合注册过程。 @Component整合了组件注册的代码
- 下面一段代码使用原生的方式注册组件
// index.js; ;; const componentOpts = controller templateUrl bindings: vAlign: '@?' // 垂直对齐 hAlign: '@?' // 水平对齐 styleObj: '<?' // 自定义样式 className: '@' // 自定义类 gap: '<?' // 内间距 transclude: true; name;
- 对应的,使用@Component的方式注册组件
;;;; @@ { super; }
除了添加额外的name选项用于设置组件名称,支持原生注册组件的所有选项,组件名称使用驼峰形式,否则无法渲染。