تفسير ng-route في AngularJs وشرح أمثلة الكود

الشروط

أولاً،يجب عليك تضمين angular و angular-route في الصفحة،وتأكد من تضمين angular قبل angular-route

هذا يرجع إلى أن angular-route.js يحتاج إلى إدخال parameter window.angular،و هذا parameter يظهر فقط بعد تحميل angular.

(function(window, angular, undefined) {
'استخدام الحزم'؛

ngRouteModule.directive('ngView', ngViewFactory);

يمكنك تنزيله من الموقع الرسمي أو استخدام bower لتركيبه.

شرح

　　وظيفة التوجيه يتم تنفيذها بواسطة خدمة routeProvider و ng-view،ng-view يعتبر يقدم نقطة التثبيت لم��ط الصفحة،عند تغيير URL للتحويل،مختلف موديلات الصفحة سيتم وضعها في مكان ng-view;ثم من خلال تكوين routeProvider لتحديد خارطة التوجيه.

يتم ذلك عادة من خلال طريقتين:

when(): تكوين المسار والمعلمات

otherwise: تكوين التحويلات إلى المسارات الأخرى، يمكن اعتبارها default.

الرقم الثاني لـ when:

controller: وظيفة السيطرة في المسار أو الاسم

controllerAs: تعيين اسم وهمي للسيطرة

template: نموذج المسار، سيظهر في ng-view، مثل "<div>xxxx</div>"

templateUrl: مسار النموذج المتبادل، مثل "src/xxx.html"

resolve: يركز هذا المعامل على أن هذا الخصائص تقدم خدمات أو قيم مرتبطة بالمسار بشكل شكل مفتاح-قيمة، ثم يتم إدراج قيمة النتيجة أو استدعاء الخدمة في المسيطر. إذا كان resolve يحتوي على object Promise، فإنه سينتظر تنفيذ النتيجة قبل إدراجه في المسيطر، حيث سينتظر المسيطر تنفيذ result في resolve.

يمكن الرجوع إلى الأمثلة التفصيلية أدناه.

redirectTo: عنوان التحويل

reloadOnSearch: تعيين ما إذا كان يجب تحميل النموذج فقط عند تغيير عنوان الويب؛ لا يتم تحميل النموذج عند تغيير البحث وـ params

caseInsensitiveMatch: تحديد الحالة الكبيرة والصغيرة في المسار

يوجد بعض الحدثات المعتادة في المسار

$routeChangeStart: يتم تنشيط هذا الحدث قبل تحويل المسار

$routeChangeSuccess: يتم تنشيط هذا الحدث بعد نجاح تحويل المسار

$routeChangeError: يتم تنشيط هذا الحدث بعد فشل تحويل المسار

استخدام

في الصفحة، يتم كتابة رابط زر التحويل إلى URL وعلامة ng-view　　

 <div ng-controller="myCtrl">
  <ul>
   <li><a href="#/a">click a</a></li>
   <li><a href="#/b">click b</a></li>
  </ul>
  <ng-view></ng-view>
  <!-- <div ng-view ></div> -->
 </div>

فيها، يمكن استخدام ng-view كعنصر أو علامة.

فيjavascript يجب تعريف إعدادات التحويل

<script type="text/javascript">
 angular.module("myApp",["ngRoute"])
 .controller("aController",function($scope,$route){
  $scope.hello = "hello,a!";
 })
 .controller("bController",function($scope){
  $scope.hello = "hello,b!";
 })
 .controller("myCtrl",function($scope,$location){
  $scope.$on("$viewContentLoaded",function(){
   console.log("ng-view content loaded!");
  });
  $scope.$on("$routeChangeStart",function(event,next,current){
   //event.preventDefault(); //cancel url change
   console.log("route change start!");
  });
 })
 .config(function($routeProvider, $locationProvider) {
   $routeProvider
   .when('/a', {
   templateUrl: 'a.html',
   controller: 'aController'
   })
  .when('/b', {
   templateUrl: 'b.html',
   controller: 'bController',
   resolve: {
     // سينتج تأخير لمدة 3 ثوانٍ
     delay: function($q, $timeout) {
     var delay = $q.defer();
     $timeout(delay.resolve, 3000);
     return delay.promise;
     }
   }
  })
  .otherwise({
   redirectTo: '/a'
   });
 });
 </script>

في الكود المقدم، يرتبط /b بـ resolve يحتوي على طريقة تأخير، ويتم إرجاع Promise كنوع من النتيجة، ويتم إرجاع النتيجة بعد 3 ثوانٍ فقط. لذلك، يتم تحميل صفحة b بنجاح بعد 3 ثوانٍ.

إضافة إلى ذلك، يجب تقديم اثنين من html:

a.html：

<div ng-controller="aController" style="height:500px;width:100%;background-color:green;">{{hello}}</div>

وإلى b.html：

<div ng-controller="bController" style="height:2500px;width:100%;background-color:blue;">{{hello}}</div>

بهذا، يمكن تحقيق التبديل بين المسارات.

كل الكود يمكن الرجوع إليه:

<html ng-app="myApp">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script src="../../bower_components/angular/angular.js"></script>
 <script src="../../bower_components/angular-route/angular-route.js"></script>
</head>
<body>
 <div ng-controller="myCtrl">
  <ul>
   <li><a href="#/a">click a</a></li>
   <li><a href="#/b">click b</a></li>
  </ul>
  <ng-view></ng-view>
  <!-- <div ng-view ></div> -->
 </div>
 <script type="text/javascript">
 angular.module("myApp",["ngRoute"])
 .controller("aController",function($scope,$route){
  $scope.hello = "hello,a!";
 })
 .controller("bController",function($scope){
  $scope.hello = "hello,b!";
 })
 .controller("myCtrl",function($scope,$location){
  $scope.$on("$viewContentLoaded",function(){
   console.log("ng-view content loaded!");
  });
  $scope.$on("$routeChangeStart",function(event,next,current){
   //event.preventDefault(); //cancel url change
   console.log("route change start!");
  });
 })
 .config(function($routeProvider, $locationProvider) {
   $routeProvider
   .when('/a', {
   templateUrl: 'a.html',
   controller: 'aController'
   })
  .when('/b', {
   templateUrl: 'b.html',
   controller: 'bController',
   resolve: {
     // I will cause a 1 second delay
     delay: function($q, $timeout) {
     var delay = $q.defer();
     $timeout(delay.resolve, 3000);
     return delay.promise;
     }
   }
  })
  .otherwise({
   redirectTo: '/a'
   });
 });
 </script>
</body>
</html>

هذا هو جمع المعلومات حول ng-route لـ AngularJS، وسنواصل إضافة المعلومات ذات الصلة لاحقًا، شكرًا للجميع على دعم هذا الموقع!

البيان: محتويات هذا المقال تم جمعها من الإنترنت، ويتمتع صاحب الحقوق بها، يتم جمع المحتويات من قبل المستخدمين عبر الإنترنت بشكل تلقائي وتحميلها، ولا يملك هذا الموقع حقوق الملكية، ولا يتم تعديل المحتويات بشكل إنساني، ولا يتحمل هذا الموقع أي مسؤولية قانونية ذات صلة. إذا كنت قد وجدت محتوى يشتبه في انتهاك حقوق النسخ، فالرجاء إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (الرجاء استبدال # بـ @ عند إرسال البريد الإلكتروني) لتقديم الشكوى، وتقديم الدليل المتعلق، وإذا تم التحقق من صحة الشكوى، فإن هذا الموقع سيرحل على الفور عن المحتويات المشبوهة.

تعليمية الأساس

النصائح المفيدة لك