Tuesday, October 25, 2022
Angular tutorial part 5 : Learn Angular Routing and testing
Routing and
Routing
in Angular
• Component Router
• Navigating Routes
• Route Parameters
• Query Parameters
• Child Routes
Implement
routes first in app routing module
•
Basically this
helps creating menus to help user navigate to various components and pass
parameters to components.
•
There are various
ways routes can be implemented.
• One of the best ways => In application
Routing module import the route dependencies import { Routes, RouterModule ,ActivatedRoute } from '@angular/router';
• Routes take 2 params,the path name
and the target component,all the app routes can be defined here
• const routes: Routes = [{path: 'Main', component:AppComponent}, {path: 'Form', component: FormappComponent},];
• Pass this routes to
the NGModule imports
• @NgModule({
• imports: [RouterModule.forRoot(routes)],
• exports: [RouterModule]
• })
• To create a default
routing module when component is created ,use the cli command
• ng g m [ModuleName]
--routing
Create
a new Menu component
•
Generate a new
component within the app called menu
•
Add the menu links
• Welcome To Menu
• <nav> <a class="button" routerLink="Main">Main</a> |
• <a class="button" [routerLink]="['Form',{value1: 'bar'}]">USerForm1</a> </nav>
• <router-outlet></router-outlet>
•
Router link param
takes two params to genereate hyperlink 1. routename defined in route,then
param if needed to be sent to second component.
•
Redirect the
application now to point to this menu component as entry point,to do that
•
Change the
bootstrap in the appmodule to menucomponent
• bootstrap: [MenuComponent ]
• Now when the application starts you will see the 2
menu links ->main and form,each pointing to the component we have created
earlier and defined in the routes
•
Passing
and Reading params
•
Routerlink can take
route and params as inputs,the following router link redirects to form
component and sends a param value1 .
•
<a class="button" [routerLink]="['Form',{value1: 'bar'}]">USerForm1</a> </nav>
•
To Read the param
in the target component,we will use activatedroute module
• import { Router,ActivatedRoute } from '@angular/router';
and inject
•
In component
constructor only constructor(private _Activatedroute:ActivatedRoute,) { }
•
And in the components of form,we will read the
params,using activatedroute,parammap and an observable.
•
this._Activatedroute.paramMap.subscribe(params => {
•
console.log(params);
•
console.log(params.get('value1'));//params passed to this component by routing
•
Component Router
• • Use the
router-outlet directive to tell Angular where you
• want a route to put
its template <router-outlet></
• router-outlet>
Adding
the routeconfig to component or module
• @RouteConfig([
• {path: '/home', name: 'Home', component:
HomeComponent, useAsDefault: true},
• {path: '/about', name: 'About', component:
AboutComponent},
• {path: '/experiments', name: 'Experiments',
component: ExperimentsComponent}
• ])
• export class
AppComponent {}
• <div
id="container">
• <router-outlet></router-outlet>
• </div>
Navigating
Routes
• Add a routerLink
attribute directive to an anchor tag
• Bind it to a template expression that
returns an array of route link parameters Users
•
Navigate imperatively by importing Router, injecting it, and then calling
.navigate() from within a component method
• We pass the same array of parameters as
we would to the routerLink directive this._router.navigate( ['Users'] );
• <div
id="menu">
• <a [routerLink]="['/Home']"
class="btn">Home</a>
• <a [routerLink]="['/About']"
class="btn">About</a>
• <a
[routerLink]="['/Experiments']"
class="btn">Experiments</a>
• </div>
Routerlink
• Add a routerLink
attribute directive to an anchor tag
• Bind it to a template expression that
returns an array of route link parameters Users
•
Navigate imperatively by importing Router, injecting it, and then calling
.navigate() from within a component method
• We pass the same array of parameters as
we would to the routerLink directive this._router.navigate( ['Users'] );
• Programmatically allows you to navigate to
path
export class App {
constructor(private _router: Router) {}
navigate(route) {
this._router.navigate([`/${route}`]); }
}
Query Parameters
• Denotes an optional value for a
particular route
• Do not add query parameters to the route
definition
• { path:'/users',
name: UserDetail, component:
• UserDetail }
• Add as a parameter to the routerLink
template
• expression just
like router params: <a
• [routerLink]="['Users',
{id: 7}]"> {{user.name}} </a>
• Also accessed by injecting RouteParams
into a component
Query
Params
•
<div>
•
<button
[routerLink]="['./MyComponent', {id: 1}]">
•
My Component Link</button>
•
<button
[routerLink]="['./AnotherComponent', {queryParam: 'bar'}]">
•
Another Component Link</button>
•
</div>
•
Com
Query
Params
• import { Component
} from 'angular2/core';
• import {
RouteParams } from 'angular2/router';
• @Component({
• selector: 'my-component',
• template: `<h1>my component
({{routeParams.get('id')}})!</h1>`
• })
• export class
MyComponent {
• constructor(routeParams: RouteParams) {
• this.routeParams = routeParams;
• }
• }
Child
Routes
• Ideal for creating reusable components
• Components with child routes are
“ignorant” of the parents’ route implementation
• In the parent route config, end the path
with /…
• In the child config, set the path
relative to the parent path
• If more than one child route, make sure
to set the default route
Child
Routes
• @RouteConfig([ {
• path:'/another-component/...',
• name: 'AnotherComponent',
• component: AnotherComponent }
• ])
• export class App
{}@RouteConfig([
• {
• path:'/first', name: 'FirstChild',
• component: FirstSubComponent }])
• export class
AnotherComponent {}
Testing
• Testing is good practise and mandatory in any project.
• Testing helps remove bugs and also check the
functionality of your application.
• Angular wraps
Jasmine methods
•
Import all necessary Jasmine methods from angular11/
•
testing
• Import the classes to test
•
Include providers by importing beforeEachProviders
• and then calling it
with a method that return
• TestBed is the
primary api for writing unit tests for Angular applications and libraries.
• Methods
• compileComponents()
• inject()
• get()
• execute()
• overrideModule()
• overrideComponent()
• overrideDirective()
• overridePipe()
• overrideProvider()
• overrideTemplateUsingTestingModule()
• createComponent()
Testing
a component
•
Create a component
with title =I love pizza
•
import
{ Component, OnInit } from '@angular/core';
•
@Component({
•
selector: 'app-pizza', templateUrl: './pizza.component.html',
styleUrls: ['./pizza.component.css']
•
})export
class PizzaComponent implements OnInit {
•
title = "I love pizza!" constructor() { } ngOnInit() {
}}
•
We will create a
test to see that component is create with title “I love pizza”
Testing
a component (contd..)
• Writing tests in
Angular is easy, now we are going to write a simple test within the describe() function.
• it(`should have a
title 'I love pizza!'`, async(() => { //test has to be written within it
• fixture =
TestBed.createComponent(PizzaComponent);
//create an instance of the component using testbesd class
• component =
fixture.debugElement.componentInstance; //once the component is rendered
• expect(component.title).toEqual('I love
pizza!');//check for whether the component title is equal to “I love pizza”
• //expect asserts or compares values to expected values
• }));
•
Run ng test
• To specifically test one test spect only ->ng test --main
./src/app/app.component.spec.ts
Testing
services
• To test a service,
you set the providers metadata property with an array of the services that
you'll test or mock.
• let service:
MyserviceService;
• beforeEach(() =>
{ TestBed.configureTestingModule({
providers: [MyserviceService
• ] });});
• Then inject it
inside a test by calling TestBed.inject() with the service class as the
argument.
• it('should use
ValueService', () => { service = TestBed.inject(MyserviceService
• );
expect(service.showTodayDate()).toBe('real value'); });
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment