Understand the role of APP_INITIALIZER in Angular-JS Tutorial-php.cn

Understand the role of APP_INITIALIZER in Angular

一个新手

Release： 2017-10-26 10:53:49

Original

3094 people have browsed it

Sometimes, you may need to load some simple data or do simple verification when the application is initialized. Most of the methods are to do this in the main component component, but it is difficult to ensure effective use in other components. Is there an updated way to do this? Please continue reading. .

What is the role of APP_INITIALIZER in Angular?

The official documentation describes this: APP_INITIALIZER is a function that is called when the application is initialized. This means that it can be configured in the form of a factory through the providers of the AppModule class, and the application will wait for it to complete loading before proceeding to the next step, so it is only suitable for loading simple data here.

Example

Create a new project

ng new example --skip-install
npm install # yarn install

Copy after login

Configure Provider

First create a provider, which will return a Promise object after the request parsing is completed

@Injectable()
export class JokesProvider {
    private joke:JokeModel = null;
  
      constructor(private http:Http){
        
    }
  
      public getJoke(): JokeModel {
        return this.joke;
    }
  
      load() {
        return new Promise((resolve,reject) => {
            this.http.get(url)
                      .map(r=>r.json())
                      .subscribe(r=> {
                     this.joke = r[&#39;value&#39;];
              resolve(true);
            })
        })
    }
}

Copy after login

There will be three processes here:

The getJoke() method directly returns the data currently saved by joke when called by other components or modules
Private attribute joke will save the currently requested data
The load() function will be called immediately when the application is initialized

Create Provider Factory

export function jokesProviderFactory(provider: JokesProvider){
    return () => provider.load();
}

Copy after login

Register JokesProvider and APP_INITIALIZER

@NgModule({
    declarations:[
        AppComponent
    ],
      imports:[
        BrowserModule,// required
          HttpModule// required
    ],
      providers: [
        JokesProvider,
          {
            provide:APP_INITIALIZER,useFactory: jokesProviderFactory,
              deps:[JoesProvider], multi:true
        }
    ],
      bootstrap:[AppComponent]
})
export class AppModule { }

Copy after login

App

<p>@Component({<br/>    selector:&#39;app&#39;,<br/>    template:`<h1>Joke of the day: </h1><p>{{jokeModel.joke}} </p>`<br/>})<br/>export class AppComponent implements OnInit{<br/>  title = &#39;app&#39;;<br/>  jokeModel : JokeModel;<br/>  <br/>  constructor(jokesProvider: JokesProvider){<br/>      this.jokeModel = jokesProvider.getJoke();<br/>  }<br/>  <br/>  ngOnInit(){<br/>      console.log(&#39;AppComponent: OnInit()&#39;);<br/>  }<br/>}  <br/></p>

Copy after login

The above is the detailed content of Understand the role of APP_INITIALIZER in Angular. For more information, please follow other related articles on the PHP Chinese website!