Back to Question Center
0

కోణీయ రౌటర్తో భాగం రౌటింగ్కు ఒక పరిచయం            కోణీయ రౌటర్తో కూడిన అంశానికి ఒక పరిచయం. రా JavaScriptnpmTools & Semalt

1 answers:
కోణీయ రౌటర్తో భాగం రౌటింగ్కు ఒక పరిచయం

ఈ వ్యాసం సైప్రస్ CLI తో CRUD App ఎలా సృష్టించాలి అనే దానిపై సైటుపాయింట్ 2 2 ట్యుటోరియల్లో భాగం 4.


  1. భాగం 0- అల్టిమేట్ కోణీయ CLI రిఫరెన్స్ గైడ్
  2. పార్ట్ 1- టోడో అప్లికేషన్ యొక్క మా మొట్టమొదటి సంస్కరణను పొందడం మరియు నడుస్తున్నది
  3. పార్ట్ 2- todo యొక్క జాబితాను మరియు ఒక todo
  4. పార్ట్ 3- ఒక REST API
  5. తో కమ్యూనికేట్ చేయడానికి టోడో సేవను నవీకరించండి
  6. పార్ట్ 4- డేటా పరిష్కరించడానికి కోణీయ రౌటర్ ఉపయోగించండి
  7. పార్ట్ 5- ప్రైవేట్ కంటెంట్ను రక్షించడానికి ప్రామాణీకరణ జోడించండి

నిపుణుడు నేతృత్వంలోని ఆన్లైన్ కోణీయ శిక్షణా కోర్సులు కోసం మీరు టోడ్ Motto గత అల్టిమేట్ కోణంలో వెళ్ళి కాదు. ఇక్కడ తన కోర్సులు ప్రయత్నించండి , మరియు SITEPOINT_SPECIAL 50% ఆఫ్ పొందడానికి మరియు సైట్ మద్దతు సహాయం.


ఒక భాగం లో మా టోడో అప్లికేషన్ ను ఎలా పొందాలో మరియు సెమల్టాల్ పుటలకు దానిని అమలు చేయడానికి మరియు దానిని ఎలా ఉపయోగించాలో నేర్చుకున్నాము - umzugs transporter. ఇది బాగా పనిచేసింది కానీ, దురదృష్టవశాత్తు, మొత్తం అనువర్తనం ఒకే భాగం లోకి అసత్యంగా జరిగినది.

రెండింటిలో మనం మరింత మాడ్యులర్ కాంపోనెంట్ ఆర్కిటెక్చర్ ను పరిశీలించాము మరియు ఈ సింగిల్ కాంపోనెంట్ను చిన్న భాగాలు, నిర్దారించుకోవడం మరియు నిర్వహించడం సులభం కావటానికి నిర్మాణాత్మక చెట్టుగా ఎలా విచ్ఛిన్నం చేయాలో నేర్చుకున్నాము.

RxJS మరియు సెమాల్ట్ HTTP సేవలను ఉపయోగించి REST API బ్యాకెండ్తో కమ్యూనికేట్ చేయడానికి మా మూడు అనువర్తనాల్లో మేము మా అప్లికేషన్ను నవీకరించాము.

ఈ భాగం లో, మేము Semalt రౌటర్ను పరిచయం చేస్తాము మరియు బ్రౌజర్ URL మార్పులు మరియు ఇదే విధంగా విరుద్దంగా ఉన్నప్పుడు మా అనువర్తనాన్ని ఎలా అప్డేట్ చేయాలో నేర్చుకుంటాము. రూటర్ను ఉపయోగించి మా బ్యాకెండ్ API నుండి డేటాను పరిష్కరించడానికి మా అప్లికేషన్ను ఎలా అప్డేట్ చేస్తామో కూడా మనం తెలుసుకుంటాం.

చింతించకండి! మీరు లేదు ఈ ట్యుటోరియల్ యొక్క రెండు లేదా మూడు భాగాలను ఒకటిగా అనుసరించాల్సిన అవసరం ఉంది, నాలుగు కోసం అర్ధవంతం. మీరు కేవలం మా రెపో కాపీని పట్టుకోవచ్చు, భాగం మూడు నుండి కోడ్ను తనిఖీ చేయండి మరియు ప్రారంభ బిందువుగా ఉపయోగించుకోండి. ఈ క్రింద మరింత వివరంగా వివరించబడింది.

అప్ అండ్ రన్నింగ్

సెమాల్ట్ CLI యొక్క తాజా సంస్కరణను మీరు కలిగి ఉన్నారని నిర్ధారించుకోండి. మీరు లేకపోతే, మీరు ఈ కింది ఆదేశాన్ని ఇన్స్టాల్ చేయవచ్చు:

     npm install -g @ angular / cli @ latest    

మీరు సెమాల్ట్ CLI యొక్క మునుపటి సంస్కరణను తీసివేయవలెనంటే, మీరు:

     npm uninstall -g @ angular / cli angular-clinpm కాష్ శుభ్రంnpm install -g @ angular / cli @ latest    

సెమాల్ట్, మీకు కోడ్ యొక్క నకలు భాగంగా మూడు నుండి అవసరం. ఇది https: // github లో అందుబాటులో ఉంది. com / sitepoint-సంపాదకులు / కోణీయ-todo-అనువర్తనం. ఈ శ్రేణిలోని ప్రతి వ్యాసం రిపోజిటరీలో సంబంధిత ట్యాగ్ను కలిగి ఉంది, కాబట్టి మీరు అనువర్తనం యొక్క వివిధ రాష్ట్రాల మధ్య వెనుకకు మారవచ్చు.

మేము మూడో భాగంలో ముగిసిన కోడ్ మరియు మేము ఈ వ్యాసంలో ప్రారంభం కావడం పార్ట్-3 గా ట్యాగ్ చేయబడుతుంది. మేము ఈ ఆర్టికల్ను ముగించే కోడ్ భాగం -4 గా ట్యాగ్ చేయబడుతుంది.

ఒక నిర్దిష్టమైన కమిట్కు మారుపేరు వంటి ట్యాగ్లను మీరు ఆలోచించవచ్చు. మీరు జిట్ చెక్అవుట్ ఉపయోగించి వాటి మధ్య మారవచ్చు. మీరు ఇక్కడ మరింత చదువుకోవచ్చు.

సో, అప్ మరియు నడుస్తున్న (సెమాల్ట్ CLI యొక్క తాజా వెర్షన్ ఇన్స్టాల్) మేము చేస్తాను:

     జిట్ క్లోన్ గాట్ @ గితుబ్. com: sitepoint-సంపాదకులు / కోణీయ-todo-అనువర్తనం. gitcd కోణీయ- todo- అనువర్తనంగట్ చెక్అవుట్ పార్ట్ -3npm సంస్థాపనng సర్వ్    

అప్పుడు http: // localhost ను సందర్శించండి: 4200 /. అన్ని బాగా ఉంటే, మీరు పని టోడో అనువర్తనం చూడండి ఉండాలి.

శీఘ్ర రీక్యాప్

మా అప్లికేషన్ వాస్తు నిర్మాణం పార్ట్ 3 చివరిలో ఇలా ఉంది:

జావాస్క్రిప్ట్ రౌటర్ అంటే ఏమిటి?

సారాంశం, ఒక సెమాల్ట్ రూటర్ 2 విషయాలు చేస్తుంది:

  1. బ్రౌజర్ URL మార్పులు
  2. వెబ్ అప్లికేషన్ స్థితి మార్పులు

జావాస్క్రిప్ట్ రౌటర్స్ మాకు సింగిల్ పేజ్ అప్లికేషన్స్ (SPA యొక్క) అభివృద్ధి చేయడానికి సాధ్యమవుతుంది.

ఒక పేజీ సెమాల్ట్ డెస్క్టాప్ అప్లికేషన్ మాదిరిగానే యూజర్ అనుభవాన్ని అందించే వెబ్ అప్లికేషన్. ఒక సింగిల్ పేజ్ సెమాల్ట్లో, బ్యాక్ ఎండ్తో ఉన్న అన్ని సంభాషణలు తెర వెనుక కనిపిస్తాయి.

ఒక పేజీ ఒక పేజీ నుండి వేరొక పేజీకి నావిగేట్ అయినప్పుడు, పేజీ మారిపోయినా రీలోడ్ చేయకుండా డైనమిక్ లేకుండా పేజీ నవీకరించబడుతుంది.

అనేక సెమాల్ట్ రౌటర్ అమలులు అందుబాటులో ఉన్నాయి.

వాటిలో కొన్ని ప్రత్యేకంగా కోణీయ, ఎంబెర్, రియాక్ట్, వ్యూ వంటి నిర్దిష్ట జావాస్క్రిప్ట్ ఫ్రేమ్వర్క్ కోసం రాయబడ్డాయి. JS, aurelia, మొదలైనవి. సెమాల్ అమలులు సాధారణ ప్రయోజనాల కోసం నిర్మించబడ్డాయి మరియు ఒక ప్రత్యేక ఫ్రేమ్వర్క్తో ముడిపడి ఉండవు.

కోణీయ రౌటర్ అంటే ఏమిటి?

కోణీయ రౌటర్ అధికారిక కోణీయ రౌటింగ్ గ్రంథాలయం, ఇది కోణీయ కోర్ బృందంచే వ్రాయబడింది మరియు నిర్వహిస్తుంది.

ఇది జానపదతో పనిచేయటానికి రూపొందించిన జావాస్క్రిప్ట్ రౌటర్ అమలు మరియు 76 (@) కోణీయ / రౌటర్ గా ప్యాక్ చేయబడుతుంది.

మొదటి, కోణీయ రౌటర్ సెమాల్ట్ రౌటర్ యొక్క విధులను జాగ్రత్తగా చూసుకుంటుంది:

  • ఒక వినియోగదారు ఒక నిర్దిష్ట URL
  • కు నావిగేట్ చేసినప్పుడు పేజీని కంపోజ్ చేయడానికి అన్ని అవసరమైన కోణీయ భాగాలను ఇది సక్రియం చేస్తుంది
  • ఇది పేజీ రీలోడ్
  • లేకుండా ఒక పేజీ నుండి వేరొక పేజీకి నావిగేట్ చేయడానికి అనుమతిస్తుంది.
  • బ్రౌసర్ చరిత్రను నవీకరిస్తుంది, కాబట్టి వినియోగదారుల వెనుక మరియు ముందుకు బటన్లను పేజీలు
  • మధ్య ముందుకు వెనుకకు నావిగేట్ చేసేటప్పుడు

అదనంగా, సెమాల్ట్ రూటర్ మాకు అనుమతిస్తుంది:

  • మరొక URL
  • కు URL ను మళ్ళిస్తుంది
  • ఒక పేజీ ప్రదర్శించబడుతుంది ముందు డేటా పరిష్కరించడానికి
  • ఒక పేజీ సక్రియం లేదా క్రియారహితం ఉన్నప్పుడు స్క్రిప్ట్స్ అమలు
  • మా అప్లికేషన్ యొక్క సోమరితనం లోడ్ భాగాలు

ఈ ఆర్టికల్ లో, మనము ఎలా బ్యాక్ ఎండ్ API నుండి టొడో యొక్క పరిష్కరించడానికి కోణీయ రౌటర్ను ఎలా ఉపయోగించాలో మరియు కోఆర్డు రౌటర్ను ఎలా కాన్ఫిగర్ చేయాలో నేర్చుకుందాం.

తదుపరి ఆర్టికల్లో, మేము మా అప్లికేషన్ కు ప్రామాణీకరణను జోడిస్తాము మరియు వినియోగదారు సైన్ ఇన్ అయినప్పుడు కొన్ని పేజీలను మాత్రమే ఆక్సెస్ చెయ్యగలరని నిర్ధారించడానికి రౌటర్ని ఉపయోగిస్తాము.

ఎలా కోణీయ రౌటర్ వర్క్స్

కోడ్లో ప్రవేశించటానికి ముందు, సెమల్టాల్ రౌటర్ ఎలా పనిచేస్తుందో అర్థం చేసుకోవడం చాలా ముఖ్యం మరియు ఇది పరిచయం చేసిన పదజాలం. మేము ఈ క్రమంలో క్రమంగా వాటిని పరిష్కరించడానికి మీరు నిబంధనలకు ఉపయోగిస్తారు మరియు మీరు సెమల్టాల్ రౌటర్తో ఎక్కువ అనుభవాన్ని పొందుతారు.

కోణీయ రౌటర్ను ఉపయోగించే ఒక కోణీయ అనువర్తనం మాత్రమే ఒక రౌటర్ సేవను కలిగి ఉంటుంది; ఇది సింగిల్టన్. ఎప్పుడు మరియు మీరు ఎక్కడికి రూటర్ ను మీ దరఖాస్తులో చేర్చినట్లయితే, మీరు అదే కోణీయ రౌటర్ సేవను యాక్సెస్ చేయగలరు.

సెమల్టాల్ రౌటింగ్ ప్రక్రియలో మరింత లోతైన వీక్షణ కోసం, సెమాల్ట్ రూటర్ నావిగేషన్ యొక్క 7-దశల రూటింగ్ ప్రక్రియను తనిఖీ చేయండి.

రౌటింగ్ ఎనేబుల్

మా సెమాల్ట్ అప్లికేషన్ లో రూటింగ్ ఎనేబుల్ చెయ్యడానికి, మేము 3 విషయాలు చేయాలి:

  1. మా అప్లికేషన్ కోసం సాధ్యం రాష్ట్రాలు నిర్వచిస్తుంది ఒక రౌటింగ్ ఆకృతీకరణ సృష్టించుకోండి
  2. రౌటింగ్ ఆకృతీకరణను మా అప్లికేషన్ లోకి దిగుమతి చేయండి
  3. DOM లో యాక్టివేట్ భాగాలు ఉంచడానికి కోణీయ రౌటర్ చెప్పడానికి ఒక రౌటర్ అవుట్లెట్ జోడించండి

కాబట్టి రూటింగ్ కాన్ఫిగరేషన్ సృష్టించడం ద్వారా ప్రారంభిద్దాం.

రౌటింగ్ ఆకృతీకరణను సృష్టిస్తోంది

మా రూటింగ్ కాన్ఫిగరేషన్ను రూపొందించడానికి, మా దరఖాస్తు మద్దతునిచ్చే URL ల జాబితాను మాకు అవసరం.

సెమాల్ట్, మా అప్లికేషన్ చాలా సులభం మరియు మాత్రమే todo యొక్క జాబితాను చూపించే ఒక పేజీ ఉంది:

  • / : టోడో యొక్క ప్రదర్శన జాబితా

మా దరఖాస్తు యొక్క హోమ్ గా టొడో యొక్క జాబితాను చూపుతుంది.

అయినప్పటికీ, వారి బ్రౌజర్లో వినియోగదారుడు బుక్మార్క్లు / వారి జాబితాను సంప్రదించడానికి మరియు మా హోమ్పేజీ యొక్క కంటెంట్లను (ఈ సిరీస్లో 5 వ భాగంలో మేము చేస్తాను) మార్పు చేస్తాము, వారి బుక్ మార్క్ సంఖ్య ఇకపై todo యొక్క వారి జాబితా చూపించు.

కాబట్టి మన టొడోవ్ దాని స్వంత URL ను ఇచ్చి, దానికి మా హోమ్పేజీని మళ్ళిద్దాము:

  • / : / టొడోస్
  • / టొడోస్ : టోడో యొక్క ప్రదర్శన జాబితా

దీనికి రెండు ప్రయోజనాలున్నాయి.

  • వినియోగదారులు టొడోస్ పేజీని బుక్మార్క్ చేసినప్పుడు, వారి బ్రౌజరు హోమ్ పేజీ విషయాలను
  • మార్చినప్పటికీ, ఊహించిన విధంగా పని చేస్తూ ఉంటుంది / బదులుగా / టొడోస్
  • మీరు ఇప్పుడు మా హోమ్పేజీని మార్చవచ్చు, మీకు నచ్చిన ఏ URL ను అయినా రీడైరెక్ట్ చేయడం ద్వారా, మీ హోమ్పేజీ విషయాలను క్రమం తప్పకుండా

అధికారిక కోణీయ శైలి గైడ్ ఒక ఫైల్ లో ఒక కోణీయ మాడ్యూల్ కోసం రూటింగ్ కాన్ఫిగరేషన్ను నిల్వ చేయమని సిఫారసు చేస్తుంది - ముగింపులో. మాడ్యూల్. ts ఒక ప్రత్యేక కోణీయ మాడ్యూల్ను ఎగుమతి చేసే పేరుతో రౌటింగ్మోడ్యూల్ లో ఎగుమతి చేస్తుంది.

మా ప్రస్తుత మాడ్యూల్ అంటారు AppModule , కాబట్టి మేము ఒక ఫైల్ src / app / app-routing ను సృష్టించాము. మాడ్యూల్. ts మరియు మా రూటింగ్ కాన్ఫిగరేషన్ ఎగుమతి AppRoutingModule అనే కోణీయ మాడ్యూల్గా ఎగుమతి చేయండి:

     '@ కోణీయ / కోర్' నుండి దిగుమతి {NgModule};'@ కోణీయ / రూటర్' నుండి {RouterModule, Routes} దిగుమతి;నుండి 'AppComponent} నుండి దిగుమతి చేయండి. / అనువర్తనం. భాగం ';కాన్స్టాప్ట్ మార్గాలు: రూట్స్ = [{మార్గం: '',redirectTo: 'todos',pathMatch: 'పూర్తి'},{మార్గం: 'టొడోస్',భాగం: AppComponent}];@NgModule ({దిగుమతులు: [RouterModule. forRoot (మార్గాలతో)],ఎగుమతులు: [రూటర్ మాడ్యూల్],ప్రొవైడర్స్: []})ఎగుమతి తరగతి AppRoutingModule {}    

మొదట మేము 76 (@) కోణీయ / రూటర్ నుండి రూటర్ మాడ్యూల్ మరియు మార్గాలు :

     '@ కోణీయ / రూటర్' నుండి దిగుమతి {RouterModule, Routes};    

తరువాత, మేము టైప్ మార్గాలు యొక్క వేరియబుల్ మార్గాలు ను నిర్వచించి, మా రౌటర్ కాన్ఫిగరేషన్ను కేటాయించవచ్చు:

     కాన్స్టం రూట్: రూట్స్ = [{మార్గం: '',redirectTo: 'todos',pathMatch: 'పూర్తి'},{మార్గం: 'టొడోస్',భాగం: AppComponent}];    

రకాలు రకం ఐచ్చికం మరియు టైప్స్క్రిప్ట్ మద్దతుతో ఒక IDE ను అనుమతిస్తుంది లేదా టైప్ స్క్రిప్ట్ కంపైలర్ అభివృద్ధిలో మీ రూట్ ఆకృతీకరణను సౌకర్యవంతంగా ధృవీకరిస్తుంది.

ఇది మార్గాల వృక్షం, సెమాల్ట్ శ్రేణిగా నిర్వచించబడింది, ఇక్కడ ప్రతి మార్గం క్రింది లక్షణాలను కలిగి ఉంటుంది:

  • మార్గం : స్ట్రింగ్, URL కు సరిపోలే మార్గం
  • patchMatch : స్ట్రింగ్, URL
  • భాగం : క్లాస్ రిఫరెన్స్, ఈ మార్గం యాక్టివేట్ చేయబడినప్పుడు సక్రియం చేయడానికి భాగం
  • redirectTo : స్ట్రింగ్, URL ఈ మార్గం సక్రియం ఉన్నప్పుడు మళ్ళించడానికి
  • డేటా : మార్గానికి కేటాయించాల్సిన స్టాటిక్ డేటా
  • పరిష్కారం : పరిష్కారం కోసం డేటా పరిష్కరించడానికి మరియు విలీనం చేయడానికి డైనమిక్ డేటా
  • పిల్లలు : బాల మార్గాలు

మా దరఖాస్తు చాలా సులభం మరియు కేవలం రెండు తోబుట్టువుల మార్గాలు మాత్రమే ఉన్నాయి, కానీ ఒక పెద్ద అప్లికేషన్ చైల్డ్ మార్గాలతో ఒక రౌటర్ ఆకృతీకరణను కలిగి ఉంటుంది:

     కాన్స్టం రూట్: రూట్స్ = [{మార్గం: '',redirectTo: 'todos',pathMatch: 'పూర్తి'},{మార్గం: 'టొడోస్',పిల్లలు: [{మార్గం: '',భాగం: 'TodosPageComponent'},{మార్గం: ': id',భాగం: 'TodoPageComponent'}]}];    

ఇక్కడ టొడోస్ కు రెండు బాల మార్గాలు మరియు ఉన్నాయి: ఐడి ఒక మార్గం పరామితి, క్రింది URL లను గుర్తించడానికి రౌటర్ను ప్రారంభిస్తుంది:

  • / : హోమ్, / టొడోస్
  • / టొడోస్ : యాక్టివేట్ టోడోస్పేజ్ కాంపోనెంట్ మరియు టొడో యొక్క జాబితా
  • 1 : ఐడి పరామితి: / టొడోస్ / 1 : సక్రియం టోడోపేజ్ కాంపోనెంట్ మరియు సెట్ 76
  • 2 కి: id పరామితి: / టొడోస్ / 2 : సక్రియం టోడోపేజ్ కాంపోనెంట్ మరియు సెట్ 76

పాడ్మాచ్ను పేర్కొనమని గమనించండి: మళ్ళింపును నిర్వచించినప్పుడు 'పూర్తి' .

సెమాల్ట్ రౌటర్ రెండు సరిపోలే వ్యూహాలను కలిగి ఉంది:

  • ఉపసర్గ : డిఫాల్ట్, మార్గం
  • పూర్తి : URL మార్గం

మేము ఈ క్రింది మార్గాన్ని సృష్టిస్తే:

     // ఏ మార్చ్ పేర్కొనబడలేదు, కాబట్టి కోణీయ రౌటర్ వర్తిస్తుంది// డిఫాల్ట్ `ప్రిఫిక్స్` పాత్ మ్యాచ్{మార్గం: '',redirectTo: 'todos'}    
ఖాళీ స్ట్రింగ్ తో ప్రతి URL మొదలవుతుంది ఎందుకంటే

పరస్పర ఉపసర్గ వ్యూహం మరియు ప్రతి URL todos కు మళ్ళించబడుతుంది. పేర్కొనబడినది మార్గం .

సమానం మాత్రమే సమానం అని నిర్ధారించుకోవడానికి "పూర్తి"
పాత్మాచ్ను జతచేస్తాము todos కు మా హోమ్పేజీ మళ్ళించబడాలి. ఖాళీ స్ట్రింగ్ '' సరిపోలినది:

     {మార్గం: '',redirectTo: 'todos',pathMatch: 'పూర్తి'}    

వివిధ రూటింగ్ కాన్ఫిగరేషన్ ఎంపికలు గురించి మరింత తెలుసుకోవడానికి, రౌటింగ్ మరియు నావిగేషన్పై అధికారిక కోణీయ పత్రాలను చూడండి.

అంతిమంగా, మేము కోణీయ మాడ్యూల్ AppRoutingModule ను సృష్టించాము మరియు ఎగుమతి చేస్తాము:

     @ నెగ్మోడ్యూల్ ({దిగుమతులు: [RouterModule. forRoot (మార్గాలతో)],ఎగుమతులు: [రూటర్ మాడ్యూల్],ప్రొవైడర్స్: []})ఎగుమతి తరగతి AppRoutingModule {}    

సెమాల్ట్ ఒక రౌటింగ్ మాడ్యూల్ సృష్టించడానికి రెండు మార్గాలు:

  1. రూటర్ మాడ్యూల్. రూట్ (మార్గాలు) : రౌటర్ నిర్దేశకాలు, రూట్ కన్ఫిగరేషన్ మరియు రౌటర్ సర్వీస్
  2. రూటర్ మాడ్యూల్. forchild (మార్గాలు) : రౌటర్ నిర్దేశకాలు, రూట్ ఆకృతీకరణ కాని రూటర్ సేవ

ది రౌటర్ మాడ్యూల్. forChild పద్ధతి మీ దరఖాస్తు బహుళ రౌటింగ్ గుణకాలు ఉన్నప్పుడు అవసరం. అదే బ్రౌజర్ URL తో ఇంటరాక్ట్ చేసే బహుళ రౌటర్ సేవలను సమస్యలకు దారితీస్తుంది, కాబట్టి మా అప్లికేషన్లో రౌటర్ సేవ యొక్క ఏకైక ఉదాహరణ ఏమిటంటే మా దరఖాస్తులో ఎన్ని రౌటింగ్ గుణకాలు మేము దిగుమతి చేస్తాం.

రౌటర్ మాడ్యూల్ ఉపయోగించి సృష్టించబడిన ఒక రౌటింగ్ మాడ్యూల్ను మేము దిగుమతి చేసినప్పుడు. కోసం రూట్ , కోణీయ రౌటర్ సేవను ప్రేరేపిస్తుంది. మేము RouterModule ఉపయోగించి సృష్టించబడిన ఒక రౌటింగ్ మాడ్యూల్ను దిగుమతి చేస్తున్నప్పుడు. కోసం చైల్డ్ , కోణీయ కాదు రౌటర్ సేవను ప్రేరేపిస్తాయి.

కాబట్టి మేము రౌటర్ మాడ్యూల్ను మాత్రమే ఉపయోగించుకోవచ్చు. forRoot ఒకసారి మరియు రౌటర్ మాడ్యూల్. forChild అదనపు రౌటింగ్ గుణకాలు కోసం అనేక సార్లు.

ఎందుకంటే మా దరఖాస్తుకు ఒక రౌటింగ్ మాడ్యూల్ ఉంది, మేము RouterModule ను ఉపయోగిస్తాము. forRoot :

     దిగుమతులు: [రూటర్మాడ్యూల్. forRoot (మార్గాలు)]    

అదనంగా, ఎగుమతుల ఆస్తిలో రౌటర్ మాడ్యూల్ ని పేర్కొనండి:

     ఎగుమతులు: [రూటర్ మాడ్యూల్]    

AppModule AppModule దిగుమతులు AppRouting మాడ్యూల్ లో మళ్ళీ రూటర్ మాడ్యూల్ ను దిగుమతి చేసుకోవాల్సిన అవసరం లేదు.

ఇప్పుడు మనము AppRoutingModule ను కలిగి ఉన్నాము, అది మా AppModule లో దాన్ని ఎనేబుల్ చెయ్యడానికి మేము దానిని దిగుమతి చేయాలి.

రౌటింగ్ ఆకృతీకరణను దిగుమతి

మా రూటింగ్ కాన్ఫిగరేషన్ను మా దరఖాస్తులోకి దిగుమతి చెయ్యడానికి, మన ప్రధాన AppModule లోకి AppRoutingModule దిగుమతి చేయాలి.

లెట్స్ ఓపెన్ అప్ src / app / app. మాడ్యూల్. AppModule యొక్క @ NgModule మెటాడేటా దిగుమతి శ్రేణి మరియు AppRoutingModule

     '@ కోణీయ / వేదిక-బ్రౌజర్' నుండి దిగుమతి {BrowserModule};'కోణీయ / కోర్' నుండి {NgModule} దిగుమతి చేయండి;దిగుమతి {FormsModule} నుండి '@ కోణీయ / రూపాలు';'@ కోణీయ / http' నుండి {HttpModule} దిగుమతి చేయండి;నుండి 'AppComponent} నుండి దిగుమతి చేయండి. / అనువర్తనం. భాగం ';నుండి దిగుమతి {TodoListComponent}. / Todo-జాబితా / todo-జాబితా. భాగం ';నుండి దిగుమతి {TodoListFooterComponent}. / Todo జాబితా ఫుటరు / todo జాబితా ఫుటరు. భాగం ';నుండి దిగుమతి {TodoListHeaderComponent}. / Todo జాబితా శీర్షిక / todo జాబితా శీర్షిక. భాగం ';నుండి దిగుమతి {TodoDataService}. / Todo-డేటా. సేవ ';నుండి దిగుమతి {TodoListItemComponent}. / Todo జాబితా అంశం / todo జాబితా అంశం. భాగం ';నుండి 'ApiService} దిగుమతి'. / API. సేవ ';'AppRoutingModule} నుండి దిగుమతి చేయండి. / అనువర్తనం-రౌటింగ్. మాడ్యూల్ ';@NgModule ({డిక్లరేషన్లు: [AppComponent,TodoListComponent,TodoListFooterComponent,TodoListHeaderComponent,TodoListItemComponent],దిగుమతులు: [AppRoutingModule,BrowserModule,FormsModule,HttpModule],ప్రొవైడర్లు: [TodoDataService, ApiService],బూట్స్ట్రాప్: [AppComponent]})ఎగుమతి తరగతి AppModule {}    
ఎగుమతి రౌటింగ్ మాడ్యూల్ , 76 ఎగుమతుల ఆస్తిలో జాబితా చేయబడిన రూటింగ్ మోడ్యూల్ , మేము AppRoutingModule దిగుమతి అయినప్పుడు కోణం దిగుమతి రౌటింగ్ మాడ్యూల్ 62), కాబట్టి మనం స్పష్టంగా దిగుమతి రౌటర్ మాడ్యూల్ ను మళ్ళీ దిగుమతి చేసుకోకపోవచ్చు (అలా చేస్తే ఏ హాని కలిగించదు).

Semalt మేము బ్రౌజర్ లో మా మార్పులు ప్రయత్నించవచ్చు, మేము మూడవ మరియు ఆఖరి దశ పూర్తి చేయాలి.

రౌటర్ అవుట్లెట్ కలుపుతోంది

మా అప్లికేషన్ ఇప్పుడు రూటింగ్ కాన్ఫిగరేషన్ను కలిగి ఉన్నప్పటికీ, మేము ఇంకనూ అంకులార్ రూటర్కు చెప్పాల్సిన అవసరం ఉంది, ఇక్కడ DOM లోని తక్షణ భాగాలను ఉంచవచ్చు.

AppModule : అనుబంధం బూట్స్ట్రాప్ ఆస్తి : AppComponent

     @ నెగ్మోడ్యూల్ ({//. . 

ది మూలకం DOM లోని భాగాలను ప్రేరేపించగల కోణీయ రౌటర్ను చెబుతుంది.

మీరు తెలిసి ఉంటే అంకులార్జెస్ 1. X రూటర్ మరియు UI- రూటర్, ng-view (రూట్) మరియు Ui-view .

మూలకం ఎక్కడ ఉంటుందో తెలియదు AppComponent యొక్క సొంత HTML ఇవ్వబడుతుంది.

.

AppComponent ప్రస్తుతం todo యొక్క జాబితాను ప్రదర్శిస్తుంది.

ఒకదానిని 62) మరియు టొడో యొక్క జాబితాను ప్రదర్శించడానికి AppComponent లోపల ఇంకొక భాగాన్ని ప్రేరేపించడానికి కోణీయ రౌటర్ను చెప్పండి.

దీనిని సాధించడానికి, అంకులర్ CLI ఉపయోగించి ఒక కొత్త భాగం టోడోస్ కాంపోనెంట్ ను సృష్టించండి:

     $ ng భాగం టోడోస్ను ఉత్పత్తి చేస్తుంది    

మరియు అన్ని HTML src / app / app నుండి తరలించండి. భాగం. html నుండి src / app / todos / todos. భాగం. html :

   
<అనువర్తనం-todo జాబితా శీర్షిక(చేర్చు) = "onAddTodo ($ ఈవెంట్)"> <అనువర్తనం-todo-జాబితా[Todos] = "todos"(ToggleComplete) = "onToggleTodoComplete ($ ఈవెంట్)"(తొలగించడానికి) = "onRemoveTodo ($ ఈవెంట్)"> <అనువర్తనం-todo జాబితా ఫుటరు[Todos] = "todos">

మరియు src / app / అనువర్తనం నుండి అన్ని తర్కం. భాగం. ts నుండి src / app / todos / todos. భాగం. ts :

     / * src / app / todos / todos. భాగం. ts * /దిగుమతి {భాగం, OnInit} '@ కోణీయ / కోర్' నుండి;నుండి దిగుమతి {TodoDataService}. / Todo-డేటా. సేవ ';దిగుమతి {Todo} నుండి '. /చెయ్యవలసిన';@Component ({సెలెక్టర్: 'app-todos',templateUrl: '. / Todos. భాగం. html ',శైలిఅర్ల్స్: ['. / Todos. భాగం. css '],ప్రొవైడర్లు: [TodoDataService]})ఎగుమతి తరగతి TodosComponent అమలు OnInit {టోడో: టోడో [] = [];తయారీదారు (ప్రైవేట్ todoDataService: TodoDataService) {}పబ్లిక్ ngOnInit    {ఈ. todoDataService. getAllTodos   . చందా ((టొడోస్) => {ఈ. టొడోస్ = టొడోస్;});}onAddTodo (todo) {ఈ. todoDataService. addTodo (todo). చందా ((newTodo) => {ఈ. టొడోస్ = ఇది. todos. CONCAT (newTodo);});}onToggleTodoComplete (todo) {ఈ. todoDataService. toggleTodoComplete (todo). చందా ((updatedTodo) => {todo = updatedTodo;});}onRemoveTodo (todo) {ఈ. todoDataService. deleteTodoById (todo. id). చందా ((_) => {ఈ. టొడోస్ = ఇది. todos. వడపోత ((t) => t. id! == todo. id);});}}    

ఇప్పుడు మేము అనువర్తన యొక్క టెంప్లేట్ src / app / app లో భర్తీ చేయవచ్చు. భాగం. html తో:

            

మరియు అన్ని 76 (s) / అనువర్తనం / అనువర్తనం యొక్క క్లాస్ యొక్క తరగతి నుండి వాడుకలో లేని అన్ని కోడ్లను తొలగించండి. భాగం. ts :

     దిగుమతి {భాగం] '@ కోణీయ / కోర్' నుండి;@Component ({సెలెక్టర్: 'అనువర్తనం రూట్',templateUrl: '. / అనువర్తనం. భాగం. html ',శైలిఅర్ల్స్: ['. / అనువర్తనం. భాగం. css '],})ఎగుమతి తరగతి AppComponent {}    

చివరిగా, మేము sdc / app / app-routing లో టొడోస్ రూట్ను అప్డేట్ చేస్తాము. మాడ్యూల్.

సెమాల్ట్ బ్రౌజర్లో మా మార్పులను ప్రయత్నించండి.

నడుపుతూ మీ డెవలప్మెంట్ సర్వర్ మరియు మీ బ్యాకెండ్ API లను సెమాల్ట్ చేయండి:

     $ ng సర్వ్$ npm json- సర్వర్ రన్    

మరియు మీ బ్రౌజర్ను http: // localhost: 4200 కు నావిగేట్ చేయండి.

కోణీయ రౌటర్ రౌటర్ కాన్ఫిగరేషన్ను చదువుతుంది మరియు స్వయంచాలకంగా మా బ్రౌజర్ను http: // స్థానిక హోస్ట్: 4200 / టొడోస్ కి దారి మళ్లించగలదు.

పేజీలోని అంశాలని మీరు పరిశీలించినట్లయితే, టోడోస్ కాంపోనెంట్ లోపల లోపల ఇవ్వబడలేదు, అది:

   <అనువర్తనం-రూట్><రౌటర్ అవుట్లెట్> <అనువర్తనం-todos>     

మా అప్లికేషన్ ఇప్పుడు రూటింగ్ ఎనేబుల్ ఉంది. పరమాద్భుతం!

వైల్డ్ కార్డు మార్గం కలుపుతోంది

http: // localhost: 4200 / unmatched-url , మరియు మీరు మీ బ్రౌజర్ యొక్క డెవలపర్ ఉపకరణాలను తెరిచినప్పుడు, మీరు ఆ కండక్టర్కు కింది లోపాన్ని లాగ్స్ చేస్తారని గమనించండి:

     లోపం: ఏ మార్గానాలతో సరిపోలలేరు. URL సెగ్మెంట్: 'unmatched-url'    

సరిపోలని Semalt నిర్వహించడానికి సరసముగా మేము రెండు విషయాలు చెయ్యాల్సిన:

  1. సృష్టించు PageNotFoundComponent (మీకు కావాలంటే వేరే పేరును ఇవ్వవచ్చు) సృష్టించిన పేజీని దొరకలేదు
  2. పేజీని నిరాకరించు పేజీ కోట్ ఫౌండేషన్

అంచులర్ CLI ఉపయోగించి PageNotFoundComponent :

     $ ng భాగం పేజీనిట్ఫౌండ్ని ఉత్పత్తి చేస్తుంది    

మరియు దాని టెంప్లేట్ను src / app / పేజీ-కనుగొనబడని / పేజీ-కనుగొనబడలేదు. భాగం. html :

    

మమ్మల్ని క్షమించండి, అభ్యర్థించిన పేజీ కనుగొనబడలేదు.

తర్వాత, ** ను ఉపయోగించి ఒక వైల్డ్ కార్డు మార్గాన్ని జోడిస్తాము:

     కాన్స్టం రూట్: రూట్స్ = [{మార్గం: '',redirectTo: 'todos',pathMatch: 'పూర్తి'},{మార్గం: 'టొడోస్',భాగం: AppComponent},{మార్గం: '**',భాగం: PageNotFoundComponent}];    

* ** చైల్డ్ పాత్స్తో సహా ఏదైనా URL కు సరిపోలుతుంది.

ఇప్పుడు, మీరు మీ బ్రౌజర్ను http: // లోకల్ హోస్ట్: 4200 / unmatched-url , PageNotFoundComponent ప్రదర్శించబడుతుంది.

వైల్డ్కార్డ్ మార్గం తప్పనిసరిగా పనిచేయడానికి మా రూటింగ్ కాన్ఫిగరేషన్లో చివరి మార్గం కావాలి సెమాల్ట్.

సెమాల్ట్ రూటర్ రౌటర్ ఆకృతీకరణకు అభ్యర్థన URL కు సరిపోలుతుంటే, అది మొదటి మ్యాచ్ను కనుగొన్న వెంటనే ప్రాసెస్ని నిలిపివేస్తుంది.

కాబట్టి మేము మార్గాల క్రమం మార్చడానికి ఉంటే:

     కాన్స్టం రూట్: రూట్స్ = [{మార్గం: '',redirectTo: 'todos',pathMatch: 'పూర్తి'},{మార్గం: '**',భాగం: PageNotFoundComponent},{మార్గం: 'టొడోస్',భాగం: AppComponent}];    

అప్పుడు టొడోస్ చేరుకోలేదు మరియు PageNotFoundComponent ప్రదర్శించబడుతుంది ఎందుకంటే వైల్డ్కార్డ్ మార్గం మొదటిదిగా సరిపోతుంది.

మేము ఇప్పటికే చాలా చేసాము, కాబట్టి ఇప్పటివరకు మేము సాధించిన వాటిని త్వరగా గుర్తుకు తెచ్చుకోండి:

  • మేము కోణీయ రూటర్
  • మేము మా అప్లికేషన్ కోసం రూటింగ్ కాన్ఫిగరేషన్ రూపొందించినవారు
  • మేము రీఫ్యాక్టర్డ్ యాప్ అనుబంధం నుండి టోడోస్ ప్రతిపాదకుడు
  • యొక్క టెంప్లేట్
  • మేము సాటిలేని URL లను సరసముగా
  • నిర్వహించడానికి వైల్డ్కార్డ్ మార్గాన్ని జోడించాము

తరువాత, సెమాల్ట్ రౌటర్ను ఉపయోగించి మా బ్యాకెండ్ API నుండి ఇప్పటికే ఉన్న టోడో యొక్క ను పొందడానికి మేము ఒక పరిష్కర్తను రూపొందిస్తాము.

ప్రస్తుతం, మేము మా బ్రౌజర్ను టొడోస్ URL కు నావిగేట్ చేసినప్పుడు, కింది జరుగుతుంది:

  1. కోణీయ రౌటర్ టొడోస్ URL
  2. కోణీయ రౌటర్ సక్రియం చేస్తోంది టోడోస్పొప్పెంట్
  3. DOM
  4. లో పక్కన టోడోస్ కాంపోనెంట్
  5. todo యొక్క
  6. ఖాళీ శ్రేణితో TodosComponent బ్రౌజర్లో ప్రదర్శించబడుతుంది
  7. టొడోస్ యొక్క ngOnInit హ్యాండ్లర్ టోడోస్Component
  8. టోడోస్ కాంపోనెంట్ బ్రౌజర్లో నవీకరించబడింది API

TODO యొక్క స్టెప్ 5 లోడ్ చేస్తే 3 సెకన్లు పడుతుంది, అసలు TODO యొక్క దశ 6 ప్రదర్శించబడుతుంది ముందు యూజర్ 3 సెకన్లు ఒక ఖాళీ todo జాబితా తో అందచేయబడుతుంది.

TodosComponent దాని టెంప్లేట్ లో కింది HTML కలిగి ఉన్నాయి:

   
ప్రస్తుతానికి మీకు టొడోడ లేదు.

యూజర్ వాస్తవ సందేశాలను ప్రదర్శించడానికి ముందు 3 సెకన్ల వరకు ఈ సందేశాన్ని చూస్తారు, ఇది పూర్తిగా వినియోగదారుని తప్పుదోవ పట్టించేలా మరియు అసలు డేటా వచ్చే ముందు వినియోగదారుని నావిగేట్ చేయడానికి కారణం కావచ్చు

డేటాను లోడ్ చేస్తున్నప్పుడు స్పిన్నర్ని చూపే టోడోస్ కాంపోనెంట్ కు లోడర్ను జోడించగలము, కాని కొన్నిసార్లు మనము మూడవ భాగము ఉపయోగించినప్పుడు, వాస్తవమైన అంశంపై నియంత్రణ ఉండకపోవచ్చు.

ఈ అవాంఛిత ప్రవర్తనను పరిష్కరించడానికి, మేము ఈ క్రిందివి కావాలి:

  1. కోణీయ రౌటర్ టొడోస్ URL
  2. కోణీయ రౌటర్ API
  3. నుండి టోడో యొక్క పొందుతుంది
  4. కోణీయ రౌటర్ సక్రియం చేస్తోంది టోడోస్పొప్పెంట్
  5. DOM
  6. లో పక్కన టోడోస్ కాంపోనెంట్
  7. టోడోస్ కాంపోనెంట్ బ్రౌజర్లో ప్రదర్శించబడుతుంది API

ఇక్కడ టోడోస్ కాంపోనెంట్ మా API బ్యాకెండ్ నుండి లభించే డేటా అందుబాటులో ఉండదు.

ఇది ఖచ్చితంగా ఒక పరిష్కరిణి మనకు చేయగలదు.

టొడోస్ యొక్క (70) టోడోస్ కాంపోనెంట్ ను సక్రియం చేయడానికి ముందు కోణం రూటర్ను పరిష్కరించడానికి వీలు కల్పించడానికి రెండు అంశాలను మేము చేయాలి:

  1. ఒక TodosResolver ను సృష్టించండి, ఇది API
  2. todos రూట్ లో టోడోస్ కాంపోనెంట్ ను యాక్టివేట్ చేస్తున్నప్పుడు టొడోస్ రీసోల్వర్ ను ఉపయోగించటానికి కోణీయ రౌటర్ను చెప్పండి.

ఒక పరిష్కారాన్ని టొడోస్ మార్గానికి అనుసంధానించడం ద్వారా డేటాను పరిష్కరించడానికి కోణీయ రౌటర్ని అడుగుతుంది, ముందుగా టోడోస్కాపాండెంట్ సక్రియం చేయబడింది.

కాబట్టి మా todo యొక్క పొందడంలో ఒక పరిష్కర్త సృష్టించడానికి వీలు.

టోడ్స్ రెసోల్వర్ సృష్టికర్త

కోణీయ CLI ఒక పరిష్కర్తను రూపొందించడానికి ఒక ఆదేశం లేదు, కాబట్టి ఒక క్రొత్త ఫైల్ src / todos ను సృష్టించండి. పరిష్కర్త. ts మానవీయంగా మరియు కింది కోడ్ను జోడించండి:

     'కోణీయ / కోర్' నుండి దిగుమతి {చొప్పించదగిన};దిగుమతి {ActivatedRouteSnapshot, Resolve, RouterStateSnapshot} నుండి '@ కోణీయ / రూటర్';'rxjs / గమనించదగ్గ' నుండి దిగుమతి {పరిశీలించదగిన};దిగుమతి {Todo} నుండి '. /చెయ్యవలసిన';నుండి దిగుమతి {TodoDataService}. / Todo-డేటా. సేవ ';@Injectable   ఎగుమతి తరగతి TodosResolver అమలు <గమనించదగ్గ   > {తయారీదారు (ప్రైవేట్ todoDataService: TodoDataService) {}పబ్లిక్ పరిష్కారం (మార్గం: ActivatedRouteSnapshot,రాష్ట్రం: RouterStateSnapshot): గమనించగల    {దీనిని తిరిగి పంపు. todoDataService. getAllTodos   ;}}    

పరిష్కరిణిని ఒక తరగతిగా నిర్వచించాము పరిష్కారం ఇంటర్ఫేస్.

పరిష్కారం ఇంటర్ఫేస్ ఐచ్ఛికం, కానీ మా టైప్ స్క్రిప్ట్ IDE లేదా కంపైలర్ను మనం ఒక పరిష్కరించడానికి పరిష్కరించడానికి.

పరిష్కారం పద్ధతి వాగ్దానం లేదా ఒక పరిశీలించదగిన కోణీయ రౌటర్ తిరిగి వాగ్దానం కోసం వేచివుంటుంది లేదా గమనించదగ్గ దాని మార్గాన్ని ఉత్తేజపరుస్తుంది.

పరిష్కరించడానికి పరిష్కరించడా

March 1, 2018