Problem record in angular development

Time:2020-11-28

Some front-end pages of the company’s management background are developed by angular. Thanks to angular’s bi-directional binding and modular controller, the construction of crud application on PC side is much simpler. Angular has many concepts that are difficult to understand. It is not as simple as Vue to start with. However, it is feasible to look at the template project, look at the tutorial, read the project code, and then write some business functions based on the project code. If you want to use some advanced functions, you have to study hard.

Problems encountered

In the development of such a problem, first on the code

'use strict';
var domain = ' http://localhost : 1337 '; // server address in the development environment,
var MY_ DOMAIN = ' http://production.com '; // the website address of the generated environment
angular.module('adminApp').run(function($location) {
    if ($location.host() !== 'localhost') {
      domain = MY_DOMAIN;
    }
  })
  .constant('myConfig', {
    host: domain,
    domain: domain,
    api:  this.domain  +'/ admin', // the interface in the project that requests the server to obtain data asynchronously
 }

At first glance, the above code appears to automatically switch the server address of the production and development environment. However, after deployment, it is found that this code does not seem to be effective, and the domain is always’ domain ‘http://localhost:1337‘is not assigned my by judging host_ DOMAIN。
Without knowing the operating mechanism of angular, I would think that the code will be executed from top to bottom, so that the methods in. Run will be executed before the code of. Constant is executed. However, the final execution of the code shows that the code in. Constant should run before the code in. Run. So read angular’s documentation to find out why.

What are constant and run

The core concept of angular is thatDependency injectionThe modularization of angular and dependency management between modules are based on this. Where do these dependencies come from or how do you build your own dependencies? You need to define yourselfProvidersAngular provides five kinds of provider Recipes (I don’t know how to translate this concept): factory, service, value, constant and provider. Here we only care about constant. The official document describes that constant is used to provide simple objects without dependency for the configuration phase and run phase. In other words, the objects or basic types defined in the constant can be injected into run and 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  
 })

What is the operation and configuration phase? The official document says:

A module is a collection of configuration and run blocks which get applied to the application during the bootstrap process. In its simplest form the module consists of a collection of two kinds of blocks:
1.Configuration blocks – get executed during the provider registrations and configuration phase. Only providers and constants can be injected into configuration blocks. This is to prevent accidental instantiation of services before they have been fully configured.
2.Run blocks – get executed after the injector is created and are used to kickstart the application. Only instances and constants can be injected into run blocks. This is to prevent further system configuration during application run time.

The modules described above are actually a collection of configuration blocks and running blocks. These blocks are added to the modules during the startup of angular. Configuration blocks and run blocks can be understood as queues. A module can write multiple. Run and. Config, which are added to the corresponding blocks in turn. Config can only inject provider and constant recipe, while run can only inject instance (not providers) and constant recipe. But I test that value recipe can be injected into run. OK, I admit that angular document is really hard to understand.

In short, I think that in a word, constant can be understood as constant used by angular to provide modules with injectable constants (simple objects or types without dependency) shared by all modules and defined before the config and run phases. (just personal understanding)

Execution order

It is said that constant should be executed before run, but this is just the appearance of the program running. Why is this so? I searched angular’s startup process. In this article, we analyzed the startup process of angular(http://liuwanlin.info/angular…)That gave me some inspiration.
It introduces the setup module loader method, which returns a series of APIs for angular organization modules, registering instructions, services and controllers.
Problem record in angular development
We can see the configblocks and runblocks described earlier. Here, we need to explain that constant uses unshift to insert constant into the head of the queue. This ensures that constant can be injected into all other blocks before configuration and operation.

Let’s look at the loadModules method again. This method is used to load the module, that is, to return the blocks that need to be run. The constant and provider mentioned before are actually joined in invokequeue. This is only the registration is not executed. In this function, runInovequeue is actually executed to generate the instance, and config can be run before run.
Problem record in angular development

solve the problem

The above explains the reason why constant is executed before run, which is why the code written at the beginning of the article did not execute as expected. If we know the reason and know that the defined constant can be injected into. Run, we know that we can get the desired results only by changing the code slightly

'use strict';
var domain = ' http://localhost : 1337 '; // server address in the development environment,
var MY_ DOMAIN = ' http://production.com '; // the website address of the generated environment
angular.module('adminApp').run(function($location, myConfig) {
    if ($location.host() !== 'localhost') {
      myConfig.domain = MY_DOMAIN;
      myConfig.api  = myConfig.domain  +'/ admin'; // don't expect the domain in myconfig to follow the changes of the domain variable. Once an object is created, its property value is fixed. If you want to modify it, you can only access the attribute modification through the object.
    }
  })
  .constant('myConfig', {
    host: domain,
    domain: domain,
    api:  this.domain  +'/ admin', // the interface in the project that requests the server to obtain data asynchronously
 }

Reference documents:

angular providers
angular modular
dependency injection
Differences of several providers (factory, service, provider) in angularjs
Angularjs source Reading 1: startup process