Discover Angular's core concepts and advance to building a complete SPA. Gain hands-on experience by creating modules, components, forms, routing, and APIs in an e-commerce app.

angular_setup.tar.gz

angular

In this course, you will cover the most fundamental concepts of Angular, a popular JavaScript framework. You will learn everything about building a complete Angular app, setting up the development environment, and building your own single-page application (SPA).

You’ll start off by covering the basic building blocks of Angular such as modules, components, and directives. After that, the course will introduce you to some more advanced material that focuses on forms, routing, and dealing with APIs. 

By the end of this course, you will have gained hands-on experience by building a fully functional e-commerce application.

A Hands-on Guide to Angular

Services are used to provide data to different components by performing the common operation inside the service and then being able to pass it to any component that needs the data.

This ensures that the components only display the view and the services take care of fetching data and sharing it throughout the application.
 
You can define such tasks inside a service class. This class then provided to the components that inject this service using Angular’s dependency injection mechanism.

The separation of concerns is the main reason why Angular services came into existence. An Angular service is a stateless object and provides some very useful functions. These functions can be invoked using an Angular component.


# Creating an injectable service

```
ng generate service <service-name>
```

Creates 2 files for you:

- src/app/my-educative.service.spec.ts
- src/app/my-educative.service.ts

To create a service in Angular, we use the CLI to generate one with the decorator `@Injectable()`. This basically means that the service can be provided to the different components using Angular’s dependency injection mechanism.

```
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class MyChildService {
  constructor() { }
}
```

Here, 

```
providedIn: 'root'
```
means that the service should be created by the `root application injector`.

So, for example, a component called `ChildOneComponent` needs to have a service as a dependency so, instead of creating a new instance of the service using the new keyword in the component, we can inject the singleton service in whichever component and that would refer to the single existing instance of the service throughout the application.

We will know more about **Dependency injection** in some time.

# Injecting a service inside a component

As we saw earlier, the flow basically looks like the Injectable decorator marks the service as it can be injected. But to allow Angular to be able to inject it, we need to configure an **Angular dependency injector** with a provider of that service.
This is taken care of when `providedIn` or **`providers: []`** are defined in the service/module.

These providers are of different types, and we will look at those in detail in the next lesson.

The provider can be defined at a variety of places in your app:

- Service itself.
- NgModule
- Component

When injecting inside the service, we can use the `providedIn` attribute inside the @Injectable decorator.

```
@Injectable({
   providedIn: 'root'
})
```

OR

We can define it in the module using the providers array inside the **`@NgModule({})`**. Like so:

```
@NgModule({
   imports: [],
   exports: [],
   providers: [MyChildService]
})
```

OR similarly inside the component decorator using the providers array:

```
@Component({
  selector: 'app-my-child',
  providers: [MyChildService]
})
```

Finally, to inject it inside your component,

```
constructor(mychildservice: MyChildService)
```

This makes the service and its methods, variables available to the component which injects it.

For example, 

**service.ts**

```
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class MyChildService {
  getValue() { return value; }
}
```

**component.ts**

```
import { Component }   from '@angular/core';
import { MyChildService} from './my-child.service';

@Component({
  selector: 'app-child-bar',
  template: `
    <div>
       {{value}}
    </div>
  `
})
export class ChildBarComponent{
  public value: any;
  constructor(mychildservice: MyChildService) 
   {
    this.value= mychildservice.getValue();
   }
}
```

# Nested Services

You may want to separate your services feature-wise, to do that, you need to inject one service inside the other. This is done by simply injecting the service inside the constructor of the other service.

Like so:

```
@Injectable({
  providedIn: 'root',
})
export class MyChildService {

  constructor(private loggingService: LogService) { }

  getData(): Observable<any> {
    this.loggingService.request(URL).subscribe(data => return data);
  }
}
```

In this lesson, we will look at how to use services to communicate between components by sharing data, actions, features, etc.

Course Overview

Introduction to the Framework

Building Blocks of Angular

Basic Concepts in an Angular Application

Forms in Angular

Routing in Angular

Services and Dependency Injection

Dealing with APIs

Implement the Above in a E-commerce App

Login and Authentication

Summary and Resources

Communication Between Multiple Components