Service Module

• Used for duplication of code
  • The same code can be used in multiple components
• Providing data
  • If certain data in a component needs to be accessed
• Should NOT create services manually.  By that I mean, do not import and create instances of the service to use it. Why?
• Angular’s Dependency Injector (Hierarchical Injector)
  • Used to inject the instance of a class to a component automatically
  • Remember, when you provide a service to a certain component, that component and all its children will receive the same instance of that service.
  • How to tell the component that you need that class?
    • Import the service
    • Create the constructor to tell angular what we what. But how?
      • constructor(private anyName: ClassName){}
    • Provide the service. How?
      • Add a providers array in the @Component located at the top of any component
    • Then access the method you created.
    • Why is it better to use Angular’s Dependency Injector.
      • It does it automatically
      • Let’s you stay in the Angular ecosystem.

How to inject a service into another service?

• add a constructor with the service you want to inject as a parameter
  • constructor(private anyName: ClassName){}
• Use the methods of the service class
• @Injectable – add it to the service where you injecting the service. The service which will receive the service should have the annotation, injectable.

Routing

• Steps to create a route
  • Import Routes into app.module.ts
    • Import { Routes } from ‘@angular/router”;
  • Create a constant of type Routes in to the app.module.ts
    • const appRoutes: Routes = [];
    • Insert an array of your routes
    • { path: ‘name’, component: ComponentName }
    • Path – What path do you want to route to?
    • Component – defines which component gets loaded/ the page that gets loaded
• To register a router you created,
  • add RouterModule.forRoot(CONSTANT_NAME_OF_ROUTES) to the imports[] array in the app.module.ts
• Where to insert the routes
  • In your app.component.html, you have add a special directive called <router-outlet>
• How should you implement the Navigation bar in Angular?
  • Use the special directive called routerLink = “/”
  • Array structure – [routerLink] = [‘/something’, ‘something’]
  • Using property binding
• Navigating Programmatically
  • In a component, add the constructor for Router
    • Syntax: constructor(private router: Router){}
    • Create a method
      • Use navigate method from Router
      • Syntax: this.router.navigate([‘/mappingName’])
    • Navigate method
      • The navigate method doesn’t do relative path
        • Use ActivatedRoute to get the relative path
        • Add it to the constructor
        • Syntax: this.router.navigate([‘mapping’], {relativeTo: this. Route});
• Fetching Route Parameters
  • Parameters can be set in the path of a certain component
    • { path: ‘name/:parameter1/:parameter2’, component: ComponentName }
    • In a ngOnInit, you can have access that have been defined in the route path
    • Syntax: parameterName: this.route.snapshot.params[‘parameterName’]
    • Angular will only initialize its component once so any new changes in the current component will not reflect to the page. How to solve it?
      • Use the route .params.subscribe() method
      • Then assign each of them to the params