ANGULAR2 Introductory Series Tutorials-Services

Previous Article Angular2 Introductory series Tutorials-Multiple components, master-Slave relations

In programming, we typically separate the data provided to avoid repeatedly copying the code that pastes the data request during the program's writing

The concept of dependency injection is provided in Angular2 so that we can do it gracefully. Simply described here, dependency injection allows us to write code without using new to generate a class, so as to achieve the purpose of understanding decoupling, more about dependency injection knowledge I don't think I should explain here

Similar to other methods, ANGULAR2 uses the adorner @injectable () to describe whether a class can be injected, and the purpose of this article is to peel off the data acquisition and provide a reusable service that can be injected.

For convenience, we create a blog.service.ts file directly in the previous Data folder directory, what do you want to do with this file? is to articlecomponent in the previous method to get the blog out of the way to become a completely independent module, as for the articlecomponent, we use the method of dependency injection, to inject our services, direct use, see the code

　　

Import {injectable} from ' @angular/core './blog '; @Injectable () Export class Blogservice {  getblogs () : blog[] {    return  BLOGS;  }  Getselectedblog (id:number): Blog  {     returnthis. Getblogs (). Find (x=>x.id== ID);}  }

As we said earlier, we use @injectable () to decorate our blogservice so that we can inject this service into other components, see appcomponent, and we find a little bit of change before

　　

 Import {Component} from ' @angular/core ' ;import {blogs,blog} from  '. /data/blog ' ;import {blogservice} from  './. /data/blog.service '  ' ngarticle '  './    Article.component.css '  this . Bloglist=bservice.getblogs (); } selectblog (Id:number) { this . Selectedblog=this  .bservice.getselectedblog (ID); }}

We use the Blogservice parameter in the Appcomponent constructor, which allows us to use our service arbitrarily within its class (in fact, you don't really care how dependency injection works, you need to understand that it's decoupling the programming)

And when we use NG serve to run with gusto, we find out, how to error?

　　

We see ANGULAR2 give us the hint is blogservice no provider;

We need to add such a sentence to the @component () adorner of the Appcomponent component

　　Providers:[blogservice]

Provider's role is to tell angular that when we initialize appcomponent, we also create an instance of Blogservice, so that we can use the

　　

Okay, so here we just need to change the parameters of the function that gets detail in appcomponnet.html.

　　

<div class= "article" >    <ul class= "articlelist" >            <li *ngfor= "Let blog of BlogList" (click) = " Selectblog (blog.id) >                <a>                   {{blog.id}}:{{blog.title}}                </a>            </li>    </ul>    <div>    <article-detail  [blog]= "Selectedblog" ></article-detail>            </div></div>

Run the effect, actually and the previous code is the same, but still paste it

Next we are going to continue to learn how to use the HTTP requests in angular and angualr, and in the HTTP request Chapter we will expand the promise-based asynchronous programming and observable (observable object) learning in JS, en route, We will also explain how to use jquery! in ANGULAR2

I don't seem to be blind, that's all.

Update ing ...

　　

The project has been put on the Gitbub, address https://github.com/SeeSharply/LearnAngular

Submission of this article https://github.com/SeeSharply/LearnAngular/tree/df1cd319b3571622242ae4d1b424a5d9e853ed93

Angular2 Getting Started tutorial-services