Please enable JavaScript.

Coggle requires JavaScript to display documents.

Routing - Coggle Diagram

- - - - ActivatedRoute
        
        RouterState
        
        The ActivatedRoute is a service, which keeps track of the currently activated route associated with the loaded Component.
        
        Provide two parameter which contain the route parameter
        
        ParamMap
        
        Angular adds the map of all the route parameters in the ParamMap object, which can be accessed from the ActivatedRoute service
        
        get
        
        getAll
        
        has
        
        Reading the Route Parameters
        
        Using the Snapshot property of the ActivatedRoute
        
        2 more items...
        
        Subscribing to the paramMap or params observable property of the ActivatedRoute
        
        1 more item...
        
        Params
        
        The Angular ActviatedRoute also maintains the Route Parameters in the Params array. The Params array is a list of parameter values, indexed by name.
        
        Using Snapshot
        
        1 more item...
        
        Using Observable
        
        1 more item...
        
        More Information Activated Route Holds
        
        url
        
        This property returns an array of Url Segment objects, each of which describes a single segment in the URL that matched the current route
        
        params
        
        This property returns a Params object, which describes the URL parameters, indexed by name.
        
        queryParams
        
        This property returns a Params object, which describes the URL query parameters, indexed by name.
        
        fragment
        
        This property returns a string containing the URL fragment
        
        Snapshot
        
        The initial snapshot of this route
        
        data
        
        An Observable that contains the data object provided for the route
        
        Component
        
        outlet
        
        routeConfig
        
        parent
        
        firstChild
        
        children
    - - <a [routerLink]="['/Product', product.productID]">{{product.name}} </a>
        
        <a [routerLink]="['/Product', ‘2’]">{{product.name}} </a>
        
        this.router.navigate(['/products'. product.productID] })
      - routerLinkActive
        
        [routerLinkActive]="['active','home']"
        
        routerLinkActive="active" (or)
        
        [routerLinkActiveOptions]="{exact:true}"
        
        This will make the RouterLinkactive to be applied only if the route URL matches exactly to the current URL without exact true, if part of url match then it redirect. Example Client/ and Client/One if you click on the second one along with second one 1st one also get activated
        
        <a routerLink="/product" routerLinkActive="class1 class1" [routerLinkActiveOptions]="{exact: true}">Product</a>
    - - The Route Parameters are a dynamic part of the Route and essential in determining the route
        
        { path: 'product/:id', component: ProductDetailComponent }
        
        { path: 'product/:id/:id1/:id2', component:ProductDetailComponent}
- - - - To make HTML5 routing work, we need to set up the “base href” in the DOM. This is done in the index.html file immediately after the head tag.
        
        The Angular Router uses the HTML5 style of Routing (or PathLocationStrategy) as the default option
    - - Create a file with the name app-routing.module.ts
        
        const appRoutes: Routes = [{ path: 'one', component: CompoOneComponent }];
        
        Route tells the Angular Router which view to display when a user clicks a link or pastes a URL into the browser address bar.
        
        Every Route consists of a path and a component it is mapped to
        
        Default Route
        
        { path: '', redirectTo: 'home', pathMatch: 'full' }
        
        1 more item...
        
        Wild Card Route
        
        { path: '**', component: ErrorComponent }
        
        Order matters: First one wins
      - Register the Routes
        
        imports: [RouterModule.forRoot(appRoutes)]
        
        Routes is an array of Route objects our application supports
        
        The forRoot method is used, when you want to provide the service and also want to configure the service at the same time
        
        Map Action to Routes
        
        <li><a [routerLink]="['product']">Product</a></li>
        
        The routerLink directive accepts an array of route names along with parameters. This array is called a Link Parameters array.
        
        Choose where you want to display
        
        <router-outlet></router-outlet>
        
        we need to tell the angular where to display the view. This is done using the RouterOutlet directive
- - - - HasLocationStrategy uses anchor tags technique, The anchor tags, when used along with the # allows us to jump to a place, within the web page
        
        Support old supports
    - - introduction of HTML5, now allows browsers to programmatically alter the browser’s history through the history object(history.pushState())
        
        SEO Friendly,Do not support old browsers