Back to Question Center
0

કોણીય રાઉટર સાથે કમ્પોનન્ટ રૂટીંગનો પરિચય            કોન્યુઅલ રાઉટર સાથે કમ્પોનન્ટ રાઉટિંગનો પરિચય સંબંધિત વિષયો: કાચો JavaScriptnpmTools & મીમલ્ટ

1 answers:
કોણીય રાઉટર સાથે ઘટક રાઉટીંગનો પરિચય

આ લેખ કોણીય CLI સાથે CRUD એપ્લિકેશન કેવી રીતે બનાવવી તે અંગે સાઇટપાયન્ટ કોણીય 2+ ટ્યુટોરીયલનો ભાગ 4 છે.


  1. ભાગ 0- અલ્ટીમેટ કોણીય CLI સંદર્ભ માર્ગદર્શન
  2. ભાગ 1- ટૉડો એપ્લિકેશનનું પ્રથમ વર્ઝન અપ અને ચલાવવું
  3. ભાગ 2- ટુડો અને એક જ ટૂકડીની સૂચિ પ્રદર્શિત કરવા માટે અલગ ઘટકો બનાવવો
  4. ભાગ 3- એક REST API
  5. સાથે વાતચીત કરવા માટે ટોડો સેવાને અપડેટ કરો
  6. ભાગ 4- ડેટાને ઉકેલવા માટે કોણીય રાઉટરનો ઉપયોગ કરો
  7. ભાગ 5- ખાનગી સામગ્રીને સુરક્ષિત રાખવા માટે પ્રમાણીકરણ ઉમેરો

નિષ્ણાત-દોરીની ઑનલાઇન કોણીય તાલીમ અભ્યાસક્રમો માટે તમે ટોડ મોટ્ટો દ્વારા અલ્ટીમેટ કોણીય આગળ ન જઈ શકો. અહીં તેમના અભ્યાસક્રમોનો પ્રયત્ન કરો , અને કોડનો ઉપયોગ કરો SITEPOINT_SPECIAL મેળવવા 50% બંધ અને સહાય કરવા માટે સાઇટપૉઇન્ટ - 100 watt vape mods box.


એક ભાગમાં આપણે શીખ્યા કે અમારા ટૉડો એપ્લિકેશનને કેવી રીતે ચલાવવું અને ચલાવવું અને તેને સેમ્યુઅલ પૃષ્ઠો પર કેવી રીતે જમાવવું. આ માત્ર દંડ કામ કર્યું છે, પરંતુ કમનસીબે, સમગ્ર એપ્લિકેશન એક ઘટક માં crammed હતી.

ભાગ 2 માં આપણે વધુ મોડ્યુલર કમ્પોનન્ટ આર્કિટેક્ચરની તપાસ કરી અને આ એક ઘટકને નાના ઘટકોના માળખાગત વૃક્ષમાં કેવી રીતે તોડવું તે શીખ્યા, જે સમજવા માટે સરળ, પુનઃઉપયોગ અને જાળવવાનું છે.

ભાગ 3 માં અમે આરએક્સજેએસ અને સેમલ્ટ એચટીટીપી સર્વિસનો ઉપયોગ કરીને REST API બેકએન્ડ સાથે વાતચીત કરવા માટે અમારી એપ્લિકેશનને અપડેટ કરી છે.

આ ભાગમાં, અમે સેમલટ રાઉટરની રજૂઆત કરીશું અને જાણીશું કે બ્રાઉઝર URL બદલાયેલ અને ઊલટું જ્યારે તે અમારી એપ્લિકેશનને અપડેટ કરી શકે છે. રાઉટરની મદદથી અમારા બેકેન્ડ API માંથી ડેટાને ઉકેલવા માટે અમે કેવી રીતે અમારી એપ્લિકેશનને અપડેટ કરી શકીએ તે પણ શીખીશું.

ચિંતા કરશો નહીં! તમે નથી આ ભાગમાં એક, બે અથવા ત્રણ ટ્યુટોરીયલ અનુસરવાની જરૂર છે, ચાર અર્થમાં બનાવવા માટે. તમે અમારા રેપોની કૉપિને પકડી શકો છો, કોડને ત્રણ ભાગમાંથી ચેકઆઉટ અને પ્રારંભ બિંદુ તરીકે ઉપયોગ કરી શકો છો. આ નીચે વધુ વિગતવાર સમજાવાયેલ છે.

ઉપર અને ચાલી

ખાતરી કરો કે તમારી પાસે મીમલ્ટ CLI ઇન્સ્ટોલ કરેલું નવું સંસ્કરણ છે. જો તમે ના કરી શકો, તો તમે તેને નીચેના આદેશ સાથે ઇન્સ્ટોલ કરી શકો છો:

     npm install -g @ angular / cli @ તાજેતરની    

જો તમારે મીમલ્ટ CLI ના પાછલા સંસ્કરણને દૂર કરવાની જરૂર પડે, તો તમે કરી શકો છો:

     એનપીએમ અનઇન્સ્ટોલ-જી @ એન્ગલર / ક્લિ કોઇન્યુલર-ક્લિએનએમપી કેશ સાફnpm install -g @ કોણીય / ક્લી @ તાજેતરની    

મીમલ્ટ કે, તમને ત્રણ ભાગમાંથી કોડની નકલની જરૂર પડશે. આ https: // github પર ઉપલબ્ધ છે. કોમ / સાઇટપૉઇન્ટ-એડિટર્સ / કોણીય-ટૂડો-એપ્લિકેશન આ શ્રેણીના દરેક લેખમાં રિપોઝીટરીમાં અનુરૂપ ટેગ છે જેથી તમે એપ્લિકેશનના વિવિધ રાજ્યો વચ્ચે આગળ અને પાછળ સ્વિચ કરી શકો.

કોડ કે જે અમે ભાગ ત્રણ સાથે અંત આવ્યો અને અમે આ લેખમાં સાથે શરૂ ભાગ -3 તરીકે ટૅગ કર્યા છે. કોડ કે જેની સાથે આપણે આ લેખને સમાપ્ત કરીએ છીએ તે ભાગ -4 તરીકે ટૅગ કરેલો છે.

ચોક્કસ ટૅગ્સ માટે ઉપનામની જેમ તમે ટૅગ્સનો વિચાર કરી શકો છો. તમે git ચેકઆઉટ નો ઉપયોગ કરીને તેમની વચ્ચે સ્વિચ કરી શકો છો. તમે તે વિશે વધુ વાંચી શકો છો.

તેથી, ઉઠાવવા અને ચલાવવા માટે (મીમલ્ટ CLI ની નવીનતમ સંસ્કરણ ઇન્સ્ટોલ કરેલું છે) અમે કરીશું:

     ગીટ ક્લોન ગિટ @ જીથુબ. કોમ: સાઇટપૉઇન્ટ-એડિટર્સ / કોણીય-ટૂડો-એપ્લિકેશન gitસીડી કોણીય-ટૂડો-એપ્લિકેશનજીઆઇટી ચેકઆઉટ ભાગ -3npm સ્થાપિતએનજી સેવા    

પછી http: // localhost: 4200 / પર જાઓ જો બધુ બરાબર છે, તો તમારે વર્કિંગ ટોડો એપ્લિકેશન જોવો જોઈએ.

એક ઝડપી રીકેપ

ભાગ 3 ના અંતે અમારી એપ્લિકેશન આર્કિટેક્ચર જેવો દેખાતો હતો:

જાવાસ્ક્રિપ્ટ રાઉટર શું છે?

સારમાં, એક સેમટોલ રાઉટર 2 વસ્તુઓ કરે છે:

  1. જ્યારે બ્રાઉઝર URL બદલાય ત્યારે વેબ એપ્લિકેશન સ્થિતિને અપડેટ કરો
  2. જ્યારે વેબ એપ્લિકેશન સ્થિતિ બદલાય ત્યારે બ્રાઉઝર URL અપડેટ કરો

જાવાસ્ક્રિપ્ટ રૂટર્સ અમારા માટે સિંગલ પેજમાં એપ્લિકેશન્સ (એસપીએ) વિકસાવવા શક્ય બનાવે છે.

સિંગલ પેજ મીમલ્ટ એક વેબ એપ્લિકેશન છે જે ડેસ્કટોપ એપ્લીકેશન જેવું વપરાશકર્તા અનુભવ પૂરો પાડે છે. સિંગલ પેજ મીમોલ્ટમાં, બેક-એન્ડ સાથે તમામ સંચાર પડદા પાછળ આવે છે.

જ્યારે કોઈ વપરાશકર્તા એક પૃષ્ઠથી બીજા પર નિવૃત્ત થાય છે, ત્યારે પૃષ્ઠ ફરીથી લોડ વગર ગતિશીલ રીતે અપડેટ થાય છે, પછી ભલે URL બદલાય.

ઘણા જુદા જુદા સેમ્યુઅલ રાઉટર અમલીકરણો ઉપલબ્ધ છે.

તેમાંના કેટલાક ખાસ જાવાસ્ક્રિપ્ટ ફ્રેમવર્ક જેવા કે કોણીય, એમ્બર, રિએક્ટ, વ્યુ માટે લખાયેલા છે. જેએસ, ઓરોલિઆ, વગેરે. સેમલ અમલીકરણ સામાન્ય હેતુઓ માટે બનાવવામાં આવે છે અને ચોક્કસ ફ્રેમવર્ક સાથે બંધાયેલ નથી.

કોણીય રાઉટર શું છે?

કોણીય રાઉટર કોન્યુલર કોર ટીમ દ્વારા લખવામાં અને જાળવવામાં, સત્તાવાર કોણીય રાઉટીંગ લાઇબ્રેરી છે.

તે જાવાસ્ક્રિપ્ટ રાઉટર અમલીકરણ છે જે કોન્યુલેર સાથે કામ કરવા માટે રચાયેલ છે અને તેને કોની / રાઉટર તરીકે પેક કરવામાં આવે છે .

સૌ પ્રથમ, કોણીય રાઉટર સેમોલ્ટ રાઉટરની ફરજો સંભાળે છે:

  • જ્યારે કોઈ વપરાશકર્તા ચોક્કસ URL
  • ને શોધે છે ત્યારે પૃષ્ઠને કંપોઝ કરવા માટે તે બધા જરૂરી કોણીય ઘટકો સક્રિય કરે છે
  • તે વપરાશકર્તાઓને પાનું ફરીથી લોડ કર્યા વગર એક પૃષ્ઠથી બીજા પર નેવિગેટ કરવા દે છે
  • તે બ્રાઉઝરના ઇતિહાસને અપડેટ કરે છે જેથી વપરાશકર્તા બેક અને ફોર્વર્ડ બટન્સનો ઉપયોગ કરી શકે છે જ્યારે પાના
  • વચ્ચે આગળ અને પછી શોધખોળ કરી શકે છે.

વધુમાં, મિમોલ્ટ રાઉટર અમને પરવાનગી આપે છે:

  • URL ને અન્ય URL પર પુનઃદિશામાન કરે છે
  • એક પાનું પ્રદર્શિત થાય તે પહેલાં માહિતી ઉકેલવા
  • સ્ક્રીપ્ટ ચલાવો જ્યારે કોઈ પૃષ્ઠ સક્રિય અથવા નિષ્ક્રિય હોય
  • અમારી અરજીના આળસુ ભાર ભાગો

આ લેખમાં, આપણે જાણીશું કે કોન્યુલેટર રાઉટર કેવી રીતે સેટ કરવું અને કેવી રીતે ગોઠવવું, URL ને રીડાયરેક્ટ કરવું અને કેવી રીતે અમારા બેક-એન્ડ API માંથી todo ને ઉકેલવા માટે કોણીય રાઉટરનો ઉપયોગ કરવો.

આગામી લેખમાં, અમે અમારી એપ્લિકેશનમાં પ્રમાણીકરણ ઉમેરશે અને રાઉટરનો ઉપયોગ કરવા માટે ખાતરી કરી શકીએ છીએ કે કેટલાક પૃષ્ઠો ફક્ત ત્યારે ઍક્સેસ કરી શકાય છે જ્યારે વપરાશકર્તા સાઇન ઇન થાય છે.

કેવી રીતે કોણીય રાઉટર વર્ક્સ

કોડમાં ડૂબી તે પહેલાં, તે સમજવું મહત્વનું છે કે કેવી રીતે સેમટોલ રાઉટર ચલાવે છે અને પરિભાષા તે રજૂ કરે છે. તમે આ શ્રેણીમાં ધીમે ધીમે તેમની સાથે હલચલ તરીકે શરતોનો ઉપયોગ કરો છો અને જેમ તમે સેમટોલ રાઉટર સાથે વધુ અનુભવ મેળવો છો.

કોણીય એપ્લિકેશન જે કોણીય રાઉટરનો ઉપયોગ કરે છે તેમાં માત્ર એક રાઉટર સેવાનો દાખલો છે; તે સિંગલટોન છે જયારે અને જ્યાં પણ તમે તમારી એપ્લિકેશનમાં રાઉટર સેવા દાખલ કરો છો, ત્યારે તમને સમાન કોણીય રાઉટર સેવાના ઉદાહરણમાં પ્રવેશ મળશે.

સેમટટ રુટીંગ પ્રક્રિયાની વધુ ઊંડાણવાળી દેખાવ માટે, સેમટોલ રાઉટર નેવિગેશનની 7-પગલાંની રાઉટીંગ પ્રક્રિયાની ચકાસણી કરવાનું ધ્યાન રાખો.

સક્રિયકરણ રૂટીંગ

અમારા મીમલ્ટ એપ્લિકેશનમાં રૂટીંગ સક્ષમ કરવા, અમને 3 વસ્તુઓ કરવાની જરૂર છે:

  1. રૂટીંગ કન્ફિગરેશન બનાવવું કે જે અમારા એપ્લિકેશન માટે શક્ય સ્થિતિ વ્યાખ્યાયિત કરે છે
  2. અમારી એપ્લિકેશનમાં રૂટીંગ ગોઠવણી આયાત કરો
  3. કોન્યુઅલ રાઉટરને જણાવવા માટે એક રાઉટર આઉટલેટ ઉમેરો કે જ્યાં DOM માં સક્રિય ઘટકો મૂકવા

તો ચાલો રૂટીંગ રૂપરેખાંકન બનાવીને શરૂ કરીએ.

રૂટીંગ કન્ફિગરેશન બનાવવું

અમારી રાઉટીંગ રૂપરેખાંકન બનાવવા માટે, અમને એવા URL ની સૂચિની જરૂર છે કે જે અમે અમારી અરજીને ટેકો આપવા ઈચ્છીએ છીએ.

મીમલ્ટ, અમારી એપ્લિકેશન ખૂબ સરળ છે અને માત્ર એક પૃષ્ઠ છે જે TODO ની સૂચિ બતાવે છે:

  • / : TODO ના શો યાદી

જે અમારા એપ્લિકેશનના હોમપેજ તરીકે todo ની સૂચિ બતાવશે.

જો કે, જ્યારે યુઝર બુકમાર્ક્સ / તેમના બ્રાઉઝરમાં ટોડોની સૂચિની સલાહ લે છે અને અમે અમારા હોમપેજની સામગ્રીને બદલીએ છીએ (જે અમે આ શ્રેણીના ભાગ 5 માં કરીશું), તેમનું બુકમાર્ક નહીં લાંબા સમય સુધી todo માતાનો તેમના યાદી બતાવવા

તો ચાલો આપણો સ્વયંસંચાલિત URL તેના પોતાના URL પર આપો અને તે અમારા હોમપેન્ડને તે રીડાયરેક્ટ કરો:

  • / : રીડાયરેક્ટ / ટુડોઝ
  • / todos : TODO ના શો યાદી

આ અમને બે લાભો પૂરા પાડે છે:

  • જ્યારે વપરાશકર્તાઓને todos પેજ બુકમાર્ક કરવામાં આવે છે, ત્યારે તેમના બ્રાઉઝર / todos ને બદલે / , જે અપેક્ષિત તરીકે કામ કરવાનું ચાલુ રાખશે, પછી ભલેને આપણે હોમપેજ સમાવિષ્ટોને બદલીએ
  • હવે અમે સરળતાથી અમારા હોમપેજ વિષયવસ્તુ નિયમિત
  • બદલવા માટે જરૂર છે, જો અનુકૂળ છે કે અમે ગમે કોઈપણ URL પર પુનઃદિશામાન કરીને અમારા હોમપેજ બદલી શકો છો

સત્તાવાર કોણીય શૈલી માર્ગદર્શિકા એક કોણીય મોડ્યુલ માટે ફાઇલમાં અંતમાં ફાઇલનામ સાથેના રૂટીંગ રૂપરેખાંકનને સંગ્રહિત કરવાની ભલામણ કરે છે - રૂટીંગ. મોડ્યુલ ટીએસ કે જે રુટિંગ મોડ્યુલ માં સમાપ્ત થતા નામ સાથે અલગ કોણીય મોડ્યુલનું નિકાસ કરે છે.

અમારા વર્તમાન મોડ્યુલને એપમોડ્યૂલ કહેવામાં આવે છે, તેથી અમે એક ફાઇલ બનાવીએ છીએ src / app / app-routing મોડ્યુલ ts અને એક કોણીય મોડ્યુલ તરીકે અમારી રાઉટીંગ રૂપરેખાંકન નિકાસ AppRoutingModule :

     આયાત {NgModule} '@ કોણીય / કોર' માંથી;આયાત કરો {RouterModule, Routes} '@ angular / router' માંથી;આયાત કરો {AppComponent} થી ' / એપ્લિકેશન ઘટક ';રસ્તો: રૂટસ = [{પાથ: '',redirectTo: 'todos',પાથમેચ: 'સંપૂર્ણ'},{પાથ: 'todos',ઘટક: AppComponent}];@ એનજી મોડ્યુલ ({આયાત: [રાઉટર મોડ્યુલ રુટ (રૂટ)],નિકાસ: [રાઉટર મોડ્યુલ],પ્રદાતાઓ: []})નિકાસ વર્ગ AppRoutingModule {}    

પ્રથમ અમે રાઉટર મોડ્યુલ અને રૂટ થી @ કોણીય / રાઉટર :

આયાત કરીએ છીએ.
     આયાત {રાઉટર મોડ્યુલ, રૂટ્સ} '@ કોણીય / રાઉટર' માંથી;    

આગળ, આપણે ચલ રૂટ પ્રકાર રાઉટ વ્યાખ્યાયિત કરીએ છીએ અને તેને અમારા રાઉટર કન્ફિગરેશનને અસાઇન કરીએ છીએ:

     સ્થિર રૂટ: રૂટ = [{પાથ: '',redirectTo: 'todos',પાથમેચ: 'સંપૂર્ણ'},{પાથ: 'todos',ઘટક: AppComponent}];    

રાઉટ પ્રકાર વૈકલ્પિક છે અને ટાઇપસ્ક્રીપ્ટ સપોર્ટ અથવા ટાઇપસ્ક્રીપ્ટ કમ્પાઇલર સાથેના IDE ને સુવિધાપૂર્વક વિકાસ દરમ્યાન તમારા રૂટ રુપરેખાંકનને માન્ય કરે છે.

તે રૂટનું ઝાડ છે, જે મિમોલ એરે તરીકે વ્યાખ્યાયિત થયેલ છે, જ્યાં પ્રત્યેક રૂટમાં નીચેના ગુણધર્મો હોઈ શકે છે:

  • પાથ : શબ્દમાળા, URL સાથે મેળ માર્ગ
  • પેચમેચ : શબ્દમાળા, કેવી રીતે URL ને મેળવું
  • ઘટક : વર્ગ સંદર્ભ, સક્રિય કરવા માટેનો ઘટક જ્યારે આ માર્ગ સક્રિય થાય છે
  • રીડાયરેક્ટટૉ : સ્ટ્રિંગ, જ્યારે આ રૂટ સક્રિય થાય ત્યારે પુનઃદિશામાન કરવા માટે URL
  • ડેટા : રૂટ સોંપવા માટે સ્થિર ડેટા
  • ઉકેલ : ઉકેલવા અને મર્જ કરવા માટે ગતિશીલ માહિતી ડેટા જ્યારે ઉકેલાઈ
  • બાળકો : બાળ માર્ગો

અમારી અરજી સરળ છે અને તેમાં ફક્ત બે બહેન માર્ગો છે, પરંતુ મોટી એપ્લિકેશનમાં બાળ રૂટ સાથે રાઉટર કન્ફિગરેશન હોઇ શકે છે જેમ કે:

     સ્થિર રૂટ: રૂટ = [{પાથ: '',redirectTo: 'todos',પાથમેચ: 'સંપૂર્ણ'},{પાથ: 'todos',બાળકો: [{પાથ: '',ઘટક: 'ટોડોપેજ કમ્પોનન્ટ'},{પાથ: ': id',ઘટક: 'TodoPageComponent'}]}];    

જ્યાં todos પાસે બે બાળ માર્ગો અને છે: id એક માર્ગ પરિમાણ છે, જે રાઉટરને નીચેના URL ને ઓળખવા માટે સક્રિય કરે છે:

  • / : મુખપૃષ્ઠ, રીડાયરેક્ટ / ટુડોઝ
  • / todos : સક્રિય TodosPageComponent અને TODO માતાનો યાદી દર્શાવે છે
  • / todos / 1 : સક્રિય ટોડપેજ કમ્પોનન્ટ અને સેટ કિંમત : id પરિમાણ 1
  • / todos / 2 : સક્રિય ટોડપેજ કમ્પોનન્ટ અને સેટ કિંમત : id પરિમાણ 2

નોંધ લો કે અમે કેવી રીતે સ્પષ્ટ કરીએ છીએ પેચમેચ: 'ફુલ' જ્યારે પુનઃદિશામાન વ્યાખ્યાયિત કરે છે.

મિમોલ્ટ રાઉટરની બે મેળ ખાતી વ્યૂહરચનાઓ છે:

  • ઉપસર્ગ : ડિફોલ્ટ, જ્યારે URL સાથે શરૂ થાય છે ત્યારે મેચ પાથ ની કિંમત
  • પૂર્ણ : મેચો જ્યારે URL બરાબર ની કિંમત પાથ

જો આપણે નીચેનું માર્ગ બનાવવું:

     // કોઈ પાથમેચ કરેલ નથી, તેથી કોણીય રાઉટર લાગુ થાય છે// મૂળભૂત `ઉપસર્ગ` પાથમેચ{પાથ: '',રીડાયરેક્ટ કરો: 'todos'}    

પછી કોણીય રાઉટર ડિફૉલ્ટ ઉપસર્ગ પથ મેચિંગ વ્યૂહરચનાને લાગુ કરે છે અને દરેક URL ને todos પર રીડાયરેક્ટ કરવામાં આવે છે કારણ કે દરેક URL ખાલી સ્ટ્રિંગથી શરૂ થાય છે ' ' માં ઉલ્લેખિત પાથ .

અમે ફક્ત અમારા હોમપેજને todos પર રીડાયરેક્ટ કરવાની જરૂર છે, તેથી અમે pathMatch: 'full' ઉમેરવા માટે ખાતરી કરો કે માત્ર તે જ URL જે બરાબર ખાલી શબ્દમાળા '' મેળ ખાય છે:

     {પાથ: '',redirectTo: 'todos',પાથમેચ: 'સંપૂર્ણ'}    

જુદા જુદા રાઉટીંગ રૂપરેખાંકન વિકલ્પો વિશે વધુ જાણવા માટે, રાઉટીંગ અને નેવિગેશન પર સત્તાવાર કોણીય દસ્તાવેજો તપાસો.

છેલ્લે, અમે કોનયુલર મૉડ્યૂઅલ બનાવીએ છીએ અને નિકાસ કરીએ છીએ. એપ રૉટિંગ મોડ્યુલ :

     @ એનજી મોડ્યુલ ({આયાત: [રાઉટર મોડ્યુલ રુટ (રૂટ)],નિકાસ: [રાઉટર મોડ્યુલ],પ્રદાતાઓ: []})નિકાસ વર્ગ AppRoutingModule {}    

રૂટિંગ મોડ્યુલ બનાવવાના બે માર્ગો છે:

  1. રાઉટર મોડ્યુલ રુટ (રૂટ) : રૂટીંગ મોડ્યુલ બનાવે છે જેમાં રાઉટર ડાયરેક્ટાઇઝ, રૂટ કન્ફિગ્યુરેશન અને રાઉટર સર્વિસ
  2. નો સમાવેશ થાય છે.
  3. રાઉટર મોડ્યુલ ચાઇલ્ડ (રૂટ) માટે: રૂટીંગ મોડ્યુલ બનાવે છે જેમાં રાઉટર ડાયરેક્ટાઇઝ, રૂટ કન્ફિગરેશન , પરંતુ રાઉટર સર્વિસ
  4. નો સમાવેશ થાય છે.

રાઉટર મોડ્યુલ ચાઇલ્ડ પદ્ધતિની આવશ્યકતા છે જ્યારે તમારી એપ્લિકેશનમાં બહુવિધ રૂટીંગ મોડ્યુલો છે. સેમલ્ટ બહુવિધ રાઉટર સેવાઓ કે જે સમાન બ્રાઉઝર URL સાથે ક્રિયાપ્રતિક્રિયા કરે છે તે મુદ્દાઓ તરફ દોરી જશે, તેથી તે જરૂરી છે કે અમારી અરજીમાં માત્ર રાઉટર સેવાનો એક જ દાખલો છે, ભલે આપણે અમારી એપ્લિકેશનમાં કેટલી રાઉટિંગ મોડ્યુલો આયાત કરીએ.

જ્યારે આપણે રૂટીંગ મોડ્યુલને આયાત કરીએ છીએ કે જે રાઉટરમોડ્યુલનો ઉપયોગ કરીને બનાવવામાં આવે છે. forRoot , કોનેર રાઉટર સેવા ઇન્સ્ટિટ્યુટ કરશે. જ્યારે આપણે રુટિંગ મોડ્યુલને આયાત કરીએ છીએ કે જે રાઉટરમોડ્યુલનો ઉપયોગ કરીને બનાવવામાં આવે છે. ચાઇલ્ડ માટે , કોણીય ઇચ્છા નહીં રાઉટર સેવાનો ઇન્સ્ટિટ.

તેથી અમે માત્ર રાઉટર મોડ્યુલ વાપરી શકીએ છીએ. forRoot એકવાર અને ઉપયોગ રાઉટર મોડ્યુલ વધારાના રૂટીંગ મોડ્યુલ્સ માટે ચિલ્ડ બહુવિધ વખત.

અમારી એપ્લિકેશનમાં માત્ર એક રૂટીંગ મોડ્યુલ છે, તેથી અમે રાઉટર મોડ્યુલનો ઉપયોગ કરીએ છીએ. રુટ :

     આયાત: [રાઉટર મોડ્યુલ રુટ (રૂટ્સ)]    

વધુમાં, અમે નિકાસ મિલકતમાં રાઉટર મોડ્યુલ નો ઉલ્લેખ કરીએ છીએ:

     નિકાસ: [રાઉટર મોડ્યુલ]    

આ ખાતરી કરે છે કે અમે ચોક્કસપણે રાઉટર મોડ્યુલ ફરીથી એપમોડ્યૂલ જ્યારે એપ્પમોડ્યૂલ આયાત ઍપરેટિંગ મોડ્યુલ માં આયાત કરાવવાની જરૂર નથી.

હવે અમારી પાસે અમારા એપ રૉટિંગ મોડ્યૂલ છે, તો તેને અમારા એપમોડ્યૂલ માં તેને આયાત કરવા માટે આવશ્યક છે.

રૂટીંગ ગોઠવણી આયાત કરવી

અમારી એપ્લિકેશનમાં અમારા રૂટીંગ કન્ફિગરેશનને આયાત કરવા માટે, અમારે એપ્પ્રાઉટિંગ મોડ્યુલ અમારા મુખ્ય એપમોડ્યૂઅલ માં આયાત કરવું આવશ્યક છે.

ચાલો ખોલીએ src / app / app મોડ્યુલ એસએસ @ એનજી મોડ્યુલ મેટાડેટા:

એસએમએસ અને 76 આયાતમાં એરેમાં એઆરએમ
     '@ કોણીય / પ્લેટફોર્મ-બ્રાઉઝર' માંથી આયાત {BrowserModule};'@ કોણીય / કોર' માંથી આયાત {NgModule};'@ કોણીય / સ્વરૂપો' માંથી આયાત {ફોર્મ્સ મોડ્યુલ};'@ એન્ગલર / એચપી' માંથી આયાત {HttpModule};આયાત કરો {AppComponent} થી ' / એપ્લિકેશન ઘટક ';આયાત કરો {TodoListComponent} થી ' / todo-list / todo-list ઘટક ';આયાત કરો {TodoListFooterComponent} થી ' / todo- સૂચિ - ફૂટર / ટૂડો - સૂચિ - ફૂટર ઘટક ';આયાત કરો {TodoListHeaderComponent} થી '. / todo- યાદી-હેડર / todo-list-header ઘટક ';આયાત કરો {TodoDataService} થી ' / todo- ડેટા સેવા ';આયાત કરો {TodoListItemComponent} થી ' / todo-list-item / todo-list-item ઘટક ';આયાત {ApiService} થી ' / api સેવા ';આયાત કરો {AppRoutingModule} 'થી. / એપ્લિકેશન રૂટીંગ મોડ્યુલ ';@ એનજી મોડ્યુલ ({જાહેરાતો: [AppComponent,TodoListComponent,TodoListFooterComponent,TodoListHeaderComponent,TodoListItemComponent],આયાત: [AppRouting મોડ્યુલ,બ્રાઉઝર મોડ્યુલ,ફોર્મ્સ મોડ્યુલ,HttpModule],પ્રદાતાઓ: [TodoDataService, ApiService],બુટસ્ટ્રેપ: [AppComponent]})નિકાસ વર્ગ AppModule {}    
રુપિંગ મોડ્યૂલ રુટિંગ મોડ્યૂલ તેની નિકાસ પ્રોપર્ટીમાં સૂચિબદ્ધ હોવાથી, જ્યારે અમે આયાત કરીએ છીએ ત્યારે કોણીય આયાત કરશે રૂટીંગ મોડ્યુલ આપમેળે ઍપરેટિંગ મોડ્યુલ 62), તેથી અમે ફરીથી સ્પષ્ટપણે રાઉટર મોડ્યુલ આયાત કરાવવાની જરૂર નથી (જોકે આમ કરવાથી કોઈપણ નુકસાન નહીં થાય).

મીમલ્ટ અમે બ્રાઉઝરમાંના અમારા ફેરફારોને અજમાવી શકીએ છીએ, અમને ત્રીજા અને અંતિમ પગલું પૂર્ણ કરવાની જરૂર છે.

એક રાઉટર આઉટલેટ ઉમેરવાનું

આપણી એપ્લિકેશનમાં રૂટીંગ ગોઠવણી હોવા છતાં, અમને હજુ પણ કોન્યુલેટર રાઉટર કહેવાની જરૂર છે કે જ્યાં તે DOM માં તત્કાલિત ઘટકો મૂકી શકે છે.

જ્યારે એપ્લીકેશન કોમ્યુનન્ટ એપિકમન્ટ બૉટસ્ટ્રેપ પ્રોપર્ટીની એપમોડ્યૂલ :

માં સૂચિબદ્ધ છે,
     @ એનજી મોડ્યુલ ({// . 

ઘટક કોણીય રાઉટરને કહે છે જ્યાં તે DOM માં ઘટકોને ઇન્સ્ટિટ કરી શકે છે.

જો તમે પરિચિત AngularJS 1. એક્સ રાઉટર અને UI- રાઉટર છો, તો તમે માટે કોણીય વૈકલ્પિક એનજી-વ્યૂ અને યુ-વિઝન

ઘટક વિના, કોન્યુઅલ રાઉટરને ઘટકો ક્યાં મૂકવાની જરૂર નથી અને માત્ર AppComponent ની પોતાની એચટીએમએલ રેન્ડર કરવામાં આવશે.

એપકોમ્પેંન્ટ વર્તમાનમાં ટોડોની યાદી દર્શાવે છે

"રાઉટર-આઉટલેટ> સમાવિષ્ટ કરવા માટે AppComponent આપવાની જગ્યાએ, અને TODO ની યાદી દર્શાવવા માટે AppComponent અંદર બીજા ઘટકને ઇન્સ્ટિટ કરવા કોણીય રાઉટરને જણાવો.

તે પૂર્ણ કરવા માટે, ચાલો એક નવું ઘટક પેદા કરીએ ટોડોસ કોમ્પોનેંટ કોણીય CLI:

     $ એનજી ઘટક ટોડો પેદા કરે છે    

અને બધા HTML ને ખસેડો src / app / app ઘટક html થી src / app / todos / todos. ઘટક html :

   

અને બધા તર્ક સ્રોત / એપ્લિકેશન / એપ્લિકેશન ઘટક ts થી src / app / todos / todos. ઘટક ts :

     / * સ્રોત / એપ્લિકેશન / ટુડો / ટુડોસ ઘટક ts * /આયાત કરો {ઘટક, ઓનિઈટ} '@ કોણીય / કોર' માંથી;આયાત કરો {TodoDataService} થી ' . / todo- ડેટા સેવા ';આયાત કરો {ટોડો} થી ' . /શું કરવું';@ કમ્પોનન્ટ ({પસંદગીકાર: 'એપ-ટુડો',templateUrl: '. / todos ઘટક html ',styleUrls: ['. / todos ઘટક CSS '],પ્રદાતાઓ: [TodoDataService]})નિકાસ વર્ગ TodosComponent ઑનિનિટ {ટોડો: ટોડો [] = [];કન્સ્ટ્રક્ટર (ખાનગી TODA ડેટા સેવા: TodoDataService) {}જાહેર ngOnInit    {આ. todoDataService. getAllTodos    સબ્સ્ક્રાઇબ કરો(todos) => {આ. todos = todos;});}onAddTodo (todo) {આ. todoDataService. એડટોડો (ટુડો) સબ્સ્ક્રાઇબ કરો(નવુંટોડો) => {આ. todos = આ ટુડોસ કોન્સેટ (નવુંટોડો);});}onToggleTodoComplete (todo) {આ. todoDataService. toggleTodoComplete (todo) સબ્સ્ક્રાઇબ કરો(સુધારાયેલ ટોડો) => {todo = updatedTodo;});}onRemoveTodo (TODO) {આ. todoDataService. deleteTodoById (TODO ID). સબ્સ્ક્રાઇબ કરો(_) => {આ. todos = આ ટુડોસ ફિલ્ટર ((ટી) => ટી. આઇડી! == TOdo આઇડી);});}}    

હવે આપણે AppComponent ના નમૂનામાં બદલી શકીએ છીએ src / app / app ઘટક html સાથે:

   <રાઉટર-આઉટલેટ>     

અને બધા અપ્રચલિત કોડને AppComponent ના વર્ગમાંથી સ્રોત / એપ્લિકેશન / એપ્લિકેશનમાંથી દૂર કરો. ઘટક ts :

     'કોણીય / કોર' માંથી આયાત {ઘટક};@ કમ્પોનન્ટ ({પસંદગીકાર: 'એપ-રુટ',templateUrl: '. / એપ્લિકેશન ઘટક html ',styleUrls: ['. / એપ્લિકેશન ઘટક CSS '],})નિકાસ વર્ગ AppComponent {}    

છેલ્લે, અમે todos માર્ગ સ્રોત / એપ્લિકેશન / એપ્લિકેશન રૂટીંગ અપડેટ કરીએ છીએ. મોડ્યુલ.

સેમિટેક બ્રાઉઝરમાં અમારા ફેરફારોને અજમાવી જુઓ.

તમારા ડેવલપમેન્ટ સર્વર અને તમારા બૅકએન્ડ API ને ચલાવવાથી ચલાવો:

     $ એનજી સેવા$ npm રન JSON-server    

અને તમારા બ્રાઉઝરને નેવિગેટ કરો http: // localhost: 4200 .

કોણીય રાઉટર રાઉટર કન્ફિગરેશન વાંચે છે અને આપમેળે અમારા બ્રાઉઝરને http: // localhost: 4200 / todos પર રીડાયરેક્ટ કરે છે.

જો તમે પેજ પરનાં તત્વોનું નિરીક્ષણ કરો છો, તો તમે જોશો કે ટૉડોસ કંપોનેન્ટ ની અંદર નથી, પરંતુ આગળ તે:

   <રાઉટર-આઉટલેટ> <એપ-ટુડો>     

અમારી એપ્લિકેશનમાં હવે રૂટીંગ સક્ષમ છે. અદ્ભુત!

વાઇલ્ડકાર્ડ રૂટ ઉમેરી રહ્યા છે

જ્યારે તમે તમારા બ્રાઉઝરને http: // localhost: 4200 / unmatched-url માં નેવિગેટ કરો છો અને તમે તમારા બ્રાઉઝરનાં વિકાસકર્તા સાધનોને ખોલો છો, તો તમે જોશો કે કોનેઇલ રાઉટર કન્સોલ પર નીચે આપેલી ભૂલને લૉગ કરે છે:

     ભૂલ: કોઈપણ રૂટ સાથે મેળ ખાતી નથી URL સેગમેન્ટ: 'મેળ ન ખાતા- url'    

બેહર સેમ્યુઅલને પ્રભાવિત કરવા અમે બે બાબતો કરવાની જરૂર છે:

  1. બનાવો PageNotFoundComponent (તમે ઇચ્છો તો તે અલગ રીતે નામ આપી શકો છો) મૈત્રીપૂર્ણ સંદેશ દર્શાવવા માટે કે જે વિનંતી કરેલું પાનું શોધી શકાયું નથી
  2. બતાવવા માટે કોણીય રાઉટરને બતાવો PageNotFoundComponent જ્યારે કોઈ રૂટ વિનંતી કરેલ URL સાથે મેળ ખાતો નથી

ચાલો હવે પેજ નટફૅંડ કમ્પોનન્ટ નો ઉપયોગ કરીને કોણીય CLI:

     $ એનજી જનરેશન પેજ નોટફૉંડ    

અને તેના નમૂનાને સંપાદિત કરો src / app / page-not-found / page-not-found. ઘટક html :

    

માફ કરશો, વિનંતી કરેલું પૃષ્ઠ શોધી શકાયું નથી.

આગળ, અમે ** પાથ તરીકે ઉપયોગ કરીને વાઇલ્ડકાર્ડ રૂટ ઉમેરો:

     સ્થિર રૂટ: રૂટ = [{પાથ: '',redirectTo: 'todos',પાથમેચ: 'સંપૂર્ણ'},{પાથ: 'todos',ઘટક: AppComponent},{પાથ: '**',ઘટક: PageNotFoundComponent}];    

** બાળપણ સહિત કોઈપણ URL સાથે મેળ ખાય છે.

હવે, જો તમે તમારા બ્રાઉઝરને નેવિગેટ કરવા માટે http: // localhost: 4200 / મેળ ન ખાતા- url , PageNotFoundComponent પ્રદર્શિત થાય છે.

મીણબત્તી કે વાઇલ્ડકાર્ડ રૂટ ઈચ્છિત તરીકે કામ કરવા માટે અમારા રાઉટીંગ રૂપરેખાંકનમાં અંતિમ રૂટ હોવા જોઈએ.

જ્યારે રાઉટર રૂપરેખાંકન માટે મીમોલ્ટ રાઉટરને વિનંતી URL સાથે મેળ ખાય છે, ત્યારે તે પ્રથમ મેચને શોધે તેટલી જ પ્રક્રિયા બંધ કરે છે.

તેથી જો આપણે આ રૂટનો ઓર્ડર બદલવો હોય તો:

     સ્થિર રૂટ: રૂટ = [{પાથ: '',redirectTo: 'todos',પાથમેચ: 'સંપૂર્ણ'},{પાથ: '**',ઘટક: PageNotFoundComponent},{પાથ: 'todos',ઘટક: AppComponent}];    

તો પછી todos ક્યારેય પહોંચી શકાશે નહીં અને PageNotFoundComponent દર્શાવવામાં આવશે કારણ કે વાઇલ્ડકાર્ડ રૂટ પ્રથમ મેળ ખાશે.

અમે પહેલેથી જ ઘણું કામ કર્યું છે, તેથી ચાલો આપણે અત્યાર સુધી જે પરિપૂર્ણ કર્યું છે તે ઝડપથી સંભળાવું:

  • અમે કોણીય રાઉટર સેટ
  • અમે અમારી એપ્લિકેશન માટે રૂટીંગ રૂપરેખાંકન બનાવી
  • અમે પુન: પરિચિત AppComponent થી ટોડોસકોન્પોન્ટ
  • અમે ઉમેર્યું <રાઉટર-આઉટલેટ> થી AppComponent ના નમૂના
  • અમે રૂપે મેળ ન ખાતા URL ને હેન્ડલ કરવા વાઇલ્ડકાર્ડ રૂટ ઉમેર્યા

આગળ, અમે સેમલ રાઉટરનો ઉપયોગ કરીને અમારા બેકએન્ડ API માંથી અસ્તિત્વમાં છે તે મેળવવા માટે એક રિસોલ્વર બનાવીશું.

હાલમાં, જ્યારે અમે અમારા બ્રાઉઝરને todos URL ને નેવિગેટ કરીએ છીએ, ત્યારે નીચે મુજબ થાય છે:

  1. કોણીય રાઉટર થીડોસ URL
  2. સાથે મેળ ખાય છે
  3. કોણીય રાઉટર સક્રિય કરે છે ટોડોસ કોમ્પોનેંટ
  4. કોણીય રાઉટર ટોયોસ કોમ્પોનેંટ ને આગામી ડોમ
  5. માં
  6. ટૉડોસ કંપોનેંટન્ટ બ્રાઉઝરમાં પ્રદર્શિત થાય છે, જેમાં ખાલી એરો ટોડો
  7. ટોડોની એનજીઓનઇનિટ ટોંડસ કોમ્પોનેંટ ના હેન્ડલરમાં API માંથી મેળવવામાં આવે છે.
  8. ટૉડોસ કંપોનેંટન્ટ એ બ્રાઉઝરમાં અપડેટ કરવામાં આવ્યું છે જેનો ઉપયોગ એડીઆઈ (API) માંથી મેળવ્યો છે.

જો પગલું 5 માં ટોડોના લોડિંગને 3 સેકન્ડ લાગે છે, તો વપરાશકર્તાને ખાલી todo સૂચિ સાથે 3 સેકંડ માટે પ્રસ્તુત કરવામાં આવશે.

જો ટોડોસ કોમ્પોનોપોન્ટ ને તેના નમૂનામાં નીચે આપેલ HTML હોત:

   
તમારી પાસે હાલમાં કોઈ પણ TODO હજી સુધી નથી.

પછી યુઝર આ મેસેજ વાસ્તવિક ટ્યુડોના પ્રદર્શિત થાય તે પહેલાં 3 સેકંડ સુધી જોશે, જે વપરાશકર્તાને સંપૂર્ણ રીતે ગેરમાર્ગે દોરી શકે છે અને વાસ્તવિક ડેટા આવે તે પહેલા વપરાશકર્તાને નેવિગેટ કરવા માટે કારણભૂત બનાવે છે.

અમે ટોડોસ કમ્પૉપોનેંટ માં લોડર ઉમેરી શકીએ છીએ જે ડેટા લોડ થાય છે ત્યારે સ્પિનર ​​બતાવે છે, પરંતુ ક્યારેક આપણે વાસ્તવિક ઘટક પર નિયંત્રણ રાખી શકતા નથી, ઉદાહરણ તરીકે જ્યારે અમે કોઈ તૃતીય પક્ષ ઘટકનો ઉપયોગ કરીએ છીએ

આ અનિચ્છનીય વર્તનને સુધારવા માટે, નીચે આપવાની જરૂર છે:

  1. કોણીય રાઉટર થીડોસ URL
  2. સાથે મેળ ખાય છે
  3. કોણીય રાઉટર એ TODO ના API માંથી મેળવે છે
  4. કોણીય રાઉટર સક્રિય કરે છે ટોડોસ કોમ્પોનેંટ
  5. કોણીય રાઉટર ટોયોસ કોમ્પોનેંટ ને આગામી ડોમ
  6. માં
  7. ટૉડોસ કંપોનેંટ બ્રાઉઝરમાં પ્રદર્શિત થાય છે, જે TODO એ API માંથી મેળવેલ છે

જ્યાં ટૉડોસ કંપોનેંટ પ્રદર્શિત ન થાય ત્યાં સુધી અમારા API બેકએન્ડમાંથી ડેટા ઉપલબ્ધ ન હોય.

તે જ આપણા માટે એક રિઝોવર શું કરી શકે છે તે જ છે.

કોન્યુઅલ રાઉટરને તે ટોડોસ કોમ્પોનેંટ સક્રિય કરે તે પહેલા ટોડોને ઉકેલવા દો, તો આપણે બે બાબતો કરવાની જરૂર છે:

  1. એક ટોડોસરોવર બનાવો જે TODO ના API માંથી મેળવે છે
  2. todos માર્ગ માં ટોડોસ કોમ્પોનેંટ ને સક્રિય કરતી વખતે
  3. TODO ને મેળવવા માટે TODOSResolver નો ઉપયોગ કરવા માટે કોણીય રાઉટરને જણાવો.

todos રસ્તાની એક રિઝોલ્વરને જોડીને અમે માહિતીને ઉકેલવા માટે કોણીય રાઉટર પૂછીએ છીએ, તે પહેલાં ટોડોસંપોનેંટ સક્રિય છે.

તો ચાલો આપણા ટૉડૉને લાવવા માટે રીઝોલ્વર બનાવીએ.

ટોડોસોલ્વરવર બનાવવું

કોણીય CLI પાસે રીઝોલ્વર બનાવવા માટેનો આદેશ નથી, તેથી ચાલો એક નવી ફાઇલ બનાવીએ src / todos. રિઝોલ્વર ts જાતે અને નીચેની કોડ ઉમેરો:

     આયાત {ઇન્જેક્ટેબલ} '@ કોણીય / કોર' માંથી;આયાત કરો {ActivatedRouteSnapshot, Resolve, RouterStateSnapshot} '@ angular / router' માંથી;'Rxjs / Observable' માંથી આયાત કરો {Observable};આયાત કરો {ટોડો} થી ' /શું કરવું';આયાત કરો {TodoDataService} થી ' / todo- ડેટા સેવા ';@ ઇન્જેક્ટેબલ   નિકાસ વર્ગ TodosResolver અમલીકરણ ઉકેલ  > {કન્સ્ટ્રક્ટર (ખાનગી TODA ડેટા સેવા: TodoDataService) {}જાહેર નિવેદનો (રસ્તો: એક્ટિવેટેડ રૂટ સ્નેપશોટ,રાજ્ય: રાઉટરસ્ટેટ સ્નેપશોટ): અવલોકનક્ષમ    {આ આવો todoDataService. getAllTodos   ;}}    

અમે રિઝોલ્વરને એક વર્ગ તરીકે વ્યાખ્યાયિત કરીએ છીએ જે રિઝોલ્વ ઇંટરફેસને લાગુ કરે છે.

ઉકેલો ઇન્ટરફેસ વૈકલ્પિક છે, પરંતુ આપણી TypeScript IDE અથવા કમ્પાઇલરને એ સુનિશ્ચિત કરે છે કે અમે ઉકેલ પદ્ધતિ અમલમાં મૂકવા માટે અમને જરૂરી દ્વારા વર્ગ યોગ્ય રીતે અમલમાં મૂકે છે.

જો ઉકેલ પદ્ધતિ વચન આપે છે અથવા અવલોકનક્ષમ કોણીય રાઉટર વળતર અથવા અવલોકનક્ષમ પૂર્ણ કરવા માટે તે રસ્તો ઘટક સક્રિય પહેલાં રાહ કરશે.

ઉકેલ પદ્ધતિને બોલાવતી વખતે, કોનેયલ રાઉટર સક્રિય રસ્તો સ્નેપશોટ અને રાઉટર સ્ટેટ સ્નેપશોટમાં ડેટા પૂરી પાડે છે (જેમ કે રુટ પેરામીટર્સ અથવા ક્વેરી પેરામીટર), આપણને જરૂર પડી શકે છે ડેટાને ઉકેલવા માટે

કોડ ટોડોસોલેવર ખૂબ સંક્ષિપ્ત છે કારણ કે અમારી પાસે પહેલાથી ટોડોડે

March 1, 2018