Parametrelerle AngularJs Yönlendirme

AngularJS'de yönlendirme mekanizmasının nasıl çalıştığına bakmadan önce, yönlendirmenin hangi tür uygulama için geliştirildiğini anlamak faydalı olacaktır. Aşağıdaki bölüm bu bağlamı oluşturur ve bundan sonraki her teknik bunun üzerine kuruludur.

Tek Sayfa Uygulamaları Nedir?

Tek sayfa uygulamaları veya SPA'lar, tek bir HTML sayfasını yükleyen ve ardından kullanıcıyla etkileşime girdikçe bu sayfayı dinamik olarak güncelleyen web uygulamalarıdır. Her tıklama için sunucudan yeni bir belge istemek yerine, bir SPA yalnızca değişen sayfa bölümünü değiştirir.

Bu tasarım bir sorun yaratıyor. Tarayıcı hiçbir zaman yeni bir belgeye geçmezse, adres çubuğu asla değişmez, bu nedenle kullanıcı bir ekranı yer imlerine ekleyemez, paylaşamaz veya geri düğmesini kullanamaz. Yönlendirme tam olarak bu sorunu çözüyor.

AngularJS'de Yönlendirme Nedir?

AngularJS'de Yönlendirme Tek Sayfa Uygulamaları oluşturmanıza olanak tanıyan bir yöntemdir. Farklı uygulamalar oluşturmanızı sağlar. URLWeb uygulamalarınızdaki farklı içerikler için yönlendirmeler (routing) kullanılır. AngularJS yönlendirmesi, seçilen rotaya bağlı olarak birden fazla içeriğin gösterilmesine de yardımcı olur. Bu, belirtilen yerde açıklanır. URL # işaretinden sonra.

Örneğin, şu platform üzerinden barındırılan bir siteyi ele alalım: URL http://example.com/index.html.

Bu sayfa, uygulamanızın ana ekranını barındırır. Diyelim ki uygulama bir etkinlik düzenliyor ve kullanıcı etkinlikleri listelemek, birini ayrıntılı olarak görüntülemek veya birini silmek istiyor. Yönlendirme özelliği etkinleştirilmiş tek sayfa uygulamalarında, tüm bunlar aşağıdaki bağlantılar aracılığıyla mümkündür.

# sembolü farklı rotalarla (ShowEvent, DisplayEvent ve SilEvent) birlikte kullanılacaktır.

• Tüm etkinlikleri görmek için kullanıcı şu adrese yönlendirilir: http://example.com/index.html#ShowEvent
• Belirli bir etkinliği izlemek için yönlendiriliyorlar. http://example.com/index.html#DisplayEvent
• Bir etkinliği silmek için şu adımları izlemeleri istenir: http://example.com/index.html#DeleteEvent

Ana konuya dikkat edin. URL Aynı kalır. Sadece # işaretinden sonraki kısım değişir ve AngularJS'in izlediği kısım da budur. Kavram belirlendikten sonra, bir sonraki bölümde her şeyin çalışması için bağlamanız gereken parçalar ele alınacaktır.

$routeProvider kullanarak AngularJS Rotası ekleme

Daha önce de belirtildiği gibi, güzergahlar angularjs Bu yönlendirmeler, kullanıcıyı uygulamanızın farklı bir görünümüne yönlendirmek için kullanılır. Bu yönlendirme aynı HTML sayfasında yapılır, böylece kullanıcı sayfadan ayrılmadığı deneyimini yaşar.

Yönlendirme işlemini gerçekleştirmek için, uygulamanızda aşağıdaki temel adımların belirli bir sırayla uygulanması gerekmektedir.

1. Angular-route.js'ye bakın. JavaSenaryo dosya, tarafından geliştirildi GoogleBu modül, tüm yönlendirme işlevlerini içerir ve uygulamanın modüllerin yönlendirme ihtiyaçlarına referans verebilmesi için mutlaka dahil edilmelidir.
2. Uygulamanızın içinden ngRoute modülüne bir bağımlılık ekleyin. Bu bağımlılık olmadan, AngularJS uygulamasında yönlendirme hiç kullanılamaz.

Aşağıda bu ifadenin genel sözdizimi verilmiştir. Bu, bir modülün ngRoute anahtar sözcüğünü içeren normal bir bildirimidir.

var module = angular.module("sampleApp", ['ngRoute']);

3. $routeProvider'ınızı yapılandırın. Bu, uygulamanızdaki çeşitli rotaları sağlar ve sözdizimi, ilgili yol seçildiğinde, verilen görünümü görüntülemek için rotayı kullanmayı belirtir.

when(path, route)

4. HTML sayfanızdan rotanıza bağlantılar. HTML sayfanıza, uygulamanızdaki çeşitli mevcut rotalara referans bağlantıları ekleyeceksiniz.

<a href="#!/route1">Route 1</a><br/>

5. Son olarak şunların dahil edilmesi olacaktır: ng-view yönergesinormalde bir div etiketinde olur. Bu, ilgili rota seçildiğinde görünümün içeriğini enjekte etmek için kullanılacaktır.

👍 Bahşiş: Beş adımın tamamı zorunludur. Bir rotanın sessizce hiçbir şey yapmamasının en yaygın nedeni, angular-route.js referansının eksik olmasıdır, çünkü $routeProvider bu olmadan mevcut değildir. Sonraki bölümde, bu beş adımın tamamı çalışan bir örnekte bir araya getirilmiştir.

AngularJS Yönlendirme Örneği

Şimdi yukarıda belirtilen adımları kullanarak bir yönlendirme örneğine bakalım.

Parametreli AngularJS yönlendirme örneğimizde,

• Bağlantılardan biri, belirli konuları görüntülemek içindir. angularjs elbette, diğeri ise node.js Tabii.
• Kullanıcı her iki bağlantıya da tıkladığında o dersin konuları görüntülenecektir.

) 1 Adım Açısal rota dosyasını komut dosyası referansı olarak ekleyin.

Bu rota dosyası, birden fazla rota ve görünüm özelliğinden yararlanabilmek için gereklidir. Bu dosya AngularJS web sitesinden indirilebilir.

) 2 Adım "Angular JS Konuları" ve "Node JS Konuları"na bağlantıları temsil edecek href etiketleri ekleyin.

) 3 Adım Görünümü temsil edecek ng-view yönergesine sahip bir div etiketi ekleyin.

Bu, kullanıcı "Angular JS Konuları" veya "Node JS Konuları"na tıkladığında ilgili görünümün eklenmesine olanak tanıyacaktır.

) 4 Adım AngularJS için script etiketinize “ngRoute module” ve “$routeProvider” hizmetini ekleyin.

Code Açıklama:

1. “ngRoute modülünü” ekleyin. Bu sayede Angular, yönlendirmeyi otomatik olarak halleder ve tüm yönlendirme komutlarını anlar.
2. $routeProvider, çağrılan rotaları arka planda dinleyen bir servistir. Kullanıcı bir bağlantıya tıkladığında, bunu algılar ve hangi rotanın izleneceğine karar verir.
3. Angular bağlantısı için tek bir rota oluşturun: tıklandığında Angular.html dosyasını ekleyin ve iş mantığı için 'AngularController' kullanın.
4. Node bağlantısı için, Node.html'i enjekte eden ve 'NodeController'ı aynı şekilde kullanan bir rota oluşturun.

) 5 Adım Sonraki, hem AngularController hem de NodeController için iş mantığını işlemek üzere denetleyiciler eklemektir.

Her bir denetleyici içinde, her kurs için konu adlarını ve açıklamalarını saklamak üzere anahtar-değer çiftlerinden oluşan bir dizi oluşturuyoruz. 'tutorial' adlı dizi değişkeni, her denetleyici için kapsam nesnesine eklenir.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
<script src="https://code.angularjs.org/1.8.3/angular-route.js"></script>

<h1> Guru99 Global Event</h1>

<div class="container">
<ul>
<li><a href="#!/Angular">Angular JS Topics</a></li>
<li><a href="#!/Node">Node JS Topics</a></li>
</ul>
<div ng-view></div>
</div>

<script>
var sampleApp = angular.module('sampleApp', ['ngRoute']);

sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular', {
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  }).
  when('/Node', {
    templateUrl: 'Node.html',
    controller: 'NodeController'
  });
}]);

sampleApp.controller('AngularController', function($scope) {
  $scope.tutorial = [
    {Name: "Controllers", Description: "Controllers in action"},
    {Name: "Models", Description: "Models and binding data"},
    {Name: "Directives", Description: "Flexibility of Directives"}
  ];
});

// NodeController follows the same shape with Node.js topics
sampleApp.controller('NodeController', function($scope) {
  $scope.tutorial = [{Name: "Promises", Description: "Power of Promises"}];
});
</script>
</body>
</html>

⚠️ Düzeltmeler uygulandı. MKS <title> etiket içerideydi <body>, chrset="UTF 8" Yazım hatası vardı, ikinci bağlantı şuraya işaret ediyordu: #Node.html kayıtlı rota yerine /NodeŞablon yolları, etki alanı kökünden çözümlenen önde gelen bir eğik çizgi içeriyordu.

) 6 Adım Angular.html ve Node.html adlı sayfalar oluşturun. Her sayfa için aşağıdaki adımları gerçekleştiriyoruz.

Bu adımlar, dizinin tüm anahtar/değer çiftlerinin her sayfada görüntülenmesini sağlayacaktır.

1. Kullanma ng-tekrar direktifi Öğretici değişkeninde tanımlanan her bir anahtar-değer çiftini tek tek incelemek.
2. Her anahtar/değer çiftinin adını ve açıklamasını görüntüleme.

• Angular.html

<h2>Angular</h2>
<ul ng-repeat="ptutor in tutorial">
<li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>

• Düğüm.html — Yukarıdaki listeyle tamamen aynı, sadece başlığı "Düğüm" olarak değiştirilmiş. Her iki şablon da aynı şekilde okunuyor. tutorial Her denetleyicinin kendi kapsamından sağladığı değişken.

⚠️ Düzeltme: Orijinal Angular.html dosyasındaki başlık "Anguler" şeklindeydi. Yazım hatası yukarıda düzeltildi.

Kod başarıyla yürütülürse, tarayıcıda çalıştırdığınızda aşağıdaki çıktı görüntülenecektir.

Çıktı:

AngularJS Konuları bağlantısına tıkladığınızda aşağıdaki çıktı görüntülenecektir.

Çıktı açıkça şunu gösteriyor:

• “Angular JS Topics” linkine tıklandığında kodumuzda bildirdiğimiz RouteProvider Angular.html kodunun enjekte edilmesi gerektiğine karar veriyor.
• Bu kod ng-view direktifini içeren “div” etiketine enjekte edilecektir. Ayrıca kurs açıklamasının içeriği, AngularController'da tanımlanan kapsam nesnesinin parçası olan "öğretici değişkenden" gelir.
• Biri tıklandığında node.js Konularda da aynı sonuç ortaya çıkacak ve Node.js konularına ilişkin görünüm ortaya çıkacaktır.
• Ayrıca, sayfaya dikkat edin. URL Aynı kalır. Sadece # etiketinden sonraki rota değişir ve bu da tek sayfa uygulamalarının konseptidir. # etiketi, URL Bu, rota (bizim örneğimizde 'Angular') ile ana HTML sayfası (Sample.html) arasında bir ayırıcıdır.

Bu örnek yalnızca kullanıcı kayıtlı bir rotayla eşleşen bir bağlantıya tıkladığında çalışır. Sonraki bölümde, hiçbir eşleşme olmadığında ne olması gerektiği ele alınmaktadır.

AngularJS'de Varsayılan Rota Oluşturma

AngularJS'de yönlendirme aynı zamanda tesisin varsayılan bir rotaya sahip olmasını da sağlar. Mevcut rota ile eşleşme olmaması durumunda seçilen rotadır.

$routeProvider servisi tanımlanırken aşağıdaki koşulun eklenmesiyle varsayılan rota oluşturulur.

Aşağıdaki sözdizimi, mevcut rotalardan herhangi biri eşleşmezse farklı bir sayfaya yönlendirme anlamına gelir.

otherwise({
  redirectTo: 'page'
});

Yukarıdaki aynı örneği kullanalım ve $routeProvider hizmetimize varsayılan bir rota ekleyelim.

sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular', {
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  }).
  when('/Node', {
    templateUrl: 'Node.html',
    controller: 'NodeController'
  }).
  otherwise({
    redirectTo: '/Angular'
  });
}]);

Code Açıklama:

1. Burada yukarıdakiyle aynı kodu kullanıyoruz, tek fark `otherwise` ifadesini ve "redirectTo" seçeneğini kullanarak, hiçbir rota belirtilmediğinde hangi görünümün yükleneceğini belirtmemiz. Bizim durumumuzda '/Angular' görünümünün gösterilmesini istiyoruz.

Kod başarıyla yürütülürse, tarayıcıda çalıştırdığınızda aşağıdaki çıktı görüntülenecektir.

Çıktı:

Çıktıdan,

• Gördüğünüz gibi, varsayılan olarak gösterilen görünüm AngularJS görünümüdür.
• Bunun nedeni, sayfa yüklendiğinde $routeProvider fonksiyonundaki 'aksi takdirde' seçeneğine gitmesi ve '/Angular' görünümünü yüklemesidir.

Varsayılan bir rota, hangi görünümün yükleneceğine karar verir. Sonraki bölümde, tek bir rotanın bir değer taşıyarak birçok kayda nasıl hizmet edebileceği ele alınmaktadır. URL.

AngularJS Rotasından Parametrelere Nasıl Erişilir

Angular ayrıca yönlendirme sırasında parametre geçirme işlevini de sağlar. Parametreler, yönlendirme kodunun sonuna eklenir. URLÖrneğin, http://guru99/index.html#/Angular/1. Bu Angular yönlendirme örneğinde,

1. http://guru99/index.html ana uygulamamızdır. URL
2. # sembolü, ana uygulama ile uygulama arasındaki ayırıcıdır. URL ve rota
3. Açısal bizim rotamız
4. Ve son olarak '1' rotamıza eklenen parametremizdir.

Genel sözdizimi HTMLPage#/rota/parametreBu nedenle, önceki konular Sample.html#/Angular/1, #/Angular/2 ve #/Angular/3 haline gelir; buradaki rakam konu kimliğini temsil eder.

Şimdi, parametre içeren bir Angular rotasını nasıl uygulayabileceğimize detaylı olarak bakalım.

Adım 1) Aşağıdaki kodu görünümünüze ekleyin

1. Kullanıcıya Angular JS kursunun tüm konularını gösteren bir tablo ekleyin.
2. “Denetleyiciler” konusunu göstermek için bir tablo satırı ekleyin. Bu satır için href özelliğini “#!/Angular/1” olarak ayarlayın, böylece konuya tıklamak parametre 1'i iletir. URL güzergah boyunca.
3. "Modeller" konusu için, href özniteliğini "#!/Angular/2" olarak ayarlayarak bir satır ekleyin, böylece 2. parametre şu şekilde iletilir: URL.
4. "Yönergeler" konusu için, href özniteliğini "#!/Angular/3" olarak ayarlayarak bir satır ekleyin, böylece 3. parametre şu şekilde iletilir: URL.

Adım 2) routeProvider servis fonksiyonuna konu kimliğini ekleyin.
routeProvider servis fonksiyonuna aşağıdakileri ekleyin: :topicId Geçirilen herhangi bir parametreyi belirtmek için kullanılan yer tutucu. URL Rota belirlendikten sonra topicId değişkenine bir atama yapılmalıdır.

Adım 3) Gerekli kodu denetleyiciye ekleyin

1. Denetleyici fonksiyonunu tanımlarken öncelikle "$routeParams" parametresini eklediğinizden emin olun. Bu parametre, iletilen tüm rota parametrelerine erişebilecektir. URL.
2. “$routeParams”, rotada iletilen topicId'yi içerir. Ekleniyor $routeParams.topicId kapsamına $scope.tutorialid Bu sayede, görünüm için tutorialid olarak kullanılabilir hale gelir.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
<script src="https://code.angularjs.org/1.8.3/angular-route.js"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
<tbody>
<tr><td>1</td><td>Controllers</td>
<td><a href="#!/Angular/1">Topic details</a></td></tr>
<!-- rows 2 and 3 repeat with /Angular/2 and /Angular/3 -->
</tbody>
</table>
<div ng-view></div>

<script>
var sampleApp = angular.module('sampleApp', ['ngRoute']);

sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular/:topicId', {
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  });
}]);

sampleApp.controller('AngularController', ['$scope', '$routeParams',
function($scope, $routeParams) {
  $scope.tutorialid = $routeParams.topicId;
}]);
</script>
</body>
</html>

⚠️ Düzeltmeler uygulandı. Orijinal metinde harf kullanılmıştır. l rakam yerine 1 in href="#Angular/l", atladı ng-view Şablonun işleneceği bir yer kalmadığı için konteyner yüklendi. angular-route.js önce angular.min.jsBu da bir modül hatasına neden oluyor.

Adım 4) Değişkeni görüntülemek için ifadeyi ekleyin.
Tutorialid değişkenini Angular.html sayfasında görüntülemek için ifadeyi ekleyin.

<h2>Angular</h2>

<br><br>{{tutorialid}}

Kod başarıyla yürütülürse, tarayıcıda çalıştırdığınızda aşağıdaki çıktı görüntülenecektir.

Çıktı:

Çıkış ekranında,

• İlk konu için "Konu Detayları" bağlantısına tıkladığınızda, başlığa 1 rakamı eklenir. URL.
• Bu sayı "routeParams" argümanı olarak alınır ve denetleyicide erişilebilir hale gelir.

Bir parametreyi okumak basittir. Görünüm ortaya çıkmadan önce, parametrenin tanımladığı kaydı getirmek, bir sonraki bölümde ele alınan özelliğin görevidir.

resolve özelliği ile verileri önceden yükleme nasıl yapılır?

Önceki bölümdeki denetleyici, bir konu kimliğini okur ve hemen görüntüler. Gerçek uygulamalar önce kaydı bir sunucudan almalıdır ve eğer görünüm bu istek geri dönmeden önce oluşturulursa, kullanıcı bir süre sonra dolacak boş bir şablon görür. resolve Bu özellik, boş içeriğin anlık olarak görünmesini ortadan kaldırır.

Her bir anahtarın içinde resolve `object`, AngularJS'in rota etkinleşmeden önce hazırladığı bir bağımlılıktır. Değer bir promise ise, yönlendirici promise'in çözümlenmesini bekler. AngularJS, ancak tüm promise'ler çözümlendikten sonra denetleyiciyi oluşturur ve şablonu işler; çözümlenen değerler ise tıpkı diğer servislerde olduğu gibi isimleriyle denetleyiciye enjekte edilir.

sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular/:topicId', {
    templateUrl: 'Angular.html',
    controller: 'AngularController',
    resolve: {
      // The router waits for this promise before rendering
      topic: ['$http', '$route', function($http, $route) {
        var id = $route.current.params.topicId;
        return $http.get('/api/topics/' + id).then(function(response) {
          return response.data;
        });
      }]
    }
  });
}]);

// 'topic' is injected already resolved, so no loading state is needed
sampleApp.controller('AngularController', ['$scope', 'topic',
function($scope, topic) {
  $scope.topic = topic;
}]);

Burada iki davranış önemlidir. Reddedilen bir vaat, rota değişikliğini iptal eder ve tarayıcıyı mevcut görünümde bırakır; bu nedenle başarısız bir istek asla bozuk bir sayfa oluşturmaz. Ancak, yönlendirici vaat beklemedeyken bloke olduğundan, yavaş bir uç nokta uygulamanın donmuş gibi görünmesine neden olur. resolve ilerleme göstergesiyle yönlendirilen $routeChangeStart hem de $routeChangeSuccess olaylar.

⚠️ Uyarı: Kimlik doğrulama kontrollerini asla yalnızca içeriye yerleştirmeyin. resolveBir rotayı reddetmek bir görünümü gizler ancak arkasındaki verileri korumaz ve API uç noktası yine de sunucuda erişimi zorlamalıdır.

Verileri önceden yüklemenin ötesinde, bir rota statik yapılandırma değerlerini de taşıyabilir. Aşağıda açıklanan hizmet, bir denetleyicinin bunları nasıl okuduğunu gösterir.

Angular $route Hizmeti Nasıl Kullanılır?

`$route` servisi, rotanın özelliklerine erişmenizi sağlar. `$route` servisi, fonksiyon denetleyicide tanımlandığında bir parametre olarak kullanılabilir. `$route` parametresinin denetleyiciden nasıl kullanılabildiğine dair genel sözdizimi aşağıda gösterilmiştir.

myApp.controller('MyController', function($scope, $route) { ... });

1. myApp, uygulamanız için tanımlanmış AngularJS modülüdür.
2. MyController, uygulamanız için tanımlanmış denetleyicinin adıdır.
3. Tıpkı `$scope`'un denetleyiciden görünüme bilgi aktarması gibi, `$route` da mevcut rotanın özelliklerini ortaya koyar.

Şimdi $route servisini nasıl kullanabileceğimize bakalım.

Bu örnekte,

• "Bu açısaldır" dizesini içerecek "metnim" adında basit bir özel değişken oluşturacağız.
• Bu değişkeni rotamıza ekleyeceğiz. Later Bu dizeye denetleyicimizden `$route` servisini kullanarak erişeceğiz ve ardından `scope` nesnesini kullanarak onu görünümümüzde görüntüleyeceğiz.

Peki bunu başarmak için uygulamamız gereken adımlara bakalım.

) 1 Adım Rotaya özel bir anahtar/değer çifti ekleyin. Burada 'metnim' adında bir anahtar ekliyoruz ve ona "This is angular" değerini atadık.

) 2 Adım İlgili kodu denetleyiciye ekleyin.

1. Denetleyici fonksiyonuna `$route` parametresini ekleyin. `$route` parametresi, Angular'da tanımlanmış ve rotanın özelliklerine erişmenizi sağlayan önemli bir parametredir.
2. Rotada tanımlanan “mytext” değişkenine $route.current referansı aracılığıyla erişilebilir. Bu daha sonra kapsam nesnesinin 'metin' değişkenine atanır. Metin değişkenine daha sonra buna göre görünümden erişilebilir.

// Only the config and controller change; the page markup is unchanged
sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular/:topicId', {
    mytext: "This is angular",   // custom key attached to the route
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  });
}]);

sampleApp.controller('AngularController', ['$scope', '$routeParams', '$route',
function($scope, $routeParams, $route) {
  $scope.tutorialid = $routeParams.topicId;
  $scope.text = $route.current.mytext;
}]);

) 3 Adım Kapsam nesnesinden metin değişkenine bir ifade olarak bir başvuru ekleyin. Bu, aşağıda gösterildiği gibi Angular.html sayfamıza eklenecektir.

Bu, görünüme "Bu açısaldır" metninin enjekte edilmesine neden olacaktır. {{tutorialid}} ifadesi önceki başlıkta görülenle aynıdır ve bu '1' sayısını gösterecektir.

<h2>Angular</h2>

<br><br>{{text}}
<br><br>{{tutorialid}}

Kod başarıyla yürütülürse, tarayıcıda çalıştırdığınızda aşağıdaki çıktı görüntülenecektir.

Çıktı:

Çıktıdan,

• Tablodaki bağlantılardan herhangi birine tıkladığımızda da “This is angular” yazısının görüntülendiğini görüyoruz. Konu kimliği de metinle aynı anda görüntülenir.

Her URL Şu ana kadar gösterilenler hala # sembolünü içeriyor. Son yapılandırma adımı bu sembolü kaldırıyor.

HTML5 Yönlendirmeyi Etkinleştirme

HTML5 yönlendirmesi, temiz bir yapı oluşturmak için kullanılır. URLBu, hashtag'in kaldırılması anlamına gelir. URLYani yönlendirme URLHTML5 yönlendirmesi kullanıldığında, s aşağıdaki gibi görünecektir.

Sample.html/Angular/1

Sample.html/Angular/2

Sample.html/Angular/3

Bu kavram genellikle güzel bir sunum yapmak olarak bilinir. URL kullanıcıya

HTML2 yönlendirmesi için yapılması gereken 5 ana adım vardır.

1. $locationProvider'ı yapılandırma
2. Göreli bağlantılar için tabanımızı ayarlama

Şimdi, yukarıda belirtilen adımları örneğimizde nasıl uygulayacağımıza detaylı olarak bakalım.

) 1 Adım İlgili kodu Angular modülüne ekleyin.

1. eklemek <base> Bu, HTML5 yönlendirmesi için gereklidir; böylece uygulama, uygulamanın temel konumunun ne olduğunu bilir.
2. $locationProvider servisini ekleyin. Bu servis, html5Mode'u tanımlamanıza olanak tanır.
3. $locationProvider hizmetinin html5Mode'unu true olarak ayarlayın.

) 2 Adım Okunması kolay bağlantılar oluşturmak için tüm # etiketlerini kaldırın ('Angular/1', 'Angular/2', 'Angular/3'). URLs.

<!-- In the head: required by html5Mode so relative templates resolve -->
<base href="/">

<!-- In the body: the # is dropped from every link -->
<a href="Angular/1">Topic details</a>

<script>
sampleApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider.
  when('/Angular/:topicId', {
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  });
}]);
</script>

⚠️ Düzeltme: orijinali şunu ilan etti: baseUrl Yerel bir IDE yoluna işaret eden sabit değer, html5Mode üzerinde hiçbir etkiye sahip değildir. AngularJS, temel konumu buradan okur. <base href> etiket. Orijinali de eklendi. $locationProvider hiç aramadan html5Mode(true)Bu nedenle, karma değer hiçbir zaman kaldırılmadı.

Kod başarıyla yürütülürse, tarayıcıda çalıştırdığınızda aşağıdaki çıktı görüntülenecektir.

Çıktı:

Çıktıdan,

• Uygulamaya eriştiğinizde # etiketinin orada olmadığını görebilirsiniz.

Yukarıdaki her şey, AngularJS ekibi tarafından sağlanan yönlendirme aracı olan ngRoute'u kullanmaktadır. Bu tek seçenek değildir ve aşağıdaki karşılaştırma, alternatifin ne zaman daha uygun olduğunu açıklamaktadır.

ngRoute mu yoksa ui-router mı: Hangi yönlendiriciyi seçmeli?

ngRoute, AngularJS ekibi tarafından sürdürülmekte ve bir URL Doğrudan tek bir şablona ve denetleyiciye. ui-router, ngRoute'un temel sınırlamasını ortadan kaldırmak için oluşturulmuş bir topluluk projesidir: uygulamaya göre eşleştirme yapar. belirtmek, bildirmek yerine URL Bu özellik, tek bir ekranın birden fazla bağımsız yönlendirilmiş bölgeyi içermesine olanak tanır.

Her bir durumda ngRoute'u seçin. URL Tek bir tam sayfa görünümüne eşlenir, çünkü ekstra bir bağımlılığa ihtiyaç duymaz ve tüm API tek bir sayfaya sığar. Ekranın bağımsız olarak gezinen bölmeleri olduğunda veya alt görünümlerin bir üst öğe tarafından yüklenen verileri yeniden kullanması gerektiğinde ui-router'ı seçin. Daha sonra geçiş yapmak mümkündür ancak kolay değildir, çünkü durum adları yerini alır. URL Şablonların tamamında desenler mevcuttur.

AngularJS'de Sık Karşılaşılan Yönlendirme Hataları ve Bunların Nasıl Düzeltileceği

Yönlendirme hatalarının çoğu, konsol hatası yerine boş bir ng-view penceresi üretir; bu da teşhislerini olması gerekenden daha zor hale getirir. Aşağıdaki her belirti, nedenini ve çözümünü belirtir.

• Bilinmeyen sağlayıcı: $routeProvider: angular-route.js hiç yüklenmedi veya angular.min.js'den önce yüklendi. Öncelikle temel kütüphaneyi referans alın.
• Görünüm hatasız bir şekilde boş kalıyor: Hiçbir öğe ng-view yönergesini içermediğinden, şablonun oluşturulacağı bir yer yok.
• İlk ziyarette hiçbir şey yüklenmiyor: Boş yola uyan bir rota yok. Aksi takdirde, redirectTo değeri içeren bir blok ekleyin.
• $routeParams boş: Şablonun iki nokta üst üste yer tutucusu eksik. '/Angular/:topicId' şeklinde olmalıdır.
• html5Mode'dan sonra şablonlar 404 hatası veriyor: Sunucuyu, eşleşmeyen yolları temel sayfaya yeniden yazacak şekilde yapılandırın ve temel href etiketinin mevcut olduğunu doğrulayın.
• Kontrol cihazı asla yeniden çalıştırılmaz: Sadece parametre değiştiği için AngularJS, denetleyici örneğini yeniden oluşturmak yerine yeniden kullandı. Denetleyici fonksiyonunun tekrar çalışmasına güvenmek yerine, `$routeUpdate` olayını dinleyin.

SSS