angular开发中问题记录--启动过程初探
公司一些管理后台的前端页面,使用的是angular开发的,得益于angular的双向绑定和模块化controller使得构建pc端的CRUD应用简单了不少。angular有很多比较难理解的概念,上手起来没有vue简单,不过对着模板项目、看看tutorial、阅读项目代码再仿照项目代码写一些业务功能还是可行的。如果想要用到一些高级功能那就要下一定功夫学习才行。 遇到的问题在开发的时候遇到了这么一个问题,先上代码 'use strict'; var domain = 'http://localhost:1337'; //开发环境下的服务端地址, var MY_DOMAIN = 'http://production.com'; // 生成环境的网站地址 angular.module('adminApp').run(function($location) { if ($location.host() !== 'localhost') { domain = MY_DOMAIN; } }) .constant('myConfig',{ host: domain,domain: domain,api: this.domain + '/admin',//项目中请求服务端异步获取数据的接口 } 上面的代码,乍一看是自动切换生产和开发环境的服务端地址,可是当部署之后发现这段代码好像并没有生效,domain始终是'http://localhost:1337',并没有通过判断host而被赋值为MY_DOMAIN。 constant和run是什么angular比较核心的一个概念就是依赖注入,angular的模块化以及模块间的依赖管理都是基于此的。而这些依赖都是从哪里来的或者怎么自建一些依赖呢?这就需要自己定义一些Providers,angular提供了5种Provider recipe(恕我不知道怎么翻译这个概念):factory、service、value、constant、provider,这里我们只关心constant。官方文档描述constant是用来为配置阶段(config phase)和运行阶段(run phase)提供没有依赖的简单对象,也就是说我们在constant里面定义的对象或基本类型可以在run和config里面注入: angular.module('adminApp') .constant('myObj',{ name: 'angular' }) .constant('myStr','hello') .config(function(myObj) { console.log(myObj.name) // angular }) .run(function(myStr) { console.log(myStr) //hello }) 那什么是运行和配置阶段呢?官方文档这样说:
上面介绍angular的模块实际上是配置块和运行块的集合,这些blocks是在angular的启动(bootstrap)过程中被添加进模块的。Configuration blocks和Run blocks可以理解为队列,一个模块可以写多个.run和.config,最后被依次添加进相应的blocks中。config只能注入provider 和constant recipe,run只能注入实例(不是providers)和constant recipe。但我测试value recipe是可以注入到run的,好吧我承认angular文档真的不好理解。 总之我觉得就一句话概况就是:constant可以理解为是angular用来为模块提供可注入的所有模块共享的常量(无依赖的简单对象或类型),并且在config和run阶段之前定义好的。 (仅仅是个人理解) 执行顺序上面说了constant应该是在run之前被执行,可这只是程序运行的表象,为什么会这样呢,于是就搜索了一下angular的启动过程,其中这篇对启动过程的[源码分析](http://liuwanlin.info/angular...),给了我一些启发。 再看下loadModules方法,这个方法用于加载模块,即返回需要运行的块,之前提到的constant和provider其实就是被加入了invokequeue之中,这只是注册并没有执行,在这个函数中调用runInovequeue才真正执行生成实例,也可以看出config是在run之前运行的: 解决问题上面大致解释了一下constant先于run被执行的原因,这也是文章最开始写的代码没有按照预期执行的原因。知道了原因又知道.run里面可以注入已经定义的constant,那么我们就知道只要稍微改一下代码就可以得到想要的结果: 'use strict'; var domain = 'http://localhost:1337'; //开发环境下的服务端地址, var MY_DOMAIN = 'http://production.com'; // 生成环境的网站地址 angular.module('adminApp').run(function($location,myConfig) { if ($location.host() !== 'localhost') { myConfig.domain = MY_DOMAIN; myConfig.api = myConfig.domain + '/admin'; //这里不要期望myConfig里面的domain会跟随者domain变量的变化而变化,对象一旦建立,它的属性值就是固定的了,想修改只能通过对象访问属性修改。 } }) .constant('myConfig',//项目中请求服务端异步获取数据的接口 } 参考文档:angular providers (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
- Yum database disk image is malformed 错误 解决办法
- bootstrap-可选尺寸小模态框
- vim – 按行而不是逐句移动
- angularjs – ReferenceError:未定义Angular
- bash – 找到字段的编号
- 有没有办法使AngularJS负载分支在开始,而不是在需要时?
- WebService传递大字符串
- angularjs – CreateProcess error = 193,%1不是有效的Win
- Angular Router原生路由和Angular UI Router嵌套路由