Back to Question Center
0

Açısal Yönlendirici ile Bileşen Yönlendirme Konusuna Giriş            Açısal Yönlendirici ile Bileşen Yönlendirme Konusuna Giriş Birlikte Alınan Konular: Ham JavaScriptnpmTools & Semalt

1 answers:
Açısal Yönlendirici ile Bileşen Yöneltmeye Giriş

Bu makale Angular CLI ile CRUD Uygulamasının nasıl oluşturulacağı ile ilgili SitePoint Angular 2+ Eğiticisinin 4. bölümüydü.


  1. Bölüm 0- En Üst Açısal CLI Referans Kılavuzu
  2. Bölüm 1- Todo uygulamasının ilk sürümünü hazır hale getirme
  3. Bölüm 2- Todo'nun ve tek bir yapılacakların bir listesini görüntülemek için ayrı bileşenler oluşturma
  4. Bölüm 3 - Yapılandırma Servisini REST API'sı ile iletişim kurmak için güncelleyin
  5. Bölüm 4- Bilgiyi çözmek için Açısal yönlendirici kullanın
  6. Bölüm 5- Özel içeriği korumak için kimlik doğrulama ekleme

Uzmanlığa dayalı çevrimiçi Açısal eğitim kursları için Ultimate Angular'ı Todd Sloganı geçemezsiniz. Derslerini buradan deneyin ve % 50 indirim elde etmek için SITEPOINT_SPECIAL kodunu kullanın ve SitePoint'i desteklemeye yardımcı olun - har er bin temperature monitoring.


Birinci bölümde, Todo uygulamamızı nasıl çalıştıracağımız ve Semalt sayfalarına dağıtacağımız öğrendik. Bu işe yaradı, ancak maalesef bütün uygulama tek bir bileşene sıkıştı.

İkinci bölümde, daha modüler bir bileşen mimarisi inceledik ve bu tek bileşeni, anlaşılması, yeniden kullanımı ve sürdürülmesi daha kolay olan daha küçük bileşenlerden oluşan yapılandırılmış bir ağaca nasıl parçalayacağımızı öğrendik.

Üçüncü bölümde, RxJS ve Semalt HTTP hizmetini kullanarak bir REST API arka uç ile iletişim kurmak için uygulamanızı güncelledik.

Bu bölümde, Semalt yönlendiriciyi tanıtıp tarayıcı URL'si değiştiğinde uygulamanızı nasıl güncelleyebileceğini öğreneceğiz ve tersi. Yönlendiriciyi kullanarak arka uç API'sı verilerimizi çözmek için uygulamanızı nasıl güncelleyebileceğimizi de öğreneceğiz.

Endişelenmeyin! Bu öğreticinin bir, iki veya üçünü takip etmeniz gereken kişinin , dörtünün mantıklı olması için. Repo'nun bir kopyasını alabilir, üçüncü bölümden kodu kontrol edebilir ve bunu bir başlangıç ​​noktası olarak kullanabilirsiniz. Bu daha ayrıntılı olarak aşağıda açıklanacaktır.

Yürüyüş ve Koşma

Semalt CLI'nin en son sürümünün yüklü olduğundan emin olun. Bunu yapmazsanız, aşağıdaki komutu kullanarak yükleyebilirsiniz:

     npm yükleme -g @ angular / cli @ latest    

Semalt CLI'nin önceki bir sürümünü kaldırmanız gerekiyorsa şunları yapabilirsiniz:

     npm kaldırma -g @ angular / cli angular-clinpm önbellek temiznpm install -g @ angular / cli @ latest    

Semalt, üçüncü bölümden kodun bir kopyasına ihtiyacın olacak. Bu https: // github adresinde bulunmaktadır. com / sitepoint-editörler / açısal-todo-app. Bu serideki her makalede, depodaki ilgili bir etikete sahiptir; böylece, uygulamanın farklı durumları arasında ileri geri geçiş yapabilirsiniz.

Üçüncü bölümde biten ve bu makalede başlayacağımız kod, bölüm 3 olarak etiketlendi. Bu makaleyi bitirdiğimiz kod Kısım 4 olarak etiketlenmiştir.

Etiketleri, belirli bir taahhüt idinin takma adı gibi düşünebilirsiniz. Aralarında git ödeme düğmesini kullanarak geçiş yapabilirsiniz. Burada daha fazla bilgi okuyabilirsiniz.

Bu nedenle, kalkmak ve çalışmak için (Semalt CLI'nin en son sürümü yüklenmiş olarak) yapacağız:

     git clone git @ github. com: sitepoint-editörler / açısal-todo-app. gitcd açısal-yapılacak uygulamagit ödeme part-3npm kurulumuhizmet etmek    

Sonra http: // localhost: 4200 / adresini ziyaret edin. Her şey yolunda gidiyorsa, çalışan Todo uygulamasını görmelisiniz.

Hızlı bir özet

Bölüm 3'ün sonunda uygulamanızın mimarisi nasıl görünüyordu:

JavaScript yönlendiricisi nedir?

Aslında bir Semalt yönlendirici 2 şey yapar:

  1. tarayıcı URL'si değiştiğinde web uygulaması durumunu güncelleme
  2. web uygulaması durumu değiştiğinde tarayıcı URL'sini güncelleyin

JavaScript yönlendiriciler, Tek Sayfa Uygulamaları'nı (SPA'lar) geliştirmemizi sağlıyor.

Tek Sayfa Semalt, bir masaüstü uygulamasına benzer bir kullanıcı deneyimi sağlayan bir web uygulamasıdır. Tek Bir Sayfada Semalt'ta, arka planla olan tüm iletişim sahnenin arkasında gerçekleşir.

Bir kullanıcı bir sayfadan diğerine gezindiğinde, sayfa URL'si değişse bile yeniden yüklenmeden dinamik olarak güncellenir.

Mevcut birçok farklı Semalt yönlendirici uygulaması var.

Bazıları özellikle Açısal, Külçe, Reakt, Vue gibi belirli bir JavaScript çerçevesi için yazılmıştır. js, aurelia, vs. Semalt uygulamaları genel amaçlı yapılmaktadır ve belirli bir çerçeveye bağlı değildir.

Açısal yönlendirici nedir?

Açısal yönlendirici, Köşeli Çekirdek Ekip tarafından yazılmış ve yönetilen resmi bir Eğik çizgi kitaplığıdır.

Angular ile çalışacak şekilde tasarlanmış ve @ köşeli / yönlendirici şeklinde paketlenmiş bir JavaScript yönlendirici uygulamasıdır.

Her şeyden önce, Açısal yönlendirici bir Semalt yönlendiricinin görevlerini üstlenir:

  • , kullanıcı belirli bir URL'ye gittiğinde bir sayfa oluşturmak için gereken tüm Açısal bileşenleri etkinleştirir
  • kullanıcıların sayfa yeniden yüklemeden bir sayfadan diğerine geçmesine izin verir
  • sayfalar arasında ileri-geri giderken geri ve ileri düğmelerini kullanabilmesi için tarayıcının geçmişini günceller

Ayrıca Semalt yönlendirici şunları yapmamızı sağlar:

  • bir URL'yi başka bir URL'ye yönlendirme
  • bir sayfa görüntülenmeden önce verileri çözer
  • bir sayfa etkinleştirildiğinde veya devre dışı bırakıldığında komut dizileri çalıştırır
  • uygulamanızın tembel yük parçaları

Bu makalede, Açısal yönlendiricinin nasıl kurulacağını ve yapılandırılacağını, bir URL'yi yönlendirmenin nasıl yapılacağını ve arka uç API'mızdan todo'yu çözmek için Açısal yönlendiriciyi nasıl kullanacağınızı öğreneceğiz.

Bir sonraki yazıda, uygulamanıza kimlik doğrulama ekleyeceğiz ve kullanıcı oturum açtığında sayfalardan yalnızca bazılarına erişilebildiğinden emin olmak için yönlendiriciyi kullanacağız.

Açısal Yönlendirici Nasıl Çalışır

Kodu atlamadan önce, Semalt yönlendiricisinin nasıl çalıştığını ve onun nasıl tanıtıldığını anlamak önemlidir. Bu seride kademeli olarak mücadele ederken ve Semalt yönlendiricisi ile daha fazla tecrübe kazanırsanız şartlara alışacaksınız.

Açısal yönlendiriciyi kullanan Açısal bir uygulama yalnızca bir yönlendirici hizmeti örneğine sahiptir; Bu bir tek. Uygulamanıza Yönlendirici servisini her nereye püskürdüğünüz her yerde, aynı Açısal yönlendirici hizmet örneğine erişeceksiniz.

Semalt yönlendirme işlemine daha ayrıntılı bir bakış için, Semalt yönlendirici navigasyonunun 7 aşamalı yönlendirme sürecini kontrol etmeyi unutmayın.

Yönlendirmeyi Etkinleştirme

Semalt uygulamamızda yönlendirme yapılabilmesi için, 3 şey yapmamız gerekiyor:

  1. uygulamanız için olası durumları tanımlayan bir yönlendirme yapılandırması oluşturmak
  2. yönlendirme yapılandırmasını uygulamanıza aktarın
  3. açısal yönlendiriciye etkinleştirilen bileşenlerin nereye yerleştireceğini söylemek için bir yönlendirici çıkışı ekleyin

Şimdi bir yönlendirme yapılandırması oluşturarak başlayalım.

Yönlendirme yapılandırmasını oluşturma

Yönlendirme yapılandırmamızı oluşturmak için, uygulamanızın desteklemek istediğimiz URL'lerin bir listesine ihtiyacımız var.

Semalt, uygulamanız çok basit ve yalnızca bir sayfa todo'nun listesini gösteren bir sayfası var:

  • / : todo'nun
  • listesini göster

todo'nun listesini başvurunun ana sayfası olarak gösterecektir.

Bununla birlikte, bir kullanıcı kendi görev listesine danışmak için tarayıcılarında yer alan bir kullanıcı / ve ana sayfamızın içeriğini değiştirdiğimizde (bu serinin 5. bölümünde yapacağız), yer işaretleri hayır olacaktır artık iş listelerini gösterecekler.

Öyleyse, yapılacaklar listemize kendi URL'sini verelim ve ana sayfamızı ona yönlendirelim:

  • / : / todos'a yönlendirme
  • / todos : todo'nun
  • listesini göster

Bu bize iki fayda sağlıyor:

    kullanıcı sayfalarını yer imlerine eklerken, tarayıcıları / yerine yer imi / todos
  • artık ana sayfamızı, istediğimiz herhangi bir URL'ye yönlendirerek kolayca değiştirebiliriz; ana içeriğinizi düzenli olarak değiştirmeniz gerekiyorsa

Resmi Açısal stil kılavuzu, Açı tipi bir modül için yönlendirme konfigürasyonunun, dosya adı bitiş ile açılmış bir dosyada saklanmasını önermektedir. modülü. RoutingModule ile biten bir adla ayrı bir Açısal modül ihraç eden ts .

Şu anki modülümüz AppModule olarak adlandırıldı, bu nedenle bir dosya src / app / app-routing oluşturduk. modülü. ts ve yönlendirme konfigürasyonunu, AppRoutingModule adlı bir Açısal modül olarak dışa aktarın:

     '@ angular / core' dan {NgModule} içe aktar;'RouterModule, Routes}' i @ angular / router'dan alın;{AppComponent} alan adını içe aktarma. / Uygulama. bileşen';const yolları: Yollar = [{yol: '',redirectTo: 'todos',pathMatch: 'tam'},{yol: 'todos',component: AppComponent}];@NgModule ({ithal eder: [RouterModule. forRoot (rotalar)],dışa aktarır: [RouterModule],sağlayıcılar: []})dışa aktarma sınıfı AppRoutingModule {}    

İlk olarak, @ açısal / yönlendirici 'den Yönlendiriciler ve Yönlendiriciler

     '@ angular / router'dan' {RouterModule, Routes} içe aktar;    

Sonra, tip Yolların değişken rotalarını tanımlayıp yönlendirici konfigürasyonunu atarız:

     const rota: Yollar = [{yol: '',redirectTo: 'todos',pathMatch: 'tam'},{yol: 'todos',component: AppComponent}];    

Routes türü isteğe bağlıdır ve TypeScript desteğine sahip bir IDE veya TypeScript derleyicisi, geliştirme sırasında rota yapılandırmanızı rahatça doğrulamasını sağlar.

Her yolun aşağıdaki özelliklere sahip olabileceği bir Semalt dizisi olarak tanımlanan bir güzergah ağacıdır:

  • yol : dize, URL ile eşleşen yol
  • patchMatch : string, URL ile eşleme yöntemi
  • bileşen : sınıf referansı, bu rota etkinleştirildiğinde etkinleştirilecek bileşen
  • redirectTo : string, bu rota etkinleştirildiğinde yönlendirilecek URL
  • veri : rota atamak için statik veri
  • çözmek : çözülürken dinamik veri verileri çözüldüğünde
  • çocuklar : çocuk rotaları

Uygulamamız basit ve yalnızca iki kardeş yol içermektedir, ancak daha büyük bir uygulama, aşağıdaki gibi alt yollarla bir yönlendirici yapılandırmasına sahip olabilir:

     const rota: Yollar = [{yol: '',redirectTo: 'todos',pathMatch: 'tam'},{yol: 'todos',çocuklar: [{yol: '',bileşen: 'TodosPageComponent'},{yol: ': id',bileşen: 'TodoPageComponent'}]}];    

burada todos iki çocuk yolu ve : id yönlendiricinin aşağıdaki URL'leri tanımasını sağlayan bir rota parametresidir:

  • / : ana sayfa, yönlendirici / todos
  • / todos : TodosPageComponent öğesini etkinleştirin ve todo'nun
  • / parametresini etkinleştirin ve : parametresini 1 parametresini ayarlayın / todos / 1
  • ve : parametresinin ayar değerini etkinleştirin / todos / 2

Yönlendirmeyi tanımlarken nasıl patchMatch: 'full' belirttiğimize dikkat edin.

Semalt yönlendirici iki eşleme stratejisine sahiptir:

  • önek : varsayılan, URL'nin yolunun değeri ile başladığında eşleşir.
  • tam : URL , yolunun değerine eşit olduğunda eşleşir

Eğer aşağıdaki yolu yaratırsak:

     // pathMatch belirtilmedi, bu nedenle Açısal yönlendirici geçerlidir// varsayılan 'önek' pathMatch{yol: '',redirectTo: 'todos'}    
, boş dize ile başlar çünkü Açısal yönlendirici varsayılan önek yol eşleme stratejisini uygular ve her URL, todos'a yönlendirilir. 'da belirtilen yol .

Yalnızca ana sayfamızın todos adresine yönlendirilmesini istiyoruz, bu nedenle 'e eşit olan URL'nin yalnızca URL'sinin aynı olduğundan emin olmak için pathMatch:' full ' boş dize '' eşleştirildi:

     {yol: '',redirectTo: 'todos',pathMatch: 'tam'}    

Farklı yönlendirme yapılandırma seçenekleri hakkında daha fazla bilgi için, Yönlendirme ve Gezinme ile ilgili resmi Açısal belgelere bakın.

Son olarak, Açısal bir modül Oluşturma ve Gönderme Modülü :

     @NgModule ({ithal eder: [RouterModule. forRoot (rotalar)],dışa aktarır: [RouterModule],sağlayıcılar: []})dışa aktarma sınıfı AppRoutingModule {}    

Yönlendirme modülü yaratmanın iki yolu Semalt'tır:

  1. RouterModule. forRoot (routes) : yönlendirici yönergelerini, yönlendirmeyi ve yönlendirici hizmetini
  2. içeren bir yönlendirme modülü oluşturur.
  3. RouterModule. forChild (routes) : yöneltici yönergeleri, yönlendirici yapılandırmasını içeren, ancak yönlendirici hizmetini değil içeren bir yönlendirme modülü oluşturur.

RouterModule. Uygulamanız birden fazla yönlendirme modülüne sahip olduğunda forChild yöntemi gereklidir. Aynı tarayıcı URL'si ile etkileşime giren birden fazla yönlendirici hizmeti, sorunlara neden olabilir, bu nedenle uygulamamızda kaç yönlendirme modülü içe aktarırsak yapalım, uygulamanızda yönlendirici hizmetinin yalnızca bir örneğinin olması önemlidir.

RouterModule kullanılarak oluşturulan yönlendirme modülünü içe aktarırken. forRoot , Açısal yönlendirici hizmetini başlatır. RouterModule kullanılarak oluşturulan bir yönlendirme modülünü içe aktarırken. forChild , Angular değil yönlendirici hizmetini başlatır.

Dolayısıyla yalnızca RouterModule kullanabiliriz. forRoot bir kez ve RouterModule kullanın. forChild , ek yönlendirme modülleri için birden çok kez.

Uygulamamızın sadece bir yönlendirme modülü olduğundan, RouterModule kullanıyoruz. forRoot :

     içe aktarma: [RouterModule. forRoot (rotalar)]    

Ayrıca, ihracat mülkünde RouterModule :

     ihraç ediyor: [RouterModule]    

Bu, AppModule AppRoutingModule içe aktarırken AppModule'de RouterModule'yi tekrar açıkça içe aktarmamıza izin vermez.

Artık bizim AppRoutingModule'ımızı aldık, onu etkinleştirmek için onu AppModule'mize aktarmamız gerekiyor.

Yönlendirme yapılandırmasını alma

Yönlendirme yapılandırmamızı uygulamamıza aktarmak için, AppRoutingModule'yi ana AppModule'mize aktarmanız gerekir.

Haydi açalım src / app / app. modülü. AppModule 'nin @NgModule meta verisinde ithalat dizisine App Serbest Modülünü

     '@ angular / platform tarayıcıdan' {BrowserModule} alan adını içe aktar;{Angle Modular} 'ı @ angular / core' dan içe aktar;{FormsModule} öğesini '@ açısal / formlardan' içe aktar;'@ angular / http' adresinden {HttpModule} 'yi içe aktar;{AppComponent} alan adını içe aktarma. / Uygulama. bileşen';{TodoListComponent} from 'içe aktar. / Yapılacaklar listesi / yapılacaklar listesi. bileşen';import {TodoListFooterComponent} from '. / Yapılacaklar listesi-footer / yapılacaklar listesi-metre. bileşen';import {TodoListHeaderComponent} from '. / Yapılacaklar listesi-başlık / yapılacaklar listesi-başlığı. bileşen';{TodoDataService} alan adını içe aktarın. / Todo-verileri. hizmet';{TodoListItemComponent} from 'içe aktar. / Yapılacaklar listesi maddelik / yapılacaklar listesi maddelik. bileşen';{ApiService} alan adını içe aktarın. / API. hizmet';{AppRoutingModule} alan adını '' içinden al. / Uygulama yönlendirme. Modül ';@NgModule ({beyanlar: [AppComponent,TodoListComponent,TodoListFooterComponent,TodoListHeaderComponent,TodoListItemComponent],ithalat: [AppRoutingModule,BrowserModule,FormsModule,HttpModule'ü],sağlayıcıları: [TodoDataService, ApiService],önyükleme: [AppComponent]})ihracat sınıfı AppModule {}    
İhracat mülkünde listelenen RoutingModule öğesine sahip olduğu için AppRoutingModule öğesi içe aktarıldığında otomatik olarak RoutingModule
62), bu nedenle RouterModule 'yi tekrar açıkça içe aktarmamız gerekmez (ancak bu herhangi bir zarara neden olmaz).

Semalt tarayıcıdaki değişikliklerimizi denebilir, üçüncü ve son adımı tamamlamamız gerekir.

Yönlendirici çıkışı ekleme

Uygulamanız artık bir yönlendirme yapılandırmasına sahip olsa da, Açısal yönlendiriciye, nereden başlatılmış bileşenleri DOM'da yerleştirebileceğini söylemeliyiz.

AppComponent , AppModule 'nin önyükleme stoğu özelliğinde listelendiğinden, Angular, AppComponent'i başlatır:

Uygulama açılır kapanırken,

     @NgModule ({//. . 

öğesi, Angular yönlendiriciye DOM'daki bileşenlerin nerede örneklenebileceğini bildirir.

AngularJS 1. x yönlendirici ve UI Yönlendirici biliyorsanız, ng-görüntüsüne açısal alternatif düşünebilirsiniz. ve u-görüntüsü .

elemanı olmadan Angular router, bileşenlerin nereye yerleşeceğini bilmiyor ve yalnızca AppComponent'in kendi HTML'si oluşturuluyordu .

AppComponent şu anda bir todo'nun listesini görüntüler.

AppComponent'ın todo'nun bir listesini görüntülemesine izin vermek yerine, AppComponent 'nin bir ve Açısal yönlendiriciye, yapılacaklar listesini görüntülemek için içerdeki başka bir bileşen Uygulama Bileşenini örneklemesini söyleyin.

Bunu gerçekleştirmek için Açısal CLI kullanarak yeni bir bileşen TodosComponent oluşturalım:

     $ ng bileşenleri oluşturmak Todos    

ve tüm HTML'yi src / app / app'den taşıyın. bileşen. html - src / app / todos / todos. bileşen. html :

   

ve src / app / app'daki tüm mantıklar. bileşen. ts - src / app / todos / todos. bileşen. ts :

     / * src / app / todos / todos. bileşen. ts * /'@ angular / core' dan {Component, OnInit} içe aktar;{TodoDataService} alan adını içe aktarın. / Todo-verileri. hizmet';içe aktarma {Todo} from '. /yapmak';@Bileşen({seçici: 'app-todos',ŞablonUrl: '. / Todos. bileşen. html',styleUrls: ['. / Todos. bileşen. Css'],sağlayıcıları: [TodoDataService]})ihracat sınıfı TodosComponent, OnInit'i uygular {todos: Todo [] = [];yapıcı (özel todoDataService: TodoDataService) {}public ngOnInit    {bu. todoDataService. getAllTodos   . abone ol((todos) => {bu. todos = todos;});}onAddTodo (todo) {bu. todoDataService. addTodo (yapılacak). abone ol((newTodo) => {bu. todos = bu. todos. concat (newTodo);});}onToggleTodoComplete (todo) {bu. todoDataService. toggleTodoComplete (yapılacak). abone ol((updatedTodo) => {Yapılacaklar = updatedTodo;});}onRemoveTodo (todo) {bu. todoDataService. deleteTodoById (yapılacaklar kimliği). abone ol((_) => {bu. todos = bu. todos. filter ((t) => t. id! == todo. id);});}}    

Şimdi AppComponent 'nin şablonunu src / app / app' in yerini alabiliriz. bileşen. ile html :

            

kaldırın ve tüm eski kodları src / app / app dosyasındaki AppComponent sınıfından kaldırın. bileşen. ts :

     {@} köşeli / çekirdekten {Bileşen} içe aktar;@Bileşen({seçici: 'uygulama kökü',ŞablonUrl: '. / Uygulama. bileşen. html',styleUrls: ['. / Uygulama. bileşen. Css'],})dışa aktarma sınıfı AppComponent {}    

Son olarak, todos rotamızı src / app / app-routing dosyasında güncelliyoruz. modül.

Semalt tarayıcıda yaptığımız değişiklikleri deneyin.

Geliştirme sunucunuzu ve arka uç API'nizi çalıştırarak çalıştırın:

     $ ng serve$ npm, json-server'ı çalıştır    

açın ve tarayıcınızı http: // localhost: 4200 adresine gidin.

Açısal yönlendirici yönlendirici yapılandırmasını okur ve tarayıcımızı otomatik olarak http: // localhost: 4200 / todos konumuna yönlendirir.

Sayfadaki öğeleri incelerseniz, TodosComponent'in içeride içinde değil, ancak hemen it:

           

Uygulamamız artık yönlendirme özelliğine sahip. Korku veren!

Joker rota ekleme

Tarayıcınızı http: // localhost: 4200 / eşleşmeyen url'ye giderseniz ve tarayıcınızın geliştirici araçlarını açtığınızda, Angular yönlendiricinin aşağıdaki hatayı konsola günlüğe kaydettiğini fark etmiş olursunuz:

     Hata: Herhangi bir güzergahla eşlenemiyor. URL Segmenti: 'eşleşmeyen url'ler    

Eşsiz Semalt'ı zarifçe idare etmek için iki şey yapmamız gerekir:

  1. PageNotFoundComponent (istediğiniz gibi ismini değiştirebilirsiniz) istenen sayfanın bulunamadığını bildiren bir ileti görüntüler
  2. Angular router'a istenen URL ile hiçbir rota eşleşmediğinde PageNotFoundComponent öğesini göstermesini söyle

Açısal CLI kullanarak PageNotFoundComponent üretmekle başlayalım:

     $ ng bileşen oluşturmak PageNotFound    

ve şablonunu src / app / sayfa bulunamadı / sayfa bulunamadı konumunda düzenleyin. bileşen. html :

    

Özür dileriz, talep edilen sayfa bulunamadı.

Sonra, ** yolunu kullanarak bir joker rota ekliyoruz:

     const rota: Yollar = [{yol: '',redirectTo: 'todos',pathMatch: 'tam'},{yol: 'todos',component: AppComponent},{yolu: '**',bileşen: PageNotFoundComponent}];    

** çocuk yolları da dahil olmak üzere herhangi bir URL ile eşleşir.

Şimdi, tarayıcınızı http: // localhost: 4200 / eşleşmeyen url , PageNotFoundComponent öğesine giderseniz görüntülenir.

Jetonlu rota, beklendiği gibi çalışması için yönlendirme konfigürasyonundaki en son rota olmalıdır.

Semalt yönlendirici, bir istek URL'sini yönlendirici yapılandırmasına eşleştirdiğinde, ilk eşleşmeyi bulur bulmaz işleme devam etmeyi durdurur.

Eğer güzergah sırasını değiştirmek istersek:

     const rota: Yollar = [{yol: '',redirectTo: 'todos',pathMatch: 'tam'},{yolu: '**',bileşen: PageNotFoundComponent},{yol: 'todos',component: AppComponent}];    

ardından todos'a asla ulaşılamaz ve PageNotFoundComponent görüntülenir çünkü joker rota ilk önce eşleştirilirdi.

Şimdiye kadar çok şey yaptık, şimdi şimdiye kadar yaptıklarımızı hızla özetleyelim:

  • Açısal yönlendirici
  • kurduk
  • uygulamanız için yönlendirme yapılandırmasını oluşturduk
  • biz AppComponent - TodosComponent
  • 'yi Uygulama Bileşeninin Şablonuna
  • ekledik
  • eşsiz URL'leri zarifçe yönetmek için bir joker rota ekledik

Sonra, Semalt yönlendiriciyi kullanarak varolan todo'ları arka uç API'mizden almak için bir çözümleyici oluşturacağız.

Şu anda, tarayıcımızı todos URL'sine yönlendirdiğimizde, aşağıdakiler olur:

  1. Açısal yönlendirici todos URL'si ile eşleşir
  2. Açısal yönlendirici, Todos Bileşenini etkinleştirir.
  3. Açısal yönlendirici TodosComponent'i DOM'da
  4. bulunan
  5. TodosComponent , tarayıcıda boş bir eylem dizisi
  6. ile görüntülenir.
  7. Yapılacaklar, TodosComponent'in ngOnInit işleyicisinde API'den alınır
  8. TodosComponent tarayıcıda todo'nun API'dan getirildiği güncellenir

Adım 5'teki adımları yükleme 3 saniye sürerse, kullanıcıya adım 6'da gerçek yerine getirilmeleri gösterilmeden önce 3 saniye için boş bir yapılacaklar listesi görüntülenir.

TodosComponent şablonunda aşağıdaki HTML'ye sahip olsaydı:

   
Hâlâ bir işiniz yok.

, kullanıcı, gerçek todo'ların görüntülenmeden önce bu mesajı 3 saniye görecek ve bu da kullanıcıyı tamamen yanıltacak ve kullanıcının gerçek veri girmeden önce yola çıkmasına neden olabilir.

Veri yüklenirken spinner gösteren TodosComponent'e bir yükleyici ekleyebiliriz, ancak bazen gerçek bileşen üzerinde kontrolümüz olmayabilir, örneğin üçüncü parti bir bileşen kullandığımızda.

Bu istenmeyen davranışı düzeltmek için aşağıdakilerin gerçekleşmesi gerekir:

  1. Açısal yönlendirici todos URL'si ile eşleşir
  2. Açısal yönlendirici, todo'nun API'tan getirir
  3. Açısal yönlendirici, Todos Bileşenini etkinleştirir.
  4. Açısal yönlendirici TodosComponent'i DOM'da
  5. bulunan
  6. TodosComponent , todo'nun API'tan
  7. alındığı tarayıcıda görüntülenir

burada TodosComponent , API arka uçmdan veri elde edilene kadar görüntülenmez.

İşte tam olarak bir çözümleyici bizim için yapabilecektir.

Angular router'ın todo'yu TodosComponent'ı aktarmadan önce çözmesi için, iki şey yapmalıyız:

  1. todo'nun API'tan
  2. getiren TodosResolver'ı oluşturun todos rota TodosComponent etkinleştirirken TodosResolver'ı todo'yu getirmek için Angular router'a söyleyin.

todos yoluna bir resolver iliştirerek, Angular router'dan öncelikle veriyi çözmesi için TodosComponent etkinleştirilmesini istiyoruz.

Bu yüzden işlerimizi getirmek için bir çözümleyici oluşturalım.

TodosResolver Oluşturma

Açısal CLI, çözümleyici üretmek için bir komuta sahip değil, bu nedenle yeni bir dosya src / todos oluşturalım. çözücü. elle ts ve aşağıdaki kodu ekleyin:

     '@ angular / core' dan {Injectable} içe aktar;'@ angular / router'dan' {ActivatedRouteSnapshot, Resolve, RouterStateSnapshot} alan adını içe aktar;'Gözlemlenebilir' i 'rxjs / Observable' dan içe aktar;içe aktarma {Todo} from '. /yapmak';{TodoDataService} alan adını içe aktarın. / Todo-verileri. hizmet';@Injectable   ihracat sınıfı TodosResolver uygular Resolve  > {yapıcı (özel todoDataService: TodoDataService) {}kamuya açıkrota: AktifRouteSnapshot,durumu: RouterStateSnapshot): Gözlemlenebilir    {bunu geri ver. todoDataService. getAllTodos   ;}}    

Çözücüyü Çözülme arabirimini uygulayan bir sınıf olarak tanımlıyoruz.

Çözümle arabirimi isteğe bağlıdır, ancak TypeScript IDE veya derleyicimiz tarafından bir resolve yöntemi uygulamamızı isteyerek sınıfı doğru bir şekilde uyguladığımızdan emin olalım.

çözüm yöntemi bir vaat döndürürse veya gözlenebilir bir Açısal yönlendirici, rotanın bileşenini aktive etmeden önce sözün beklenmesini veya gözlemlenmesini bekleyecektir.

çözüm yöntemini çağırırken, Açısal yönlendirici, ihtiyacımız olabilecek verilere (rota parametreleri veya sorgu parametreleri gibi) erişebilmemiz için etkinleştirilen rota anlık görüntüsünü ve yönlendirici durumu anlık görüntüsünü rahatça geçirir. verileri çözmek için.

TodosResolver kodu çok özlüdür çünkü zaten bizim API arka uç ile tüm iletişimi işleyen bir TodoDataService sahibiz.

Yapıcıda TodoDataService öğesini enjekte ediyoruz ve resolve yönteminde tüm işler dizgelerini getirmek için onun getAllTodos yöntemini kullanıyoruz.

resolve yöntemi, Todo [] türünün gözlemlenebilir bir öğesini döndürür, böylece Açısal yönlendirici, gözlemlenebilir nesnenin rota bileşen etkinleştirilmeden önce tamamlanmasını bekleyecektir.

Şimdi çözümleyicimiz var, Semalt yönlendiriciyi kullanmak üzere yapılandıralım.

Todo'nun yönlendirici aracılığıyla çözülmesi

Semalt yönlendiricisini bir çözümleyici kullanması için, onu yol yapılandırmamızda bir rotaya eklemeliyiz.

Haydi açalım src / app-routing. modülü. ts ve TodosResolver'ı todos yoluna ekleyin:

     '@ angular / core' dan {NgModule} içe aktar;'RouterModule, Routes}' i @ angular / router'dan alın;{PageNotFoundComponent} sitesini 'içinden içe aktarın. /-Bulundu sayfa değil sayfa-not-bulundu /. bileşen';{TodosComponent} from 'içe aktar. / Todos / todos. bileşen';{TodosResolver} 'ı içe aktarma. / Todos. çözücü';const yolları: Yollar = [{yol: '',redirectTo: 'todos',pathMatch: 'tam'},{yol: 'todos',bileşen: TodosComponent,çözmek: {todos: TodosResolver}},{yolu: '**',bileşen: PageNotFoundComponent}];@NgModule ({ithal eder: [RouterModule. forRoot (rotalar)],dışa aktarır: [RouterModule],Sağlayıcılar: [TodosResolver]})dışa aktarma sınıfı AppRoutingModule {}    

İthalat TodosResolver :

     import {TodosResolver} from '. / Todos. çözücü';    

ve todos yolunu resolver olarak ekleyin:

     {yol: 'todos',bileşen: TodosComponent,çözmek: {todos: TodosResolver}}    

Bu, Angular yönlendiricisine TodosResolver kullanarak verileri çözümlemesini ve yolvericinin verisinde çözümleyicinin dönüş değerini todos'a atamasını söyler.

Bir rotaya, ActivatedRoute veya ActivatedRouteSnapshot , aşağıdaki bölümde göreceğimiz yollardan erişilebilir.

Rotanın data özelliğini kullanarak statik verileri doğrudan bir güzergah verisine ekleyebilirsiniz:

     {yol: 'todos',bileşen: TodosComponent,veri: {başlık: 'Statik yol verisine örnek'}}    

veya dinamik veriyi, yolun özüm özelliğinde belirtilen bir özünürcü kullanarak:

     kararı: {yol: 'todos',bileşen: TodosComponent,çözmek: {todos: TodosResolver}}    

veya her ikisini birden aynı anda:

     kararı: {yol: 'todos',bileşen: TodosComponent,veri: {başlık: 'Statik yol verisine örnek'}çözmek: {todos: TodosResolver}}    

çözünürlük özelliğinden gelen çözümleyiciler çözülür çözülmez değerler, veri özelliğinden gelen statik verilerle birleştirilir ve tüm veriler rota verileri olarak kullanılabilir hale getirilir. forRoot (rotalar)],dışa aktarır: [RouterModule],Sağlayıcılar: [TodosResolver]})dışa aktarma sınıfı AppRoutingModule {}

Tarayıcınızda http: // localhost: 4200 , Angular router şu an için gidin:

  1. URL'yi / 'den / todos ' ye yönlendirir
  2. çözülmesi mülkünde tanımlanan TodosResolver todos'un TodosResolver 'den resolve yöntemini çalıştırın, sonucu bekler ve sonucu rota verilerindeki todos'a atar
  3. aktive eder Todos Bileşeni

Geliştirici araçlarınızın ağ sekmesini açarsanız, todo'nun artık API'den iki kez getirildiğini göreceksiniz. Bir kere Angular yönlendirici ve bir kez de TodosComponent ngOnInit işleyicisi tarafından.

Böylece Açısal yönlendirici zaten todo'ları API'den getirir, ancak TodosComponent hala kendi işlevlerini yüklemek için kendi iç mantığını kullanır.

Sonraki bölümde, TodosComponent , Açısal yönlendirici tarafından çözülen verileri kullanacak şekilde güncellenecektir.

Çözümlenmiş verileri kullanma

Haydi açalım app / src / todos / todos. bileşen. ts .

ngOnInit işleyici şu anda todo'nun API'lerinden doğrudan getiriyor:

     public ngOnInit    {bu. todoDataService. getAllTodos   . abone ol((todos) => {bu. todos = todos;});}    

Açısal yönlendirici todo'nun TodosResolver kullanarak getirdiğine göre, API yerine rota verilerinden TodosComponent içindeki todo'ları almak istiyoruz.

Rota verisine erişmek için ActivatedRoute @ köşeli / yönelticiden almanız gerekir:

     @ Angular / router'dan {ActivatedRoute} içe aktar;    

etkinleştirin ve etkinleştirilen rotanın bir kolu elde etmek için Semalt bağımlılığı enjeksiyonunu kullanın:

     yapıcı (özel todoDataService: TodoDataService,özel rota: ActivatedRoute) {}    

Son olarak, todo'nun API yerine rota verisinden alınması için ngOnInit işleyicisini güncelleriz:

     public ngOnInit    {bu. rota. veri. map ((data) => data ['todos']). abone ol((todos) => {bu. todos = todos;});}    

ActivatedRoute , rota verilerini gözlemlenebilir olarak gösterir, bu nedenle kodumuz pek değişmez.

Bunun yerine . todoDataService. getAllTodos ile bu. rota. veri. map ((data) => data ['todos']) ve kodun geri kalanı değişmeden kalır.

Tarayıcınızı localhost: 4200 konumuna getirip ağ sekmesini açın, todo'ları API'den getiren iki HTTP isteğini artık göremezsiniz.

Görev tamamlandı! Semalt yönlendiriciyi uygulamamızda başarıyla entegre ettik!

Semalt tamamladığımızda, birim testlerimizi çalıştıralım:

     ng serve    

1 birim testleri başarısız:

     11'i 11'i Yürüttü (1 BAŞARISIZ)TodosComponent FAILED oluşturmalıdır'app-todo-list-header' bilinen bir öğe değil    
TodosComponent test edildiğinde, testbedinin TodoListHeaderComponent 'nin farkında olmadığı ve böylece Angular, app-todo-list-header öğesini bilmediğinden şikayet eder. öğesi.

Bu hatayı düzeltmek için, app / src / todos / todos dosyasını açalım. bileşen. Spec. ts ve NO_ERRORS_SCHEMA TestBed seçeneklerine ekleyin:

     önce (async (   => {TestBed. configureTestingModule ({bildirimler: [TodosComponent],şemalar: [NO_ERRORS_SCHEMA]}). configureTestingModule ({bildirimler: [TodosComponent],şemalar: [NO_ERRORS_SCHEMA],Sağlayıcılar: [TodoDataService,{sağlamak: ApiService,useClass: ApiMockService}],}). compileComponents   ;}));    

yine bir başka hataya yol açmaktadır:

     11'i 11'i Yürüttü (1 BAŞARISIZ)TodosComponent FAILED oluşturmalıdırActivatedRoute için hiçbir sağlayıcı !!    

Testbed seçeneklerine ActivatedRoute için bir sağlayıcı daha ekleyelim:

     önce (async (   => {TestBed. configureTestingModule ({bildirimler: [TodosComponent],şemalar: [NO_ERRORS_SCHEMA],Sağlayıcılar: [TodoDataService,{sağlamak: ApiService,useClass: ApiMockService},{sağlamak: ActivatedRoute,kullanım değeri: {veri: Gözlemlenebilir. arasında ({todos: []})}}],}). compileComponents   ;}));    

ActivatedRoute için sağlayıcıyı, todos için bir test değerini ortaya çıkarmak için gözlemlenebilir bir veri mülkü içeren sahte bir nesne belirtiriz.

Şimdi ünite testleri başarıyla geçti:

     11'den 11'i AÇILDI BAŞARILI    

Semalt! Uygulamamızı bir üretim ortamına dağıtmak için şimdi çalıştırabiliriz:

     ng build --aot --environment prod    

ve oluşturulan dist dizinini barındırma sunucumuza yükleyin. Ne kadar tatlı?

Bu makalede çok şey kapladık, öyleyse öğrendiklerimizi özetleyelim.

Özet

İlk makalede, nasıl yapılacağını öğrendik:

  • Açı CLI
  • kullanarak Todo uygulamamızı başlatın
  • bireyin görevlerini
  • temsil etmek için bir Todo sınıfı oluşturun.
  • todo'nun
  • yaratılması, güncellenmesi ve kaldırılması için TodoDataService
  • kullanıcı arabirimini
  • görüntülemek için Uygulama Bileşenini
  • uygulamamızı GitHub sayfalarına dağıtmak

İkinci makalede, Uygulama Bileşeninin çalışmalarının çoğunu şu görevlere devretmesini sağladık:

  • a Todo'nun
  • bir listesini görüntülemek için TodoListComponent
  • a TodoListItemComponent tek bir işleve
  • a TodoListHeaderComponent yeni bir yapılacaklar oluşturmak için
  • a kaç işin kaldığını göstermek için TodoListFooterComponent

Üçüncü makalede, nasıl yapılacağını öğrendik:

  • taklit REST API arka uç oluşturmak
  • API URL'sini bir ortam değişkeni olarak saklar
  • REST API'sı
  • ile iletişim kurmak için bir ApiService TodoDataService'i yeni ApiService'i kullanacak şekilde güncelleyin.
  • eşzamansız API çağrılarını işlemek için AppComponent'ı güncelleyin
  • birim sınamaları çalıştırırken gerçek HTTP çağrılarını önlemek için bir ApiMockService oluşturun

Bu dördüncü makalede şunu öğrendik:

  • neden bir uygulamanın yönlendirme yapması gerekebilir
  • JavaScript yönlendirici nedir
  • Açısal yönlendirici nedir, nasıl çalışır ve sizin için ne yapabilirsiniz
  • Açısal yönlendirici nasıl kurulur ve uygulamanız için rotalar nasıl yapılandırılır
  • Nasıl Açı yönlendiriciye DOM'ya bileşen yerleştirileceğini söyleme
  • bilinmeyen URL'leri nazikçe nasıl idare ederim
  • Açısal yönlendirici veriyi çözmek için bir çözümleyici nasıl kullanılır

Bu yazının tüm kodu https: // github adresinden edinilebilir. com / sitepoint-editörler / açısal-todo-app / ağaç / part-4.

Beşinci bölümde, başvurumuza yetkisiz erişimi önlemek için kimlik doğrulamasını uygulayacağız. com.tr / avatar / ad9b5970be156b634406cb5c195cb6ec? s = 96 & d = mm & r = g "alt ="Açısal Yönlendirici ile Bileşen Yönlendirme Konusuna GirişAçısal Yönlendirici ile Bileşen Yönlendirme Konusuna Giriş Birlikte Alınan Konular: Ham JavaScriptnpmTools & Semalt "/>

Yazarla tanışma
birJurgen Van de Moere
The Force'daki ön uç mimar - JavaScript ve AngularJS konusunda uzman. Google'daki Geliştirici Uzmanı. Jimnastikçi. Baba. Aile adamı. Açısal Efekt Oluşturucu.
Açısal Yönlendirici ile Bileşen Yönlendirme Konusuna GirişAçısal Yönlendirici ile Bileşen Yönlendirme Konusuna Giriş Birlikte Alınan Konular:
Ham JavaScriptnpmTools & Semalt
Almış
Açısal ve Yazı Tipi için Online Kurslar
Todd Sloganı
Uzmanların önderlik ettiği çevrimiçi AngularJS, Angular ve TypeScript eğitim kursları bireyler ve takımlar için. Kupon kodunu 'SITEPOINT' ödemeyi% 25 indirim elde etmek için kullanın .

March 1, 2018