Angular 2 => रूटिंग (3.0.0+)

टिप्पणियों

राउटर के साथ हम कुछ और ट्रिक्स कर सकते हैं (जैसे एक्सेस को प्रतिबंधित करना), लेकिन उन्हें एक अलग ट्यूटोरियल में कवर किया जा सकता है।

यदि आपको एक नया मार्ग चाहिए, तो बस app.routes.ts संशोधित करें और निम्नलिखित चरणों का पालन करें:

घटक आयात करें
routes सरणी में जोड़ें। एक नया path और component शामिल करना सुनिश्चित करें।

बूटस्ट्रैपिंग

अब मार्गों को परिभाषित किया गया है, हमें अपने आवेदन को मार्गों के बारे में बताने की आवश्यकता है। ऐसा करने के लिए, पिछले उदाहरण में हमारे द्वारा निर्यात किए गए प्रदाता को बूटस्ट्रैप करें।

अपना बूटस्ट्रैप कॉन्फ़िगरेशन खोजें ( main.ts में होना चाहिए, लेकिन आपका माइलेज भिन्न हो सकता है )।

//main.ts

import {bootstrap} from '@angular/platform-browser-dynamic';

//Import the App component (root component)
import { App } from './app/app';

//Also import the app routes
import { APP_ROUTES_PROVIDER } from './app/app.routes';

bootstrap(App, [
  APP_ROUTES_PROVIDER,
])
.catch(err => console.error(err));

राउटर-आउटलेट को कॉन्फ़िगर करना

अब जब राउटर कॉन्फ़िगर किया गया है और हमारा ऐप जानता है कि मार्गों को कैसे संभालना है, तो हमें उन वास्तविक घटकों को दिखाना होगा जिन्हें हमने कॉन्फ़िगर किया था।

ऐसा करने के लिए, अपने HTML टेम्पलेट / फ़ाइल को अपने शीर्ष-स्तरीय (ऐप) घटक के लिए कॉन्फ़िगर करें जैसे:

//app.ts

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

@Component({
    selector: 'app',
    templateUrl: 'app.html',
    styleUrls: ['app.css'],
    directives: [
        ROUTER_DIRECTIVES,
    ]
})
export class App {
    constructor() {
    }
}

<!-- app.html -->

<!-- All of your 'views' will go here -->
<router-outlet></router-outlet>

<router-outlet></router-outlet> तत्व मार्ग को दी गई सामग्री को स्विच करेगा। इस तत्व के बारे में एक और अच्छा पहलू यह है कि यह आपके HTML में एकमात्र तत्व नहीं है।

उदाहरण के लिए: कहते हैं कि आप प्रत्येक पृष्ठ पर एक टूलबार चाहते थे जो स्टैक ओवरफ्लो दिखता है, उसी तरह मार्गों के बीच स्थिर रहता है। आप तत्वों के नीचे <router-outlet> को घोंसले में डाल सकते हैं ताकि पृष्ठ के केवल कुछ हिस्से बदल जाएं।

बदलते मार्ग (टेम्प्लेट और निर्देशों का उपयोग करके)

अब मार्ग निर्धारित किए गए हैं, हमें वास्तव में मार्गों को बदलने के लिए कुछ तरीके की आवश्यकता है।

यह उदाहरण दिखाएगा कि टेम्पलेट का उपयोग करके मार्गों को कैसे बदला जाए, लेकिन टाइपस्क्रिप्ट में मार्गों को बदलना संभव है।

यहाँ एक उदाहरण है (बंधन के बिना):

<a routerLink="/home">Home</a>

यदि उपयोगकर्ता उस लिंक पर क्लिक करता है, तो वह /home रूट हो जाएगा। राउटर जानता है कि /home को कैसे संभालना /home , इसलिए यह Home कंपोनेंट को प्रदर्शित करेगा।

यहाँ डेटा बाइंडिंग के साथ एक उदाहरण दिया गया है:

<a *ngFor="let link of links" [routerLink]="link">{{link}}</a>

जिसे मौजूद रहने के लिए links नामक एक सरणी की आवश्यकता होगी, इसलिए इसे app.ts जोड़ें:

public links[] = [
    'home',
    'login'
]

यह सरणी के माध्यम से लूप करेगा और routerLink निर्देश के साथ एक <a> तत्व जोड़ routerLink = सरणी में वर्तमान तत्व का मान, इसे बनाते हुए:

 <a routerLink="home">home</a>
 <a routerLink="login">login</a>

यदि आपके पास बहुत सारे लिंक हैं, तो यह विशेष रूप से मददगार है, या हो सकता है कि लिंक लगातार बदलते रहें। हम कोणीय को लिंक को जोड़ने के काम में व्यस्त काम करने देते हैं, बस इसकी आवश्यकता होती है।

अभी, links[] स्थिर है, लेकिन इसे किसी अन्य स्रोत से डेटा फीड करना संभव है।

रूट निर्धारित करना

नोट: यह उदाहरण @ कोणीय / राउटर के 3.0.0.-beta.2 रिलीज पर आधारित है। लेखन के समय, यह राउटर का नवीनतम संस्करण है।

राउटर का उपयोग करने के लिए, नए टाइपस्क्रिप्ट फ़ाइल में मार्गों को इस तरह परिभाषित करें

//app.routes.ts

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

import {Home} from './routes/home/home';
import {Profile} from './routes/profile/profile';

export const routes = [
    {path: '', redirectTo: 'home'},
    {path: 'home', component: Home},
    {path: 'login', component: Login},
];

export const APP_ROUTES_PROVIDER = provideRouter(routes);

पहली पंक्ति में, हम provideRouter आयात provideRouter ताकि हम अपने आवेदन को provideRouter सकें कि बूटस्ट्रैप चरण के दौरान मार्ग क्या हैं।

उदाहरण के रूप में Home और Profile सिर्फ दो घटक हैं। आपको प्रत्येक Component को एक मार्ग के रूप में आयात करने की आवश्यकता होगी।

फिर, मार्गों की सरणी निर्यात करें।

path : घटक के लिए पथ। आप का उपयोग करने की आवश्यकता नहीं है '/ ........' कोणीय स्वचालित रूप से ऐसा करेगा

component : मार्ग तक पहुँचने पर लोड होने वाला घटक

redirectTo : वैकल्पिक । यदि आपको किसी विशेष मार्ग तक पहुंचने पर किसी उपयोगकर्ता को स्वचालित रूप से पुनर्निर्देशित करने की आवश्यकता है, तो यह आपूर्ति करें।

अंत में, हम कॉन्फ़िगर किए गए राउटर को निर्यात करते हैं। provideRouter एक प्रदाता को लौटाएगा जिसे हम provideRouter सकते हैं ताकि हमारा आवेदन जानता है कि प्रत्येक मार्ग को कैसे संभालना है।

किसी रूट से या तक पहुंच को नियंत्रित करना

डिफ़ॉल्ट कोणीय राउटर किसी भी मार्ग से बिना शर्त के नेविगेशन की अनुमति देता है। यह हमेशा वांछित व्यवहार नहीं है।

ऐसे परिदृश्य में जहां उपयोगकर्ता को सशर्त रूप से या मार्ग से नेविगेट करने की अनुमति दी जा सकती है, इस व्यवहार को प्रतिबंधित करने के लिए एक रूट गार्ड का उपयोग किया जा सकता है।

यदि आपका परिदृश्य निम्नलिखित में से किसी एक पर फिट बैठता है, तो रूट गार्ड का उपयोग करने पर विचार करें,

लक्ष्य घटक पर नेविगेट करने के लिए उपयोगकर्ता को प्रमाणित किया जाना आवश्यक है।
उपयोगकर्ता को लक्ष्य घटक पर नेविगेट करने के लिए अधिकृत होना आवश्यक है।
घटक को आरंभीकरण से पहले अतुल्यकालिक अनुरोध की आवश्यकता होती है।
घटक को नेविगेट करने से पहले उपयोगकर्ता इनपुट की आवश्यकता होती है।

रूट गार्ड कैसे काम करते हैं

राउटर नेविगेशन के व्यवहार को नियंत्रित करने के लिए बूलियन मान लौटाकर रूट गार्ड काम करते हैं। यदि सच लौटाया जाता है, तो राउटर लक्ष्य घटक के लिए नेविगेशन के साथ जारी रहेगा। यदि गलत लौटाया जाता है, तो राउटर लक्ष्य घटक को नेविगेशन से इनकार करेगा।

रूट गार्ड इंटरफेस

राउटर कई गार्ड इंटरफेस का समर्थन करता है:

CanActivate : मार्ग नेविगेशन के बीच होता है।
CanActivateChild : एक बच्चे के मार्ग के मार्ग नेविगेशन के बीच होता है।
CanDeactivate : वर्तमान मार्ग से दूर नेविगेट करते समय होता है।
CanLoad : रूट नेविगेशन के बीच असिंक्रोनस तरीके से लोड किए गए एक फीचर मॉड्यूल के बीच होता है।
रिज़ॉल्यूशन : मार्ग सक्रियण से पहले डेटा पुनर्प्राप्ति करने के लिए उपयोग किया जाता है।

नेविगेशन की कुछ प्रक्रियाओं तक पहुंच प्रदान करने या हटाने के लिए इन इंटरफेस को आपके गार्ड में लागू किया जा सकता है।

सिंक्रोनस बनाम एसिंक्रोनस रूट गार्ड्स

रूट गार्ड सशर्त रूप से नेविगेशन को नियंत्रित करने के लिए तुल्यकालिक और अतुल्यकालिक संचालन की अनुमति देते हैं।

सिंक्रोनस रूट गार्ड

एक सिंक्रोनस रूट गार्ड एक बूलियन को लौटाता है, जैसे कि सशर्त नेविगेशन को नियंत्रित करने के लिए, तत्काल परिणाम की गणना करके।

import { Injectable }     from '@angular/core';
import { CanActivate }    from '@angular/router';

@Injectable()
export class SynchronousGuard implements CanActivate {
  canActivate() {
    console.log('SynchronousGuard#canActivate called');
    return true;
  }
}

अतुल्यकालिक मार्ग रक्षक

अधिक जटिल व्यवहार के लिए, एक रूट गार्ड नेविगेशन को असिंक्रोनस रूप से ब्लॉक कर सकता है। एक एसिंक्रोनस रूट गार्ड एक ऑब्जर्वेबल या प्रॉमिस लौटा सकता है।

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

import { Injectable }     from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable }     from 'rxjs/Rx';
import { MockAuthenticationService } from './authentication/authentication.service';

@Injectable()
export class AsynchronousGuard implements CanActivate {
    constructor(private router: Router, private auth: MockAuthenticationService) {}

    canActivate(route:ActivatedRouteSnapshot, state:RouterStateSnapshot):Observable<boolean>|boolean {
        this.auth.subscribe((authenticated) => {
            if (authenticated) {
                return true;
            }
            this.router.navigateByUrl('/login');
            return false;
        });
    }
}

मार्ग विन्यास में गार्ड जोड़ें

फ़ाइल app.routes

संरक्षित मार्गों में Guard बंधे हुए मार्ग को canActivate जा सकता है

import { provideRouter, Router, RouterConfig, CanActivate } from '@angular/router';

//components
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';

export const routes: RouterConfig = [
    { path: 'login', component: LoginComponent },
    { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] }    
}

एप्लिकेशन बूटस्ट्रैप में उपयोग की जाने वाली APP_ROUTER_PROVIDERS निर्यात करें

export const APP_ROUTER_PROVIDERS = [
    AuthGuard,
    provideRouter(routes)
];

ऐप बूटस्ट्रैप में गार्ड का उपयोग करें

फ़ाइल main.ts (या boot.ts )

उपरोक्त उदाहरणों पर विचार करें:

गार्ड (जहाँ गार्ड बनाया गया है) बनाएँ और
मार्ग कॉन्फ़िगरेशन में गार्ड जोड़ें , (जहां मार्ग के लिए गार्ड कॉन्फ़िगर किया गया है, तो APP_ROUTER_PROVIDERS निर्यात किया जाता है),
हम बूटस्ट्रैप को गार्ड के साथ जोड़ सकते हैं

import { bootstrap } from '@angular/platform-browser-dynamic';
import { provide } from '@angular/core';

import { APP_ROUTER_PROVIDERS } from './app.routes';    
import { AppComponent } from './app.component';

bootstrap(AppComponent, [
    APP_ROUTER_PROVIDERS
])
.then(success => console.log(`Bootstrap success`))
.catch(error => console.log(error));

रिज़ॉल्वर और गार्ड का उपयोग करना

हम अपने मार्ग config में एक उच्चस्तरीय गार्ड का उपयोग कर रहे पर प्रथम पृष्ठ लोड वर्तमान उपयोगकर्ता को पकड़ने के लिए, और एक समाधानकर्ता का मूल्य स्टोर करने के लिए currentUser , जो बैकएंड से हमारे प्रमाणीकृत उपयोगकर्ता है।

हमारे कार्यान्वयन का एक सरलीकृत संस्करण इस प्रकार दिखता है:

यहाँ हमारा शीर्ष स्तर मार्ग है:

export const routes = [
{
  path: 'Dash',
  pathMatch : 'prefix',
  component: DashCmp,
  canActivate: [AuthGuard],
  resolve: {
      currentUser: CurrentUserResolver
  },
  children: [...[
    path: '',
    component: ProfileCmp,
    resolve: {
        currentUser: currentUser
    }
  ]]
  }
];

यहाँ हमारा AuthService

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/do';

@Injectable()
export class AuthService {
  constructor(http: Http) {
    this.http = http;

    let headers = new Headers({ 'Content-Type': 'application/json' });
    this.options = new RequestOptions({ headers: headers });
  }
  fetchCurrentUser() {
    return this.http.get('/api/users/me')
      .map(res => res.json())
      .do(val => this.currentUser = val);
 }
}

यहाँ हमारे AuthGuard :

import { Injectable } from '@angular/core';
import { CanActivate } from "@angular/router";
import { Observable } from 'rxjs/Rx';

import { AuthService } from '../services/AuthService';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(auth: AuthService) {
    this.auth = auth;
  }
  canActivate(route, state) {
    return Observable
      .merge(this.auth.fetchCurrentUser(), Observable.of(true))
      .filter(x => x == true);
  }
}

यहाँ हमारे CurrentUserResolver :

import { Injectable } from '@angular/core';
import { Resolve } from "@angular/router";
import { Observable } from 'rxjs/Rx';

import { AuthService } from '../services/AuthService';

@Injectable()
export class CurrentUserResolver implements Resolve {
  constructor(auth: AuthService) {
    this.auth = auth;
  }
  resolve(route, state) {
    return this.auth.currentUser;
  }
}

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow

Angular 2
रूटिंग (3.0.0+)

खोज…