Angular : Service Injection vs Typescript Static Methods : <p>This might be a beginners question, the question is related to understanding why do we need injecting the services into components.</p>

<p><strong>1] Why do we need to inject the service to each component when we could just create a static method and it will return the same output and we're really not going to need to keep writing extra code for injecting these services?</strong></p>

<p>Let's say I have an authentication service like the one below with the normal convention:</p>

<pre><code>import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';

import { GlobalConfig } from "../global-config";

// Models
import { UserModel } from "../models/user-model";

@Injectable()
export class AuthenticationService {
    constructor(private http: Http) { }
    authenticate(user: UserModel): Observable&lt;UserModel&gt; {
        let userObject = this.http.post(GlobalConfig.getUrlFor('authentication'), user)
            .map((response: Response) =&gt; {
                let responseJSON = response.json();
                let userObj = &lt;UserModel&gt;{
                    UserId: responseJSON.UserId,
                    FirstName: responseJSON.FirstName,
                    LastName: responseJSON.LastName,
                    FullName: responseJSON.FullName,
                    Email: responseJSON.Email,
                    UserName: responseJSON.UserName,
                    Password: responseJSON.Password
                };
                return userObj;
            });
        return userObject;
    }
}
</code></pre>

<p>And in the view model, i would use it like that :</p>

<p>First: Inject the service </p>

<pre><code>constructor(private authService: AuthenticationService) {}
</code></pre>

<p>Second: Call it</p>

<pre><code>login() {
    this.authService.authenticate(this.user)
    .subscribe(
        p =&gt; {
            GlobalConfig.baseUser = p;
            localStorage.setItem('user', JSON.stringify(p));
            this.router.navigate(['/dashboard']);
        },
        e =&gt; {console.log('Error has Occured:', e); }
    );
}
</code></pre>

<p><strong>But If I in the first place made that authenticate method in the authentication service Static all I would have done is the following:</strong></p>

<pre><code>login() {
    AuthenticationService.authenticate(this.user)
    .subscribe(
        p =&gt; {
            GlobalConfig.baseUser = p;
            localStorage.setItem('user', JSON.stringify(p));
            this.router.navigate(['/dashboard']);
        },
        e =&gt; {console.log('Error has Occured:', e); }
    );
}
</code></pre>

<p><strong>And I wouldn't have needed to inject it or write in extra necessary work.</strong></p>

<p>I know Service injection is the known good practice but I really don't understand why. Appreciate if someone would explain more to me.</p>
