آانگولار جی ایس روٹنگ

پچھلے پیج آانگولار جی ایس اینیمیشن
پائیدار پیج آانگولار جی ایس ایپلی کیشن

</script> ماڈول آپ کی ایپلیکیشن کو پی پی اے بناتا ہے。

انگولار جی ایس میں روتنگ کیا ہے؟

اگر آپ اپنے ایپلیکیشن میں مختلف صفحات پر ناوگاہی کریں چاہتے ہیں، اور اس کے ساتھ ساتھ اس کو ایک پی پی اے (ایک پیج ایپلیکیشن) بننا چاہتے ہیں، جس میں صفحات کا لوڈ نہ ہو، تو آپ کرسکتے ہیں: </script> ماڈول。

</script> ماڈول آپ کی ایپلیکیشن کو مختلف صفحات پر روتنگ کرتا ہے، بغیر پورے ایپلیکیشن کو دوبارہ لوڈ کرنے کی ضرورت.

مثال

ناوگاہی کریں "red.htm"،"green.htm" اور "blue.htm":

<body ng-app="myApp">
<p><a href="#/!">پورٹل</a></p>
<a href="#!red">رنگی</a>
<a href="#!green">گرین</a>
<a href="#!blue">بلو</a>
دستورالعمل:

خود کا تجربہ کریں

我需要什么？

为了使你的应用程序为路由做好准备，你必须包含 AngularJS Route 模块：

var app = angular.module("myApp", ["ngRoute"]);

باید چه چیزی اضافه کنم؟ $routeProvider حالا برنامه شما می‌تواند به مسیرهایی که ارائه می‌دهند دسترسی داشته باشد

مодуل مسیر استفاده کنید. $routeProvider لطفاً از

app.config(function($routeProvider) {}}
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  })
  تنظیم مسیرهای مختلف در برنامه:
    .when("/red", {
  })
  templateUrl : "red.htm"
    .when("/green", {
  })
  templateUrl : "green.htm"
    .when("/blue", {
  });
});

templateUrl : "blue.htm"

که شد؟

پروژه شما نیاز به یک کانتینر دارد تا محتوای ارائه شده توسط مسیر را قرار دهد. پروژه تنها یک این کانتینر

دستورالعمل. پروژه تنها یک می‌توان سه روش مختلف برای شامل کردن

مثال

دستورالعمل:

خود کا تجربہ کریں

مثال

<div ng-view></div>

خود کا تجربہ کریں

مثال

<ng-view></ng-view>

خود کا تجربہ کریں

<div class="ng-view"></div> پروژه تنها یک ng-view

$routeProvider

استفاده از $routeProviderدستورالعمل، این خواهد بود جایگزین برای تمام مناظر ارائه شده توسط مسیر.

مثال

تعریف کنید، شما می‌توانید صفحه‌ای که هنگام کلیک بر روی لینک نمایش داده می‌شود را تعریف کنید. $routeProvider:

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  })
  .when("/london", {
    templateUrl : "london.htm"
  })
  .when("/paris", {
    templateUrl : "paris.htm"
  });
});

خود کا تجربہ کریں

با استفاده از برنامه پیکربندی تعریف روش $routeProviderدر زمان بارگذاری برنامه، کارهایی که در پیکربندی کارهایی که در روش‌ها ثبت شده‌اند.

کنترولر

استفاده از $routeProvider، شما همچنین می‌توانید یک کنترولر برای هر "منظره" تعریف کنید。

مثال

کنترولر اضافه کنید:

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  })
  .when("/london", {
    templateUrl : "london.htm",
    کنترولر : "londonCtrl"
  })
  .when("/paris", {
    templateUrl : "paris.htm",
    کنترولر : "parisCtrl"
  });
});
app.controller("londonCtrl", function ($scope) {
  $scope.msg = "I love London";
});
app.controller("parisCtrl", function ($scope) {}}
  $scope.msg = "I love Paris";
});

خود کا تجربہ کریں

"london.htm" و "paris.htm" فایل‌های HTML معمولی هستند، شما می‌توانید در آن‌ها عبارات AngularJS را اضافه کنید، مانند بخش‌های دیگر از برنامه AngularJS.

این فایل‌ها به این شکل به نظر می‌رسند:

london.htm

<h1>London</h1>
<h3>London is the capital city of England.</h3>
<p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>{{msg}}</p>

paris.htm

<h1>Paris</h1>
<h3>Paris is the capital city of France.</h3>
<p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
<p>{{msg}}</p>

قالب

در مثال‌های قبل، ما در $routeProvider.when در روش templateUrl ویژگی.

شما همچنین می‌توانید از ویژگی template ویژگی، که به شما اجازه می‌دهد مستقیماً در ارزش ویژگی HTML بنویسید، نه اینکه به صفحه ارجاع دهید.

مثال

نوشتن قالب:

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
  $routeProvider
  .when("/", {
    template : "<h1>Main</h1><p>Click on the links to change this content</p>"
  })
  .when("/banana", {
    ٹیمپلیٹ: "<h1>موز</h1><p>موز میں تقریباً 75% پانی ہوتا ہے.</p>"
  })
  .when("/tomato", {
    ٹیمپلیٹ: "<h1>توماتو</h1><p>توماتو میں تقریباً 95% پانی ہوتا ہے.</p>"
  });
});

خود کا تجربہ کریں

روش otherwise استفاده کردیم

در مثال‌های قبل، ما از $routeProvider روش when استفاده کنید.

شما همچنین می‌توانید از otherwise طریق، زمانی که هیچ یک از مسیرهای دیگر با آن‌ها مطابقت ندارد، به عنوان مسیر پیش‌فرض خواهد شد.

مثال

اگر نه "Banana" لنک کو نچکیده و نه "Tomato" لنک کو نچکیده، لطفاً به آن‌ها بگویید:

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
  $routeProvider
  .when("/banana", {
    ٹیمپلیٹ: "<h1>موز</h1><p>موز میں تقریباً 75% پانی ہوتا ہے.</p>"
  })
  .when("/tomato", {
    ٹیمپلیٹ: "<h1>توماتو</h1><p>توماتو میں تقریباً 95% پانی ہوتا ہے.</p>"
  })
  .otherwise({
    ٹیمپلیٹ: "<h1>کوئی نہیں چنا گیا</h1><p>کچھ بھی منتخب نہیں کیا گیا ہے</p>"
  });
});

خود کا تجربہ کریں

پچھلے پیج آانگولار جی ایس اینیمیشن
پائیدار پیج آانگولار جی ایس ایپلی کیشن

کورس جدول

تدریس

مثال

مراجع دستور زار

اختیاری کورس

کورس منصوبہ:

آانگولار جی ایس روٹنگ

انگولار جی ایس میں روتنگ کیا ہے؟

مثال

我需要什么？

templateUrl : "blue.htm"

مثال

مثال

مثال

$routeProvider

مثال

کنترولر

مثال

london.htm

paris.htm

قالب

مثال

روش otherwise استفاده کردیم

مثال

آلٹرونک بک س

آانگولار جی ایس مراجع دستور زار

آانگولار جی ایس مثال

سپانسر لنک