توجيه AngularJS
تساعد الوحدة ngRouteتطبيقك في أن يصبح تطبيق صفحة واحدة.
ما هو التوجيه في AngularJS؟
إذا كنت ترغب في الانتقال إلى صفحات مختلفة في التطبيق الخاص بك ، ولكنك تريد أيضًا أن يكون التطبيق SPA (تطبيق صفحة واحدة) ، بدون إعادة تحميل الصفحة ، يمكنك استخدام ngRouteالوحدة.
تقوم ngRouteالوحدة بتوجيه التطبيق الخاص بك إلى صفحات مختلفة دون إعادة تحميل التطبيق بأكمله.
مثال:
انتقل إلى "red.htm" و "green.htm" و "blue.htm":
<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
</body>
ماذا احتاج؟
لجعل تطبيقاتك جاهزة للتوجيه ، يجب عليك تضمين وحدة مسار AngularJS:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
ثم يجب عليك إضافة ngRouteتبعية في وحدة التطبيق:
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"
});
});
أين يذهب؟
يحتاج تطبيقك إلى حاوية لوضع المحتوى الذي يوفره التوجيه.
هذه الحاوية هي ng-viewالتوجيه.
هناك ثلاث طرق مختلفة لتضمين ng-viewالتوجيه في طلبك:
مثال:
<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استخدام configالتطبيق الخاص بك. سيتم تنفيذ العمل المسجل في configالطريقة عند تحميل التطبيق.
تحكم
باستخدام رمز $routeProviderالتحكم يمكنك أيضًا تحديد وحدة تحكم لكل "عرض".
مثال:
إضافة وحدات تحكم:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm",
controller : "londonCtrl"
})
.when("/paris", {
templateUrl : "paris.htm",
controller : "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 كما تفعل مع أي أقسام HTML أخرى في تطبيق AngularJS الخاص بك.
تبدو الملفات كالتالي:
<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>
<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>
نموذج
في الأمثلة السابقة استخدمنا templateUrlالخاصية في
$routeProvider.whenالطريقة.
يمكنك أيضًا استخدام 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", {
template : "<h1>Banana</h1><p>Bananas
contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes
contain around 95% water.</p>"
});
});
طريقة خلاف ذلك
في الأمثلة السابقة استخدمنا whenطريقة $routeProvider.
يمكنك أيضًا استخدام otherwiseالطريقة ، وهي المسار الافتراضي عندما لا يحصل أي من الآخرين على تطابق.
مثال:
إذا لم يتم النقر على الرابط "Banana" أو "Tomato" ، فأخبرهم بما يلي:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas
contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes
contain around 95% water.</p>"
})
.otherwise({
template : "<h1>None</h1><p>Nothing
has been selected</p>"
});
});