分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了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。
在没有对angular的运行机制有所了解的情况下，我会认为代码会自上而下的执行，这样在.constant的代码执行之前，会先执行.run里面的方法。然而代码的最终执行结果表明，.constant内的代码运行应该是先于.run里面的代码。于是阅读angular的文档来找找原因。

constant和run是什么

angular比较核心的一个概念就是依赖注入,angular的模块化以及模块间的依赖管理都是基于此的。而这些依赖都是从哪里来的或者怎么自建一些依赖呢？这就需要自己定义一些Providers，angular提供了5种Provider recipe（恕@R_728_6618@翻译这个概念）: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...），给了我一些启发。
里面介绍了setupModuleLoader方法，该函数返回了一系列的API，用于Angular组织模块，注册指令、服务、控制器。
@H_403_47@
能够看到刚才前面介绍的configBlocks和runBlocks，这里要说明的是constant使用了unshift,将constant插入到队列的首部，这也就保证了constant在配置、运行之前能够在其他所有块中被注入。

再看下loadModules方法，这个方法用于加载模块，即返回需要运行的块，之前提到的constant和provider其实就是被加入了invokequeue之中，这只是注册并没有执行，在这个函数中调用runInovequeue才真正执行生成实例，也可以看出config是在run之前运行的：
@H_403_47@

解决问题

上面大致解释了一下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',//项目中请求服务端异步获取数据的接口
 }