دليل AngularJS الأساسي

Scope لـ AngularJS (مجال النطاق)Ajax لـ AngularJS

المشاهد لـ AngularJS

يدعم AngularJS تطبيقات الصفحة الواحدة (Single Page Application) من خلال رؤى متعددة في نفس الصفحة. لهذا السبب، يقدم AngularJS تعليمات ng-view و ng-template وخدمة $routeProvider.

تعليمات ng-view

تعليمات ng-view تخلق فقط مكانًا احتياطيًا، يمكن وضع رؤى مناسبة فيه (رؤى HTML أو رؤى ng-template).

استخدام

استخدام ng-view في module الرئيسي لتحديد div.

<div　ng-app　=　"mainApp">
　　　...
　　　<div ng-view></div></div>

تعليمات ng-template

استخدام تعليمات ng-template لإنشاء رؤى HTML باستخدام علامة script. إنه يحتوي علىidخصائص، يتم استخدامها من قبل $routeProvider لتوصيل الرؤى إلى التحكم.

استخدام

تحديد script block كـ ng-template في module الرئيسي.

<div　ng-app　=　"mainApp">
　　　...
　　　<script　type　=　"text/ng-template"　id　=　"addStudent.htm">
　　　　　　<h2>إضافة طالب</h2>
　　　　　　{{message}}
　　　</script>
</div>

خدمة $routeProvider

$routeProvider هو خدمة رئيسية يمكنها تعريف إعدادات URL، وتوصيلها إلى صفحات HTML أو ng-template، وتعيين التحكم الخاصة بها.

استخدام 1

تحديد script block كـ ng-template في module الرئيسي.

<div　ng-app　=　"mainApp">　
　　　...　
　　　<script　type　=　"text/ng-template"　id　=　"addStudent.htm">　
　　　　　　<h2>إضافة طالب</h2>　
　　　　　　{{message}}　
　　　</script>　　
</div>

استخدام 2

استخدام script block في module الرئيسي لتحديد إعدادات التوجيه.

var　mainApp　=　angular.module("mainApp",　['ngRoute']);
mainApp.config(['$routeProvider',　function($routeProvider)　{
　　　$routeProvider
　　　
　　　.when('/addStudent',　{
　　　　　　templateUrl: 'addStudent.htm', controller: 'AddStudentController'
　　　})
　　　.when('/viewStudents', {
　　　　　　templateUrl: 'viewStudents.htm', controller: 'ViewStudentsController'
　　　})
　　　.otherwise ({
　　　　　　redirectTo: '/addStudent'
　　　});
});

في المثال السابق، هذه النقاط مهمة

$routeProvider هو وظيفة معينة في إعدادات module mainApp، يتم تعريفها باستخدام المفتاح "$routeProvider".
تعريف URL " /addStudent " باستخدام $routeProvider.when، والذي يتم تمريره إلى " addStudent.htm " . يجب أن يكون ملف HTML الرئيسي في نفس المسار. إذا لم يتم تعريف صفحة HTML،则需要 استخدام ng-template مع id = "addStudent.htm". نحن نستخدم ng-template.
يستخدم "otherwise" لضبط العرض الافتراضي.
يستخدم "controller" لضبط السيطره على العرض.

مثال على الإنترنت

هذا المثال يوضح استخدام جميع الأوامر المذكورة أعلاه.

testAngularJS.htm

مثال

<html>
　　　<head>
　　　　　　<title>Angular　JS　Views</title>
　　　　　　<script　src　=　"https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js"></script>
　　　　　　<script　src　=　"https://cdn.staticfile.org/angular.js/1.3.14/angular-route.min.js">
　　　　　　</script>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>AngularJS-视图应用示例</h2>
　　　　　　<div　ng-app　=　"mainApp">
　　　　　　　　　<p><a　href　=　"https://ar.oldtoolbag.com/run/angularjs-views-1.html#addStudent"　target="_self">新增学生</a></p>
　　　　　　　　　<p><a　href　=　"https://ar.oldtoolbag.com/run/angularjs-views-1.html#viewStudents"　target="_self">查看学生</a></p>
　　　　　　　　　<div　ng-view></div>
　　　　　　　　　
　　　　　　　　　<script　type　=　"text/ng-template"　id　=　"addStudent.htm">
　　　　　　　　　　　　<h2>新增学生</h2>
　　　　　　　　　　　　{{message}}
　　　　　　　　　</script>
　　　　　　　　　
　　　　　　　　　<script　type　=　"text/ng-template"　id　=　"viewStudents.htm">
　　　　　　　　　　　　<h2>查看学生</h2>
　　　　　　　　　　　　{{message}}
　　　　　　　　　</script>
　　　　　　</div>
　　　　　　
　　　　　　<script>
　　　　　　　　　var　mainApp　=　angular.module("mainApp",　['ngRoute']);
　　　　　　　　　mainApp.config(['$routeProvider',　function($routeProvider)　{
　　　　　　　　　　　　$routeProvider
　　　　　　　　　　　　
　　　　　　　　　　　　.when('/addStudent',　{
　　　　　　　　　　　　　　　templateUrl:　'addStudent.htm',
　　　　　　　　　　　　　　　controller: 'AddStudentController'
　　　　　　　　　　　　})
　　　　　　　　　　　　.when('/viewStudents', {
　　　　　　　　　　　　　　　templateUrl: 'viewStudents.htm',
　　　　　　　　　　　　　　　controller: 'ViewStudentsController'
　　　　　　　　　　　　})
　　　　　　　　　　　　.otherwise({
　　　　　　　　　　　　　　　redirectTo: '/addStudent'
　　　　　　　　　　　　});
　　　　　　　　　});
　　　　　　　　　mainApp.controller('AddStudentController', function($scope) {
　　　　　　　　　　　　$scope.message = "هذا الصف سيتم استخدامه لعرض جدول إضافة الطلاب";
　　　　　　　　　});
　　　　　　　　　mainApp.controller('ViewStudentsController', function($scope) {
　　　　　　　　　　　　$scope.message = "هذا الصف سيتم استخدامه لعرض جميع الطلاب";
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>

اختبار وعرض‹/›

النتائج

افتح الملف في متصفح الويبtestAngularJS.htmواطلع على النتائج.

Scope لـ AngularJS (مجال النطاق)Ajax لـ AngularJS