Back to Question Center
0

कोणीतरी राउटर सह घटक रूटिंगशी परिचय            कॉन्युलर राऊटरसह घटक रूटिंगशी परिचय संबंधित विषय: रॉ जावास्क्रिप्टमाइनमूलिक्स & मिमल

1 answers:
कॉोन्युलर राऊटर सह घटक रूटिंगशी परिचय

हा लेख Angular CLI सह CRUD अॅप कसा तयार करावा याबद्दल साइटपॉईन्ट कोनायलर 2+ ट्यूटोरियलचा भाग आहे.


  1. भाग 0- अंतिम कोणीतरी CLI संदर्भ मार्गदर्शक
  2. भाग 1- टॉडो अप्लिकेशन अप आणि रनिंगची पहिली आवृत्ती मिळवणे
  3. भाग 2- टोडांच्या यादीतील एक स्वतंत्र तुकडा
  4. प्रदर्शित करण्यासाठी स्वतंत्र घटक तयार करणे.
  5. भाग 3- एका REST API
  6. सह संप्रेषण करण्यासाठी टॉड सेवा अद्यतनित करा
  7. भाग 4- डेटा निराकरण करण्यासाठी कोनीय राऊटर वापरा
  8. भाग 5- खाजगी सामग्री संरक्षित करण्यासाठी प्रमाणीकरण जोडा

तज्ञ-नेतृत्वाच्या ऑनलाइन कोनातून प्रशिक्षण अभ्यासक्रमांकरिता आपण टॉड मोटोद्वारे अंदाजे कोणीतरी जाऊ शकत नाही. येथे त्यांचे अभ्यासक्रम वापरून पहा , आणि कोड वापरा SITEPOINT_SPECIAL मिळविण्यासाठी 50% बंद आणि साइटपॉईंटस मदत करण्यास मदत करण्यासाठी - como hacer panuelo bolsillo traje.


काही भागाने आम्ही आमचे टॉडो अप अप कसे मिळवायचे आणि ते Semaltेट पेजवर कसे वापरावे ते शिकलो. हे फक्त दंड काम पण, दुर्दैवाने, संपूर्ण अनुप्रयोग एकच घटक मध्ये crammed होते

भाग दोन मध्ये आम्ही अधिक मॉड्युलर घटक आर्किटेक्चरची तपासणी केली आणि हे एक घटक हे लहान घटकांच्या संरचित वृक्षामध्ये कसे खंडित करायचे ते शिकलो जे समजून घेणे, पुनर्वापर करणे आणि देखरेख करणे सोपे आहे.

भाग तीन मध्ये आम्ही आरएक्सजेएस आणि Semaltट एचटीटीपी सेवा वापरून आरईएसटी एपीआई बॅकऐंडशी संप्रेषण करण्यासाठी आमची अर्जाची अद्ययावत केली आहे.

या भागात, आम्ही शामक राऊटर परिचय करू आणि ब्राउझर URL बदलते आणि त्याउलट ते आमच्या अनुप्रयोगाचे अपडेट कसे कराल ते जाणून घेऊ. आपण राउटर वापरून आमच्या बॅकएंड API वरून डेटाचे निराकरण करण्यासाठी आमचे अनुप्रयोग कसे अद्ययावत करू शकतो ते देखील शिकू.

चिंता करू नका! तुम्ही असे नाही या दोन ट्युटोरियल्सपैकी एक किंवा दोन भाग तीन अर्थाने समजून घेण्यासाठी. आपण आमच्या रेपोची एक प्रत हळूच पकडू शकता, कोड तीन भागांवरून चेक आउट करा आणि त्याचा वापर सुरवातीचा बिंदू म्हणून करा. हे खाली अधिक तपशीलाने स्पष्ट केले आहे.

अप आणि रनिंग

आपल्याजवळ Semalt CLI स्थापित केलेली नवीनतम आवृत्ती असल्याचे सुनिश्चित करा. आपण नसल्यास, आपण खालील आदेश वापरून स्थापित करू शकता:

     npm install -g @ कोणीतरी / क्लिं @ नवीनतम    

आपल्याला सेमीलेट सीएलआयच्या मागील आवृत्तीस काढण्याची आवश्यकता असल्यास, आपण हे करु शकता:

     एनएमएम अनइन्स्टॉल करणे -g @ कोनियर / क्लि कॉनर-क्लियेnpm कॅशे स्वच्छnpm install -g @ कोण / cli @ नवीनतम    

Semaltेट, आपल्याला तीन भागांमधून कोडची कॉपी आवश्यक आहे. हे https: // github वर उपलब्ध आहे. com / sitepoint-editors / कोनीय-टू-अॅप्लिकेशन या मालिकेतील प्रत्येक लेखाचा संबंधित रेपॉजिटरीमध्ये संबंधित टॅग आहे ज्यामुळे आपण अनुप्रयोगाच्या विविध राज्यांमध्ये मागे व पुढे जाऊ शकता.

कोड तीन भागांमध्ये संपला आणि या लेखात आपण सुरुवात करु ते भाग -3 म्हणून ओळखले जाते. ज्या लेखाशी आपण या लेखाचा शेवट करतो तो भाग -4 म्हणून ओळखला जातो.

आपण एखादे विशिष्ट आयडी उघडण्यासाठी एखाद्या उपनाम सारख्या टॅगचा विचार करू शकता. आपण git चेकआउट वापरून त्यांच्यामध्ये स्विच करू शकता. आपण येथे त्याबद्दल अधिक वाचू शकता.

तर, उठता आणि चालू ठेवण्यासाठी (आम्ही नमस्ते CLI च्या नवीनतम आवृत्तीची स्थापना केली आहे) आम्ही करू:

     गिट क्लोन गीट @ जीथूब. com: sitepoint-editor / angular-todo-app gitसीडी काल्पनिक-टूडो-अॅपजीआयटी चेकऑन भाग -3एनएमएम प्रतिष्ठानसेवा देणे    

त्यानंतर http: // localhost: 4200 / येथे भेट द्या. सर्व ठीक आहे, तर आपण कार्यरत Todo अॅप पाहू शकता.

एक जलद संक्षेप (8 9)

भाग 3 च्या शेवटी आमच्या अॅप्लिकेशनचे आर्किटेक्चर कसे होते ते पहा:

जावास्क्रिप्ट राउटर म्हणजे काय?

थोडक्यात, एक मिमल राउटर 2 गोष्टी करतो:

  1. जेव्हा ब्राउझर URL बदलते तेव्हा वेब अनुप्रयोग स्थितीचे अद्यतन करा
  2. जेव्हा वेब अनुप्रयोग स्थिती बदलते तेव्हा ब्राउझर URL अद्यतनित करा

जावास्क्रिप्ट रूटर आमच्यासाठी सिंगल पेज अॅप्लिकेशन्स (एसपीए) विकसित करणे शक्य करतात.

सिंगल पृष्ठ मिमल हा एक वेब ऍप्लिकेशन आहे जो डेस्कटॉप अनुप्रयोगाप्रमाणे वापरकर्त्यांचा अनुभव प्रदान करतो. एका पृष्ठामध्ये साम्भक, पडद्याच्या मागे सर्व अंतःप्रेरणा मिळतात.

जेव्हा एखादा वापरकर्ता एका पृष्ठावरुन दुसरीकडे नेव्हिगेट करतो, तेव्हा पृष्ठ पुन्हा रीलोड न करता अद्ययावतपणे अद्यतनित केले जाते, जरी URL बदलले तरीही

उपलब्ध असंख्य वेगवेगळ्या राऊटर राऊटर आहेत.

त्यापैकी काही विशिष्ट जावास्क्रिप्ट फ्रेमवर्कसाठी लिहिण्यात आल्या आहेत जसे की कोनular, एम्बर, रिएक्ट, वू जेएस, ऑरेलिया, इ. मिमल कार्यान्वयन सामान्य उद्देशांसाठी तयार केले जातात आणि विशिष्ट फ्रेमवर्कशी बद्ध नाहीत.

कॉन्युलर राऊटर म्हणजे काय?

कोन्यार राउटर ही एक अधिकृत कोन्यूलर रूटिंग लायब्ररी आहे, ज्याला कोन्यूलर कोर टीमने लिहिलेले आणि सांभाळले आहे.

ही जावास्क्रिप्ट राऊटर कार्यान्वयन आहे ज्याची रचना कोनीय (Angular) सह काम करण्यासाठी केली आहे आणि पॅकेज @ कोणीतरी / राउटर आहे.

सर्वप्रथम, कोन्यार राऊटर मिमल राऊटरच्या कर्तव्याची काळजी घेते:

(9 6)
  • एखाद्या विशिष्ट URL
  • वर नेव्हिगेट केल्यावर ते पृष्ठ तयार करण्यासाठी सर्व आवश्यक कोनियंत्र घटक सक्रिय करते
  • वापरकर्त्यांना पृष्ठ रीलोडशिवाय एका पृष्ठावरुन दुसरीकडे नेव्हिगेट करण्यास अनुमती देते
  • तो ब्राउझरच्या इतिहासाची अद्ययावत करतो म्हणून पृष्ठे
  • दरम्यान मागे आणि मागे नेव्हिगेट करताना परत आणि फॉरवर्ड

    याव्यतिरिक्त, मिमलचा रूटर आम्हाला परवानगी देतो:

    (9 6)
  • URL दुसर्या URL वर पुनर्निर्देशित
  • पृष्ठ प्रदर्शित होण्यापूर्वी डेटाचे निराकरण करा
  • एखादे पृष्ठ सक्रिय किंवा निष्क्रिय केले जाते तेव्हा स्क्रिप्ट चालवा
  • आळशी लोड भाग आमच्या अर्ज
  • या लेखात, आम्ही एंज्युलर राऊटर सेट अप आणि कॉन्फिगर कसा करावा, युआरएलची रीडायरे कसे करता येईल आणि बॅक-एन्ड एडीआयच्या टूडची निराकरणासाठी कोनाई रूटर कशी वापरायची ते शिकू.

    पुढच्या लेखात, आम्ही आमच्या अर्जावर प्रमाणीकरण जोडू आणि राऊटर वापरणार आहोत याची खात्री करण्यासाठी काही पाने वापरकर्त्यांना साइन इन केल्यावरच मिळतील.

    कसातरी राउटर वर्क्स

    आपण कोडमध्ये जाण्यापूर्वी, समजणे महत्वाचे आहे कि कसे मिल्ट राऊटर चालविते आणि परिभाषित केलेली परिभाषा. आपण या मालिकेमध्ये हळूहळू त्यांच्याशी लढत असताना अटींचा वापर केला जाईल आणि आपल्याला मिश्अल राऊटरसह अधिक अनुभव प्राप्त होईल.

    कॉन्युलर अॅप्लिकेशन जी कॉन्युलर राऊटर वापरते फक्त एक राउटर सर्व्हिस इन्स्टन्स असते; हे सिंगलटन आहे. आपल्या अनुप्रयोगामध्ये राऊटर सेवा कुठेही आणि कुठेही इंजेक्ट करा, आपल्याला समान कॉनालर रूटर सेवेमध्ये प्रवेश मिळेल.

    Semalt राऊटींग प्रक्रियेवर अधिक तपशीलवार नमुना करण्यासाठी, मिमल राऊटर नेव्हिगेशनच्या 7-चरण राउटिंग प्रक्रियेची तपासणी करणे सुनिश्चित करा.

    सक्षम करणे रूटिंग

    आमच्या Semalt अॅप्लिकेशनमध्ये राउटिंग सक्षम करण्यासाठी, आम्हाला 3 गोष्टी करणे आवश्यक आहे:

    1. राऊटींग कॉन्फिगरेशन तयार करा जे आमच्या अॅप्लीकेशनसाठी संभाव्य स्टेट ठरवते
    2. आमच्या अनुप्रयोगात रूटिंग कॉन्फिगरेशन आयात करा
    3. कॉमन्युलर राऊटरला सांगण्यासाठी राऊटर आउटलेट जोडा जेथे DOM
    4. मधील सक्रिय घटक ठेवावेत

    तर चला रूटिंग कॉन्फिगरेशन तयार करून सुरूवात करूया.

    राऊटींग कॉन्फिगरेशन तयार करणे

    आमची राऊटींग कॉन्फिगरेशन तयार करण्यासाठी, आम्हाला आमच्या यूआरएलच्या सहाय्याची आवश्यकता आहे ज्यायोगे आपल्याला आमच्या अनुप्रयोगाचे समर्थन मिळेल.

    क्षेपणास्त्र, आपला अर्ज खूपच सोपा आहे आणि त्यात फक्त एक पृष्ठ आहे जो टुडोची यादी दर्शवितो:

    (9 6)
  • / : टोडो च्या यादी दर्शवा
  • आमच्या अनुप्रयोगाचे मुख्यपृष्ठ म्हणून todo च्या सूची दर्शवेल जे.

    तथापि, जेव्हा आपल्या ब्राऊझरमध्ये आपल्या पसंतीच्या टॉडीच्या यादीशी संपर्क साधण्यासाठी वापरकर्त्याचा बुकमार्क / आणि आम्ही आमच्या मुख्यपृष्ठाची सामग्री (जे आम्ही या मालिकेच्या भाग 5 मध्ये करू) बदलतो, तेव्हा त्यांचे बुकमार्क आता त्यांच्या टोडांची यादी दर्शवू नका.

    तर आपल्या टुडोची स्वतःची URL ही स्वतःच्या यूआरएलला द्या आणि आमच्या होमपेजवर ती पुनर्निर्देशित करा:

    (9 6)
  • / : पुनर्निर्देशित / todos
  • / todos : todo च्या यादी शो
  • हे आम्हाला दोन फायदे प्रदान करते:

    (9 6)
  • जेव्हा वापरकर्त्यांनी टोडोस पृष्ठावर बुकमार्क केले तर त्यांचे ब्राउझर / todos ऐवजी / नुसार, जे अपेक्षितपणे काम करत राहील, जरी आपण होम पृष्ठ सामग्री बदलली तरीही
  • आता आम्ही सहजपणे आमच्या मुख्यपृष्ठ आम्ही ते कोणत्याही URL वर पुनर्निर्देशित करून आमच्या मुख्यपृष्ठ बदलू शकता, आपण नियमितपणे आपल्या मुख्यपृष्ठ सामग्री बदलण्याची गरज असल्यास सोयीस्कर आहे
  • अधिकृत कोन्यारी शैली मार्गदर्शक एका कॉनर्यूलर मॉड्यूलसाठी राउटींग कॉन्फिगरेशन संचयित करण्याची शिफारस करतो - रूटिंग मध्ये समाप्त झालेल्या फाईलनाव असलेल्या फाइलमध्ये. मॉड्यूल एसएस जे वेगळ्या कोपर्यूलर मॉड्यूलचे नाव निर्यात करते रूटिंग मोड्यूल .

    आमच्या सध्याच्या मॉड्यूलला AppModule म्हणतात, म्हणून आम्ही एक फाइल तयार करतो src / app / app-routing. मॉड्यूल ts आणि कोयोलर मॉड्यूल म्हणून ओळखले जाणारे आमच्या राऊटींग कॉन्फिगरेशन ऍपराउटिंग मॉड्युल :

         आयात {NgModule} पासून '@ कोणीतरी / कोर';'@ कोणीतरी / राउटर' पासून {RouterModule, Routes} आयात करा;आयात 'AppComponent} वरून'. / अॅप घटक ';const मार्ग: रूट = [{पथ: '',redirectTo: 'todos',pathMatch: 'पूर्ण'},{पथ: 'todos',घटक: AppComponent}];@NgModule ({आयात: [रूटरमॉड्यूल. forRoot (मार्ग)],निर्यातः [राऊटरमॉड्यूल],प्रदाते: []})निर्यात वर्ग AppRouting मॉड्यूल {}    

    प्रथम आम्ही राऊटर मॉड्यूल आणि मार्ग पासून @ कोणीतरी / राउटर :

    आयात करतो.
         आयात करा {रूटरमॉड्यूल, रुट्स} '@ कोणीतरी / राउटर' पासून;    

    पुढील, आम्ही प्रकारांचे मार्ग मार्ग एक व्हेरिएबल परिभाषित आणि आमच्या राउटर कॉन्फिगरेशन लागू:

         निश्चित मार्गः मार्ग = [{पथ: '',redirectTo: 'todos',pathMatch: 'पूर्ण'},{पथ: 'todos',घटक: AppComponent}];    

    मार्ग प्रकार वैकल्पिक आहे आणि टाइपस्क्रिप्ट समर्थनासह एक IDE देते किंवा टाईपस्क्रिप्ट कंपाइलर सहसा विकासा दरम्यान आपल्या मार्ग संरचना प्रमाणित करते.

    हा मार्गांचा एक वृक्ष आहे, जो किमॅट अॅरेच्या रूपात परिभाषित केला आहे, जिथे प्रत्येक मार्गामध्ये निम्नलिखित गुणधर्म असू शकतात:

    (9 6)
  • पथ : स्ट्रिंग, URL शी सामना करण्यासाठी मार्ग
  • पॅच मॅच : स्ट्रिंग, कसे URL जुळण्यासाठी
  • घटक : वर्ग संदर्भ, हा मार्ग सक्रिय झाल्यावर सक्रिय करण्यासाठी घटक
  • redirectTo : स्ट्रिंग, जेव्हा हे मार्ग सक्रिय होते तेव्हा पुनर्निर्देशित करण्यासाठी URL
  • डेटा : मार्ग निर्दिष्ट करण्यासाठी स्थिर डेटा
  • निराकरण : निराकरण आणि डेटा सह निराकरण करण्यासाठी डायनॅमिक डेटा निराकरण करताना
  • मुले : बाल मार्ग
  • आमचे अर्ज सोपे आहे आणि केवळ दोन भावी मार्ग आहेत, परंतु मोठ्या अनुप्रयोगामध्ये बाल मार्ग जसे राउटर कॉन्फिगरेशन असू शकते:

         निश्चित मार्गः मार्ग = [{पथ: '',redirectTo: 'todos',pathMatch: 'पूर्ण'},{पथ: 'todos',मुले: [{पथ: '',घटक: 'टॉड पृष्ठ कॉमोनंट'},{पथ: ': id',घटक: 'TodoPageComponent'}]}];    

    जिथे टूडोस चे दोन मूलभूत मार्ग आहेत आणि : आयडी एक मार्ग पॅरामीटर आहे, ज्यामुळे राउटरला खालील यूआरएलची ओळख होऊ शकते:

    (9 6)
  • / : मुख्यपृष्ठ, / todos कडे पुनर्निर्देशित
  • / todos : सक्रिय करा टॉडपेजकंपोनंट आणि शो च्या सूची शो
  • / टूडोस / 1 : सक्रिय करा टॉडपेजकंपोनंट आणि सेट मूल्य : id मापदंड 1
  • / टूडो / 2 : सक्रिय करा टॉडपेजकंपोनंट आणि सेट मूल्य : आयडी मापदंड ते 2
  • लक्ष द्या कसे आम्ही कसे निर्दिष्ट केले पॅच मॅच: 'पूर्ण' पुनर्निर्देशित व्याख्या करताना

    मिमलचा राऊटरची दोन जुळणारी योजना आहे:

    (9 6)
  • उपसर्ग : डीफॉल्ट, जेव्हा URL ने पथ सह मूल्य सुरू होते तेव्हा जुळते
  • पूर्ण : जेव्हा URL बरोबरीचे पाथ चे मूल्य
  • आम्ही खालील मार्ग तयार केल्यास:

         // कोणतेही पाथ नाही निर्दिष्ट केले आहे, म्हणून कोणीतरी रूटर लागू आहे// डीफॉल्ट `उपसर्ग` पथमॅच{पथ: '',पुनर्निर्देशित: 'todos'}    

    नंतर कोणीतरी राउटर डीफॉल्ट उपसर्ग पाथ मेलिंग योजनेत लागू होतो आणि प्रत्येक URL टूडोस वर पुनर्दिग्दर्शित केले जाते कारण प्रत्येक URL ने रिक्त स्ट्रिंग मध्ये निर्दिष्ट मार्ग .

    आम्ही फक्त आमच्या मुख्यपृष्ठावर todos पुनर्निर्देशित केले जाऊ इच्छितो, म्हणून आम्ही pathMatch: 'full' जोडू इच्छित असल्याची खात्री करा की फक्त बरोबरीचे URL रिक्त स्ट्रिंग '' जुळविली जाते:

         {पथ: '',redirectTo: 'todos',pathMatch: 'पूर्ण'}    

    विविध रूटिंग कॉन्फिगरेशन पर्यायांबद्दल अधिक जाणून घेण्यासाठी, रूटिंग आणि नेव्हिगेशनवर अधिकृत कोन्यावरील दस्तऐवजीकरण पहा.

    अखेरीस, आम्ही कोन्यूलर मॉड्यूल तयार करतो आणि निर्यात करतो ऍपरीउटिंग मॉड्युल :

         @ एनजी मॉड्यूल ({आयात: [रूटरमॉड्यूल. forRoot (मार्ग)],निर्यातः [राऊटरमॉड्यूल],प्रदाते: []})निर्यात वर्ग AppRouting मॉड्यूल {}    

    राऊटिंग मॉड्यूल तयार करण्याचे दोन मार्ग आहेत:

    1. रूटर मॉड्यूल forRoot (मार्ग) : राऊटींग मॉड्यूल तयार करते ज्यात राउटर डायरेक्टिव्ह, मार्ग कॉन्फिगरेशन आणि राऊटर सेवा
    2. रूटर मॉड्यूल मुलांसाठी (मार्ग) : रूटिंग मोड्यूल तयार करते ज्यामध्ये राउटर डायरेक्टिव्हज, मार्ग कॉन्फिगरेशन पण नाही राउटर सेवा

    रूटर मॉड्यूल फॉरबल्ड पद्धत आवश्यक आहे जेव्हा आपल्या अर्जात एकाधिक राऊटींग मोड्यूल्स आहेत. समांतर एकाधिक राऊटर सेवा ज्या समान ब्राऊजरच्या URL सह संवाद साधतात त्या समस्या उद्भवतील, म्हणूनच आमच्या अर्जामध्ये राउटर सेवेचा फक्त एकच प्रसंग असला पाहिजे, मग आपण कितीही रूटींग मोड्यूल्स आमच्या अनुप्रयोगात आयात करु शकता.

    जेव्हा आपण रूटरमॉड्यूल वापरून तयार केलेला रूटिंग मोड्यूल आयात करतो forRoot , कोनालर राउटर सेवेला प्रारंभ करेल. जेव्हा आपण राउटर मॉड्यूल वापरून राउटिंग मॉड्यूल आयात करतो तेव्हा. चाइल्ड , कोनालर इ. नॉट राऊटर सेवेचे इन्स्टिट्यूट

    म्हणून आम्ही केवळ रूटर मॉड्यूल वापरू शकतो. forRoot एकदा आणि वापर रूटर मॉड्यूल अतिरिक्त राऊटींग मोड्यूल्ससाठी बाल बहुविध वेळा

    आमच्या अनुप्रयोगात केवळ एक राउटिंग मॉड्यूल असल्यामुळे, आम्ही रूटर मॉड्यूल वापरतो. forRoot :

         आयात: [रूटर मॉड्यूल forRoot (मार्ग)]    

    याव्यतिरिक्त, आम्ही निर्यात मालमत्तेत रूटर मॉड्यूल नमूद केलेल्या आहेत:

         निर्यातः [राऊटरमॉड्यूल]    

    हे सुनिश्चित करते की आम्हाला रूटर मॉड्यूल पुन्हा मध्ये पुन्हा AppModule जेव्हा AppModule आयात AppRouting मॉड्यूल .

    आता आमच्या AppRouting मॉड्यूल आपल्याकडे असल्यास, आम्ही हे सक्षम करण्यासाठी आमच्या AppModule मध्ये आयात करणे आवश्यक आहे.

    रूटिंग कॉन्फिगरेशन आयात करत आहे

    आपल्या अर्जात आमच्या रूटिंग संरचना आयात करण्यासाठी, आम्ही आमच्या मुख्य AppModule मध्ये AppRoutingModule आयात करणे आवश्यक आहे.

    चला उघडूया src / app / app मॉड्यूल (6 9) ऍप्लिकेशन्स @ एनजीएम्यूल्यूअल मेटाडेटा:

    एसएस आणि 76 आयात ऍरेमध्ये ऍप आरउटिंग मॉड्यूल
         '@ कोणीतरी / प्लॅटफॉर्म-ब्राउझर' मधून {{BrowserModule} आयात करा;import {NgModule} पासून '@ कोणीतरी / कोर';'@ कोणीतरी / फॉर्म' मधून {FormsModule} आयात करा;'@ कोणीतरी / http' वरून {HttpModule} आयात करा;आयात 'AppComponent} वरून'. / अॅप घटक ';आयात करा {TodoListComponent} वरून '. / todo- list / todo-list. घटक ';आयात करा {TodoListFooterComponent} वरून '. / todo-list-footer / todo-list-footer. घटक ';आयात करा {TodoListHeaderComponent} वरून '. / todo-list-header / todo-list-header घटक ';आयात करा {TodoDataService} पासून ' / todo- डेटा सेवा ';आयात करा {TodoListItemComponent} पासून '. / todo-list-item / todo-list-item घटक ';आयात {ApiService} पासून ' / एपीआय सेवा ';import {AppRoutingModule} वरून '. / ऍप-राउटिंग मॉड्यूल ';@NgModule ({घोषणा: [AppComponent,TodoListComponent,TodoListFooterComponent,TodoListHeaderComponent,TodoListItemComponent],आयात: [AppRouting मॉड्यूल,ब्राउझर मॉड्यूल,फॉर्म मॉड्यूल,एचटीटीपी मॉड्युल],प्रदाते: [TodoDataService, ApiService],बूटस्ट्रॅप: [AppComponent]})निर्यात वर्ग AppModule {}    
    रुटिंग मोड्यूल (7 9) रुटिंग मॉड्यूल रुटिंग मॉड्यूल त्याच्या निर्यात प्रॉपर्टीमध्ये सूचीबद्ध केल्या आहेत, कॉओलर आयात करेल रूटिंग मोड्यूल जेव्हा आम्ही आयात करतो तेव्हा स्वयंचलितपणे ऍपरीटिंग मॉड्यूल 62), म्हणून आम्हाला स्पष्टपणे रूटर मॉड्यूल पुन्हा आयात करण्याची आवश्यकता नाही (जरी तसे केल्यामुळे कोणतेही हानी होणार नाही).

    सममूल्य आम्ही ब्राउझरमधील आमचे बदल करण्याचा प्रयत्न करू, आम्हाला तिसरे आणि अंतिम चरण पूर्ण करणे आवश्यक आहे.

    राऊटर आउटलेट जोडणे

    आमच्या अर्जात आता रूटिंग कॉन्फिगरेशन असले तरी, आम्हाला अजूनही कोनाथर रूटर सांगण्याची आवश्यकता आहे जेथे ते DOM मध्ये तत्क्षणी घटक ठेवू शकतात.

    (6 9) AppCodule
    AppComponent मध्ये बूटस्ट्रॅप मालमत्तेची AppModule मध्ये सूचीबद्ध आहे कारण:

    AppComponent
         @ एनजी मॉड्यूल ({// . 

    <राउटर-आउटलेट> घटक कोनातून रूटर दर्शवितो जेथे ते डीओएममध्ये घटक इन्स्तांत करू शकतात.

    आपण परिचित AngularJS 1. असल्यास. एक्स राउटर आणि UI- राउटर, आपण <राउटर-आउटलेट> कोनालार पर्याय एनजी-दृश्य विचार करू शकता. आणि ui-view .

    <राउटर-आउटलेट> घटक नसल्यास, कोनीय रेप्टरला घटक कुठे ठेवायचे हे माहिती नसते आणि केवळ AppComponent चे स्वतःचे HTML सादर केले जाईल .

    AppComponent सध्या todo च्या सूची प्रदर्शित

    <राउटर-आउटलेट> यासह AppComponent वर क्लिक करा AppComponent AppComponent मध्ये दुसरा घटक झटपट करण्यासाठी Angular Router ला सांगा.

    हे साध्य करण्यासाठी, आता नवीन घटक बनवा टॉडस कंबोनंट कोन्यूलर सीएलआय वापरून:

         $ एनजी घटक व्युत्पन्न    

    आणि सर्व HTML येथून हलवा src / app / app घटक html ते src / app / todos / todos घटक html :

       <विभाग वर्ग = "todoapp">  वर क्लिक करा<अनुप्रयोग-todo-list[todos] = "todos"(toggleComplete) = "onToggleTodoComplete ($ इव्हेंट)"(काढून टाका) = "ऑन रिमोटो ($ इव्हेंट)">  वर क्लिक करा<अनुप्रयोग-todo-list-footer[todos] = "todos">  वर क्लिक करा    

    आणि सर्व तर्कशास्त्र src / app / app घटक ts ते src / app / todos / todos. घटक ts :

         / * src / app / todos / todos. घटक ts * /import {Component, OnInit} '@ angular / core' वरुन;आयात करा {TodoDataService} पासून ' . / todo- डेटा सेवा ';आयात करा {Todo} from '. /करण्यासाठी';@ घटक ({निवडकर्ता: 'अॅप-टूडो',templateUrl: '. / टोडोस घटक html ',styleUrls: [' / टोडोस घटक css '],प्रदाते: [TodoDataService]})निर्यात वर्ग TodosComponent लागू OnInit {todos: Todo [] = [];कन्स्ट्रक्टर (खाजगी TOD डेटा सेवा: TodoDataService) {}सार्वजनिक एनजीओएनआयआयटी    {हे. todoDataService. getAllTodos    सदस्यता घ्या(todos) => {हे. todos = todos;});}onAddTodo (todo) {हे. todoDataService. addTodo (todo) सदस्यता घ्या(नवीनटोडा) => {हे. टोडोस = हे टूडोस कॉन्सॅट (नवीनटोडा);});}onToggleTodoComplete (todo) {हे. todoDataService. toggleTodo पूर्ण (todo) सदस्यता घ्या(updatedTodo) => {todo = updatedTodo;});}ऑनरमेवटोडो (टूडो) {हे. todoDataService. deleteTodoById (TODO आयडी). सदस्यता घ्या(_) => {हे. टोडोस = हे टूडोस फिल्टर ((टी) => टी. आयडी! == todo आयडी);});}}    

    आता आम्ही AppComponent च्या टेम्पलेटमध्ये बदलू शकतो src / app / app घटक html यासह:

       <राउटर-आउटलेट>       

    आणि सर्व अप्रचलित कोड वरून AppComponent च्या वर्ग वरून हटवा. Src / app / app घटक ts :

         आयात करा {घटक} '@ कोणीतरी / कोर';@ घटक ({निवडकर्ता: 'अॅप-रूट',templateUrl: '. / अॅप घटक html ',styleUrls: [' / अॅप घटक css '],})निर्यात वर्ग AppComponent {}    

    शेवटी, आम्ही todos मार्ग src / app / app-routing मध्ये अद्ययावत करतो. मॉड्यूल.

    विमा उतरवताना ब्राउझरमध्ये आमचे बदल पहा.

    चालू ठेवून आपल्या डेव्हलपमेंट सर्व्हर आणि आपल्या बॅकएंड API ची बेरीज:

         $ एनजी सेवा$ npm चालत जेसन-सर्व्हर    

    आणि आपल्या ब्राउझरवर नेव्हिगेट करा http: // localhost: 4200 .

    कोनीय राऊटर राउटर कॉन्फिगरेशन वाचतो आणि स्वयंचलितपणे आमच्या ब्राउझरला http: // localhost: 4200 / todos मध्ये पुनर्निर्देशित करतो.

    जर आपण पृष्ठावरील घटकांची पाहणी केली तर तुम्हाला दिसेल की टॉडसँम्पेनेन्ट मध्ये नाही, परंतु पुढील ते:

       <राउटर-आउटलेट>   <अॅप-टूडो>     

    आमच्या अनुप्रयोगात आता राऊटींग सक्षम आहे. अप्रतिम!

    (7 9 6) एक वाइल्डकार्ड मार्ग जोडणे (8 9)

    जेव्हा आपण आपला ब्राउझर http: // localhost: 4200 / unmatched-url मध्ये नेव्हिगेट करता आणि आपण आपल्या ब्राउझरचे विकसक साधने उघडता तेव्हा आपण लक्षात येईल की कोनीय रूटर कन्सोलमध्ये खालील त्रुटी लॉग करते:

         त्रुटी: कोणत्याही मार्गांशी जुळत नाही URL विभाग: 'न जुळणारी-url'    

    अत्युत्तम Semaltेटला सांभाळण्यासाठी दोन गोष्टी कराव्या लागतात:

    1. तयार करा PageNotFoundComponent (जर आपल्याला आवडत असल्यास आपण ते वेगळ्या पद्धतीने नाव देऊ शकता) विनंती केलेले पृष्ठ सापडले नाही असे एक मैत्रीपूर्ण संदेश प्रदर्शित करण्यासाठी
    2. PageNotFoundComponent दर्शविण्यासाठी जेव्हा कोणी मागितलेला URL
    3. जुळत नसेल तेव्हा कोयोनर राऊटर सांगा

    आकृती पाहू PageNotFoundComponent कोन्यूलर सीएलआय वापरून:

         $ एनजी व्युत्पन्न घटक PageNotFound    

    आणि त्याचे टेम्पलेट संपादित करा src / app / page-not-found / page-not-found. घटक html :

        

    आम्हाला माफ करा, विनंती केलेले पृष्ठ सापडले नाही.

    पुढे, आम्ही ** एक मार्ग म्हणून वाइल्डकार्ड मार्ग जोडतो:

         निश्चित मार्गः मार्ग = [{पथ: '',redirectTo: 'todos',pathMatch: 'पूर्ण'},{पथ: 'todos',घटक: AppComponent},{पथ: '**',घटक: PageNotFoundComponent}];    

    ** बालमार्गासह कोणत्याही युआरएलशी जुळते.

    आता, आपण आपला ब्राउझर http: // localhost: 4200 / न जुळणारी-url , PageNotFoundComponent वर नेव्हिगेट केल्यास.

    नमॉट म्हणजे वाइल्डकार्ड मार्ग अपेक्षित म्हणून कार्य करण्यासाठी आमच्या रूटिंग कॉन्फिगरेशनचा अंतिम मार्ग असणे आवश्यक आहे.

    जेव्हा राऊटरच्या कॉन्फिगरेशनसाठी जेव्हा मिमलचा रूटर विनंती URL शी जुळत असेल तेव्हा तो पहिल्या सामन्याला शोध घेताच प्रक्रिया थांबेल.

    म्हणून जर आम्हाला मार्गांचा क्रम बदलता आला तर:

         निश्चित मार्गः मार्ग = [{पथ: '',redirectTo: 'todos',pathMatch: 'पूर्ण'},{पथ: '**',घटक: PageNotFoundComponent},{पथ: 'todos',घटक: AppComponent}];    

    त्यानंतर टूडोस कधीही पोहोचू शकणार नाहीत आणि PageNotFoundComponent प्रदर्शित केले जातील कारण वाइल्डकार्ड मार्ग प्रथम जुळेल.

    आम्ही आधीच बरेच काही केले आहे, म्हणून आतापर्यंत आम्ही जे काही केले आहे त्याचे पुनर्कथन करू या:

    (9 6)
  • आम्ही कोणीतरी राऊटर सेट केला
  • आम्ही आमच्या अर्जसाठी रूटिंग कॉन्फिगरेशन तयार केले आहे
  • आम्ही पुन्हा (77) अप्प कॉमोनंट ते टॉडस कॉम्पेनेन्ट
  • आम्ही जोडले ते AppComponent चे टेम्पलेट
  • आम्ही बेझिझक URL उत्कृष्टरीत्या हाताळण्यासाठी वाइल्डकार्ड मार्ग जोडला
  • पुढे, आम्ही विद्यमान todo आपल्या बॅकएंड API वरून मिमल राउटर वापरण्यासाठी एक निराकरणकर्ता तयार करू.

    सध्या, जेव्हा आपण आमच्या ब्राउझरला todos यूआरएलवर नेव्हिगेट करता, तेव्हा खालील घडते:

    1. कोन्यूलर राऊटर टूडोस यूआरएल
    2. कोनालिझर राऊटर सक्रिय करते टोडस घटक
    3. कोनालिक रूटर डीओएम
    4. मध्ये "राऊटर-आउटलेट> पुढील टोडस कॉमनेन्टंट
    5. टोडस कॉमपोन्नेन्ट ब्राऊझरमध्ये रिकाम्या अॅड टॉड्स
    6. टोडोची एनजीऑनइंट हॅंडलर मध्ये टोडो कंटनेन्ट मधील एपीआयमधून मिळविले आहेत.
    7. टॉडस कॉमपोन्नेन्ट ब्राऊजरमध्ये अद्ययावत केले असून ते एपीआय

    जर पदव्युत्तर पदवी 5 मध्ये लोड केले तर 3 सेकंद लागतात, तर वापरकर्त्याला चरण 6 मध्ये दर्शविल्यापूर्वी 3 सेकंदापर्यंत रिक्त यादी दिले जाईल.

    जर टॉडसँम्पेनेन्ट मध्ये त्याचे HTML नमुन्यात असावे:

       
    आपल्याकडे सध्या कोणतीही दुरुस्ती नाही.

    नंतर वापरकर्त्याला हा संदेश वास्तविक तोडूच्या प्रदर्शित होण्यापूर्वी 3 सेकंद आधी पाहतील, जो वापरकर्ताला पूर्णतः दिशाभूल करू शकेल आणि प्रत्यक्ष डेटाच्या आत येण्यापूर्वी वापरकर्त्याला नॅव्हिगेट करू शकतो.

    आम्ही TodosComponent मध्ये एक लोडर जोडू शकतो जे डेटा लोड केला जात असताना स्पिनर दर्शविते परंतु कधीकधी आम्ही प्रत्यक्ष घटकांवर नियंत्रण ठेवू शकत नाही, उदाहरणार्थ जेव्हा आम्ही तिसरे पक्ष घटक वापरतो

    या अवांछित वर्तनास निराकरण करण्यासाठी, आपल्याला खालील गोष्टींची आवश्यकता आहे:

    1. कोन्यूलर राऊटर टूडोस यूआरएल
    2. कोनालिझर रूटर एपीआयच्या
    3. कोनालिझर राऊटर सक्रिय करते टोडस घटक
    4. कोनालिक रूटर डीओएम
    5. मध्ये "राऊटर-आउटलेट> पुढील टोडस कॉमनेन्टंट
    6. टॉडस कॉमपोन्नेन्ट ब्राऊझरमध्ये एपीआय
    7. वरून मिळवल्या जाणार्या

    जिथे "76" (TodosComponent) आमच्या एपीआई बॅकएंड वरून डेटा उपलब्ध होईपर्यंत प्रदर्शित केलेला नाही.

    निराकरणकर्ता आपल्यासाठी काय करू शकतो हे तंतोतंत आहे.

    कोडीर रूटर ने टोडस कॉमनेन्ट कार्यान्वित होण्याआधी तो टोडोच्या निराकरणासाठी दोन गोष्टी करणे आवश्यक आहे:

    1. एक TodosResolver तयार करा जे TODO च्या API वरून
    2. टूडस कंटनेन्ट टूडोस मार्ग मध्ये सक्रिय केल्यावर
    3. TodosResolver वापरण्यासाठी कोडीर रूटरचा वापर करण्यासाठी कोन्यूलर रूटर सांगा.
    टूडोस (6 9) मार्गावर सोडविणारे जोडणी करून आम्ही प्रथम डेटा सोडविण्यासाठी कोनाझर रूटर विचारू. टॉडस्कॉंन्टंट हे सक्रिय केले आहे.

    तर चला आपला टंकोच्या प्राप्तीसाठी रिझॉल्व्हर तयार करूया.

    टॉडसोलोलर तयार करणे (8 9)

    कोन्यूलर सीएलआयमध्ये रिझाॉल्व्हर निर्माण करण्यासाठी कमांड नाही, तर आपण एक नवीन फाइल तयार करूया src / todos. रिझॉल्व्हर ts स्वहस्ते आणि खालील कोड जोडा:

         आयात इंजेक्शनल '@ कोणीतरी / कोर';import {ActivatedRouteSnapshot, Resolve, RouterStateSnapshot} '@ angular / router' वरुन;'rxjs / Observable' वरून {Observable} आयात करा;आयात करा {Todo} from '. /करण्यासाठी';आयात करा {TodoDataService} पासून ' / todo- डेटा सेवा ';@ इंजेक्शन   निर्यात वर्ग TodosResolver implements निराकरण  > {कन्स्ट्रक्टर (खाजगी TOD डेटा सेवा: TodoDataService) {}सार्वजनिक निराकरण (मार्ग: सक्रिय केलेले मार्ग स्नॅपशॉट,स्थिती: रूटरस्टेट स्नॅपशॉट): निरिक्षक    {हे परत करा. todoDataService. getAllTodos   ;}}    

    आम्ही रिझॉल्व्हर एक वर्ग म्हणून परिभाषित करतो जे निराकरण इंटरफेस

    निराकरण इंटरफेस पर्यायी आहे, परंतु आमच्या टाइपस्स्क्रिप्ट आयडीई किंवा कंपाइलरला आमच्या निराकरण पद्धतीची अंमलबजावणी करणे आवश्यक करून योग्य श्रेणी कार्यान्वित केल्याची खात्री करते.

    जर निराकरण पद्धत एक आश्वासन परत करते किंवा एक दृश्यमान कोणीतरी रूटर ते वायदेचे घटक सक्रिय करण्यापूर्व

    March 1, 2018