Angular 2
रूटिंग

बेसिक रूटिंग

राउटर अनुप्रयोग के साथ उपयोगकर्ता की बातचीत के आधार पर एक दृश्य से दूसरे तक नेविगेशन को सक्षम बनाता है।

निम्नलिखित कोणीय 2 में बुनियादी मार्ग को लागू करने के चरण हैं -

मूल सावधानी : सुनिश्चित करें कि आपके पास टैग है

    <base href='/'> 

आपकी index.html फ़ाइल में आपके हेड टैग के तहत पहला बच्चा है। यह टैग बताता है कि आपका ऐप फ़ोल्डर एप्लिकेशन रूट है। कोणीय 2 तो अपने लिंक को व्यवस्थित करने के लिए पता होगा।

पहला कदम यह जांचना है कि क्या आप पैकेज में सही / नवीनतम रूटिंग निर्भरता की ओर इशारा कर रहे हैं।

"dependencies": {
  ......
  "@angular/router": "3.0.0-beta.1",
  ......
}

दूसरा चरण वर्ग परिभाषा के अनुसार मार्ग को परिभाषित करना है -

class Route {
  path : string
  pathMatch : 'full'|'prefix'
  component : Type|string
  .........
}

एक रूट फ़ाइल ( route/routes.ts ) में, उन सभी घटकों को आयात करें जिन्हें आपको अलग-अलग मार्ग के लिए कॉन्फ़िगर करने की आवश्यकता है। खाली पथ का मतलब है कि दृश्य डिफ़ॉल्ट रूप से लोड किया गया है। पथ में ":" लोड किए गए घटक को दिए गए डायनामिक पैरामीटर को इंगित करता है।

निर्भरता इंजेक्शन के माध्यम से आवेदन के लिए मार्ग उपलब्ध कराया जाता है। प्रोवाइडर राउटर विधि को पैरामीटर के रूप में राउटरकॉन्फ के साथ बुलाया जाता है ताकि रूटिंग विशिष्ट कार्यों को कॉल करने के लिए घटकों को इंजेक्ट किया जा सके।

import { provideRouter, RouterConfig } from '@angular/router';
import { BarDetailComponent } from '../components/bar-detail.component';
import { DashboardComponent } from '../components/dashboard.component';
import { LoginComponent } from '../components/login.component';
import { SignupComponent } from '../components/signup.component';

export const appRoutes: RouterConfig = [
  { path: '', pathMatch: 'full', redirectTo: 'login' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'bars/:id', component: BarDetailComponent },
  { path: 'login', component: LoginComponent },
  { path: 'signup',   component: SignupComponent }
];

export const APP_ROUTER_PROVIDER = [provideRouter(appRoutes)];

तीसरा कदम रूट प्रदाता को बूटस्ट्रैप करना है।

आपके main.ts (यह किसी भी नाम हो सकता है। मूल रूप से, यह आपके मुख्य फाइल को systemjs.config में परिभाषित किया जाना चाहिए)

import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './components/app.component';
import { APP_ROUTER_PROVIDER } from "./routes/routes";

bootstrap(AppComponent, [ APP_ROUTER_PROVIDER ]).catch(err => console.error(err));

चौथा चरण एक्सेस एक्सेस के आधार पर राउटर घटकों को लोड / प्रदर्शित करना है। निर्देश का उपयोग कोणीय को यह बताने के लिए किया जाता है कि घटक को कहां लोड किया जाए। आयात करने के लिए ROUTER_DIRECTIVES का उपयोग करें।

import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
  selector: 'demo-app',
  template: `
    ....................................
    <div>
      <router-outlet></router-outlet>
    </div>
    ....................................
  `,
  // Add our router directives we will be using
  directives: [ROUTER_DIRECTIVES]
})

पांचवां चरण अन्य मार्गों को जोड़ने के लिए है। डिफ़ॉल्ट रूप से, RouterOutlet उस घटक को लोड करेगा जिसके लिए RouterConfig में खाली पथ निर्दिष्ट है। मार्गों से जुड़े घटकों को लोड करने के लिए html एंकर टैग के साथ राउटरलिंक निर्देश का उपयोग किया जाता है। राउटरलिंक href विशेषता उत्पन्न करता है जिसका उपयोग लिंक उत्पन्न करने के लिए किया जाता है। पूर्व के लिए:

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
  selector: 'demo-app',
  template: `
    <a [routerLink]="['/login']">Login</a>
    <a [routerLink]="['/signup']">Signup</a>      
    <a [routerLink]="['/dashboard']">Dashboard</a>
    <div>
      <router-outlet></router-outlet>
    </div>
  `,
  // Add our router directives we will be using
  directives: [ROUTER_DIRECTIVES]
})
export class AppComponent { }

अब, हम स्थैतिक पथ के मार्ग के साथ अच्छे हैं। राउटरलिंक पथ के साथ अतिरिक्त मापदंडों को पारित करके गतिशील पथ का भी समर्थन करता है।

'@ कोणीय / कोर' से आयात {घटक}; '@ कोणीय / राउटर' से {ROUTER_DIRECTIVES} आयात करें;

@Component({
  selector: 'demo-app',
  template: `
        <ul>
          <li *ngFor="let bar of bars | async">
            <a [routerLink]="['/bars', bar.id]">
              {{bar.name}}
            </a>
          </li>
        </ul>
    <div>
      <router-outlet></router-outlet>
    </div>
  `,
  // Add our router directives we will be using
  directives: [ROUTER_DIRECTIVES]
})
export class AppComponent { }

राउटरलिंक एक सरणी लेता है जहां पहला तत्व मार्ग के लिए मार्ग है और बाद के तत्व गतिशील मार्ग पैरामीटर के लिए हैं।

बाल मार्ग

कभी-कभी यह एक दूसरे के भीतर दृश्य या मार्गों को घोंसला बनाने के लिए समझ में आता है। डैशबोर्ड पर उदाहरण के लिए, आप उपयोगकर्ताओं के प्रोजेक्ट, संपर्क, संदेश ईटीएस दिखाने के लिए टैब के समान, लेकिन राउटिंग सिस्टम के माध्यम से लागू किए गए कई उप दृश्य चाहते हैं। ऐसे परिदृश्यों का समर्थन करने के लिए राउटर हमें बाल मार्गों को परिभाषित करने की अनुमति देता है।

पहले हम अपने RouterConfig को ऊपर से समायोजित करते हैं और बाल मार्गों को जोड़ते हैं:

import { ProjectsComponent } from '../components/projects.component';
import { MessagesComponent} from '../components/messages.component';

export const appRoutes: RouterConfig = [
  { path: '', pathMatch: 'full', redirectTo: 'login' },
  { path: 'dashboard', component: DashboardComponent,
    children: [
      { path: '', redirectTo: 'projects', pathMatch: 'full' },
      { path: 'projects', component: 'ProjectsComponent' },
      { path: 'messages', component: 'MessagesComponent' }
    ] },
  { path: 'bars/:id', component: BarDetailComponent },
  { path: 'login', component: LoginComponent },
  { path: 'signup',   component: SignupComponent }
];

अब जब हमारे पास हमारे बाल मार्ग परिभाषित हैं, तो हमें यह सुनिश्चित करना होगा कि उन बाल मार्गों को हमारे DashboardComponent भीतर प्रदर्शित किया जा सकता है, क्योंकि हमने चिल्ड्रन्स को इसमें जोड़ा है। पहले हमने सीखा है कि घटक <router-outlet></router-outlet> टैग में प्रदर्शित होते हैं। इसी तरह से हम DashboardComponent में एक और RouterOutlet घोषणा करते हैं:

import { Component } from '@angular/core';

@Component({
  selector: 'dashboard',
  template: `
    <a [routerLink]="['projects']">Projects</a>
    <a [routerLink]="['messages']">Messages</a>   
    <div>
      <router-outlet></router-outlet>
    </div>
  `
})
export class DashboardComponent { }

जैसा कि आप देख सकते हैं, हमने एक और RouterOutlet जोड़ा है जिसमें बाल मार्गों को प्रदर्शित किया जाएगा। आमतौर पर एक खाली पथ वाला मार्ग दिखाया जाएगा, हालांकि, हम projects मार्ग पर एक रीडायरेक्ट सेट करते projects , क्योंकि हम चाहते हैं कि dashboard मार्ग लोड होने पर तुरंत दिखाया जाए। कहा जा रहा है, हमें एक खाली मार्ग की आवश्यकता है, अन्यथा आपको इस तरह एक त्रुटि मिलेगी:

Cannot match any routes: 'dashboard'

इसलिए खाली मार्ग को जोड़कर, जिसका अर्थ है खाली मार्ग वाला मार्ग, हमने राउटर के लिए एक प्रवेश बिंदु को परिभाषित किया है।

ResolveData

यह उदाहरण आपको दिखाएगा कि आप अपने आवेदन के दृष्टिकोण को प्रस्तुत करने से पहले किसी सेवा से प्राप्त डेटा को कैसे हल कर सकते हैं।

लेखन के समय कोणीय / राउटर 3.0.0-beta.2 का उपयोग करता है

users.service.ts

...
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { User } from './user.ts';



@Injectable()
export class UsersService {

    constructor(public http:Http) {}

    /**
     * Returns all users
     * @returns {Observable<User[]>}
     */
    index():Observable<User[]> {

        return this.http.get('http://mywebsite.com/api/v1/users')
            .map((res:Response) => res.json());
    }

    /**
     * Returns a user by ID
     * @param id
     * @returns {Observable<User>}
     */
    get(id:number|string):Observable<User> {

        return this.http.get('http://mywebsite.com/api/v1/users/' + id)
            .map((res:Response) => res.json());
    }
}

users.resolver.ts

...
import { UsersService } from './users.service.ts';
import { Observable } from 'rxjs/Rx';
import {
    Resolve,
    ActivatedRouteSnapshot,
    RouterStateSnapshot
} from "@angular/router";




@Injectable()
export class UsersResolver implements Resolve<User[] | User> {

    // Inject UsersService into the resolver
    constructor(private service:UsersService) {}

    resolve(route:ActivatedRouteSnapshot, state:RouterStateSnapshot):Observable<User[] | User> {
        // If userId param exists in current URL, return a single user, else return all users
        // Uses brackets notation to access `id` to suppress editor warning, may use dot notation if you create an interface extending ActivatedRoute with an optional id? attribute
        if (route.params['id']) return this.service.get(route.params['id']);
        return this.service.index();
    }
}

users.component.ts

यह सभी उपयोगकर्ताओं की सूची के साथ एक पृष्ठ घटक है। यह उपयोगकर्ता विवरण पृष्ठ घटक के लिए समान रूप से काम करेगा, data.users को data.user या जो भी कुंजी app.routes.ts में परिभाषित करता है (नीचे देखें) को बदलें।

...
import { ActivatedRoute} from "@angular/router";



@Component(...)
export class UsersComponent {

    users:User[];


    constructor(route: ActivatedRoute) {
        route.data.subscribe(data => {
            // data['Match key defined in RouterConfig, see below']
            this.users = data.users;
        });
    }

    /**
     * It is not required to unsubscribe from the resolver as Angular's HTTP
     * automatically completes the subscription when data is received from the server
     */
}

app.routes.ts

...
import { UsersResolver } from './resolvers/users.resolver';



export const routes:RouterConfig = <RouterConfig>[
    ...
    {
        path: 'user/:id',
        component: UserComponent,
        resolve: {
            // hence data.user in UserComponent
            user: UsersResolver
        }
    },
    {
        path: 'users',
        component: UsersComponent,
        resolve: {
            // hence data.users in UsersComponent, note the pluralisation
            users: UsersResolver
        }
    },
    ...
]
...

app.resolver.ts

वैकल्पिक रूप से कई रिज़ॉल्वर को एक साथ बंडल करें।

महत्वपूर्ण: रिज़ॉल्वर में उपयोग की जाने वाली सेवाओं को पहले आयात किया जाना चाहिए या आपको 'नो प्रोवाइडर फॉर ..Resolver एरर' मिलेगा। याद रखें कि ये सेवाएँ विश्व स्तर पर उपलब्ध होंगी और आपको इन्हें किसी भी घटक के providers में घोषित करने की आवश्यकता नहीं होगी। स्मृति रिसाव को रोकने के लिए किसी भी सदस्यता से सदस्यता समाप्त करना सुनिश्चित करें

...
import { UsersService } from './users.service';
import { UsersResolver } from './users.resolver';

export const ROUTE_RESOLVERS = [
    ...,
    UsersService,
    UsersResolver
]

main.browser.ts

बूटस्ट्रैपिंग के दौरान रिज़ॉल्वर को इंजेक्ट किया जाना चाहिए।

...
import {bootstrap} from '@angular/platform-browser-dynamic';
import { ROUTE_RESOLVERS } from './app.resolver';

bootstrap(<Type>App, [
    ...
    ...ROUTE_RESOLVERS
])
.catch(err => console.error(err));

बच्चों के साथ रूटिंग

मूल दस्तावेज़ीकरण के विपरीत, मैंने इसे app.rout.ts या app.module.ts फ़ाइल (आपकी प्राथमिकता के आधार पर) के अंदर ठीक से बच्चों के मार्गों को ठीक करने का तरीका पाया। WebPack या SystemJS का उपयोग करते समय यह दृष्टिकोण काम करता है।

नीचे दिए गए उदाहरण में घर, घर / काउंटर और घर / काउंटर / भ्रूण-डेटा के लिए मार्ग दिखाए गए हैं। पहले और आखिरी मार्गों को पुनर्निर्देश का उदाहरण माना जा रहा है। अंत में उदाहरण के लिए एक अलग फ़ाइल में आयात किए जाने वाले रूट को निर्यात करने का एक उचित तरीका है। पूर्व के लिए। app.module.ts

आगे की व्याख्या करने के लिए, कोणीय की आवश्यकता है कि आपके पास बच्चों के सरणी में एक मार्ग रहित मार्ग है जिसमें मूल घटक का प्रतिनिधित्व करने के लिए मूल घटक शामिल है। यह थोड़ा भ्रामक है, लेकिन यदि आप एक बच्चे के मार्ग के लिए रिक्त URL के बारे में सोचते हैं, तो यह मूल URL के समान URL के बराबर होगा।

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";

import { HomeComponent } from "./components/home/home.component";
import { FetchDataComponent } from "./components/fetchdata/fetchdata.component";
import { CounterComponent } from "./components/counter/counter.component";

const appRoutes: Routes = [
    {
        path: "",
        redirectTo: "home",
        pathMatch: "full"
    },
    {
        path: "home",            
        children: [
            {
                path: "",
                component: HomeComponent
            },
            {
                path: "counter",                    
                children: [
                    {
                        path: "",
                        component: CounterComponent
                    },
                    {
                        path: "fetch-data",
                        component: FetchDataComponent                            
                    }
                ]
            }
        ]
    },
    {
        path: "**",
        redirectTo: "home"
    }
];

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes)
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule { }

सिराज के माध्यम से महान उदाहरण और विवरण