مسار AngularJS
- الصفحة السابقة حركة AngularJS
- الصفحة التالية تطبيق AngularJS
ngRoute المodule يساعد تطبيقك في أن يصبح تطبيقًا صفحة واحدة.
ما هو التوجيه في AngularJS؟
إذا كنت ترغب في التنقل إلى صفحات مختلفة داخل التطبيق ولكن تريد أيضًا أن يكون التطبيق SPA (تطبيق صفحة واحدة) دون إعادة تحميل الصفحات، يمكنك استخدام ngRoute المodule.
ngRoute المodule يقوم بتحويل تطبيقك إلى صفحات مختلفة دون إعادة تحميل التطبيق بأكمله.
مثال
التنقل إلى "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>
<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 Route module:
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-route.js"></script>
ثم، يجب عليك تضمين ngRoute إضافة كمتطلب لـ module التطبيق:
var app = angular.module("myApp", ["ngRoute"]);
الآن يمكن لتطبيقك الوصول إلى ما يقدمه $routeProvider module.
استخدم $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"
});
});
باستخدام تطبيق config method definition $routeProvider، سيتم تنفيذ ما تم تعريفه في 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 = ".أحب لندن";
});
app.controller("parisCtrl", function ($scope) {}}
$scope.msg = "I love Paris";
});
"london.htm" و "paris.htm" هي ملفات HTML عادية، يمكنك إضافة تعبيرات AngularJS فيها، مثل أجزاء أخرى من تطبيق AngularJS.
هذه الملفات تبدو هكذا:
london.htm
<h1>لندن</h1>
<h3>لندن هي عاصمة إنجلترا.</h3>
<p>هي أكثر المدن سكانًا في المملكة المتحدة، ويبلغ عدد سكان منطقة العاصمة أكثر من 13 مليون نسمة.</p>
<p>{{msg}}</p>
paris.htm
<h1>باريس</h1>
<h3>باريس عاصمة فرنسا.</h3>
<p>منطقة باريس هي واحدة من أكبر مراكز السكان في أوروبا، ويبلغ عدد السكان فيها أكثر من 12 مليون نسمة.</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>انقر على الروابط لتغيير هذا المحتوى</p>"
})
.when("/banana", {
template : "<h1>البانان</h1><p>تحتوي البنات على حوالي 75% من الماء.</p>"
})
.when("/tomato", {
template : "<h1>البطاطا الحلوة</h1><p>تحتوي البطاطا الحلوة على حوالي 95% من الماء.</p>"
});
});
طريقة otherwise.
في المثال السابق، استخدمنا $routeProvider طريقة when.
يمكنك أيضًا استخدام otherwise عندما لا تتطابق أي مسار آخر، يصبح المسار الافتراضي.
مثال
إذا لم يتم النقر على رابط "Banana" أو رابط "Tomato"، أخبرهم:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/banana", {
template : "<h1>البانان</h1><p>تحتوي البنات على حوالي 75% من الماء.</p>"
})
.when("/tomato", {
template : "<h1>البطاطا الحلوة</h1><p>تحتوي البطاطا الحلوة على حوالي 95% من الماء.</p>"
})
.otherwise({
template : "<h1>لا شيء</h1><p>لم يتم اختيار أي شيء</p>"
});
});
- الصفحة السابقة حركة AngularJS
- الصفحة التالية تطبيق AngularJS
