English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

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

مكونات AngularJS

يدعم AngularJS طريقة الت模块ة. تُستخدم الوحدات لفصل اللógica (مثل الخدمات، الوحدات، التطبيقات، إلخ) عن الكود، مما يحافظ على نظافة الكود. نُحدد الوحدات في ملفات js منفردة ونُسميها وفقًا لملف module.js. في هذا المثال، سنقوم بإنشاء وحدتين-

  • Application Module(وحدة التطبيق)−لإعداد التطبيق.controller(s).

  • Controller Module(وحدة التحكم) −لتحديد التحكم.

وحدة التطبيق

فيما يلي ملف معروف بـ mainApp.js يحتوي على الكود التالي-

var　mainApp　=　angular.module("mainApp",　[]);

في هذا المكان، نستخدم دالة angular.module لإنشاء وحدة تطبيق mainApp، ونقوم بتقديم مجموعة فارغة إليها. عادةً تحتوي هذه المجموعة على وحدات ذات صلة.

وحدة التحكم

studentController.js

mainApp.controller("studentController", function($scope) {
　　　$scope.student = {
　　　　　　firstName: "Mahesh",
　　　　　　lastName: "Parashar",
　　　　　　fees:500,
　　　　　　
　　　　　　subjects:[
　　　　　　　　　{name:'Physics',marks:70},
　　　　　　　　　{name:'Chemistry',marks:80},
　　　　　　　　　{name:'Math',marks:65},
　　　　　　　　　{name:'English',marks:75},
　　　　　　　　　{name:'Hindi',marks:67}
　　　　　　],
　　　　　　fullName: function() {
　　　　　　　　　var studentObject;
　　　　　　　　　studentObject = $scope.student;
　　　　　　　　　return studentObject.firstName + " " + studentObject.lastName;
　　　　　　}
　　　});
});

في هذا المكان، نستخدم دالة mainApp.controller لإنشاء وحدة تحكم studentController.

استخدام الوحدات


　　　...
　　　<script src="mainApp.js"></script>
　　　<script src="studentController.js"></script>

في هذا المكان، نستخدم وحدة التطبيق التي تُستخدم فيها تعليمات ng-app، وكذلك الوحدة التي تُستخدم فيها تعليمات ngcontroller. نُقوم بتحميل ملفات mainApp.js و studentController.js في الصفحة الرئيسية من HTML.

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

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

testAngularJS.htm

<html>
　　　<head>
　　　　　　<title>Angular JS Modules</title>
　　　　　　<script src="https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js"></script>
　　　　　　
　　　　　　
　　　　　　
　　　　　　
　　　
　　　
　　　
　　　　　　
AngularJS　模块使用示例

　　　　　　
　　　　　　　　　
　　　　　　　　　
　　　　　　　　　　　　
　　　　　　　　　　　　　　　输入名字:
　　　　　　　　　　　　　　　
　　　　　　　　　　　　
　　　　　　　　　　　　
　　　　　　　　　　　　　　　输入姓氏:　
　　　　　　　　　　　　　　　
　　　　　　　　　　　　
　　　　　　　　　　　　
　　　　　　　　　　　　　　　姓名:　
　　　　　　　　　　　　　　　{{student.fullName()}}
　　　　　　　　　　　　
　　　　　　　　　　　　
　　　　　　　　　　　　　　　科目:
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　
名称分数
{{　subject.name　}}{{　subject.marks　}}

　　　　　　　　　　　　　　　
　　　　　　　　　　　　
　　　　　　　　　
　　　　　　
　　　　　　 　　　 测试看看‹/›

mainApp.js

var　mainApp　=　angular.module("mainApp",　[]);

studentController.js

mainApp.controller("studentController", function($scope) {
　　　$scope.student = {
　　　　　　firstName: "Sea",
　　　　　　lastName: "Gull",
　　　　　　fees:500,
　　　　　　
　　　　　　subjects:[
　　　　　　　　　　　　　{name:'الفيزياء',marks:70},
　　　　　　　　　　　　　{name:'الكيمياء',marks:80},
　　　　　　　　　　　　　{name:'الرياضيات',marks:65},
　　　　　　　　　　　　　{name:'اللغة الإنجليزية',marks:75},
　　　　　　　　　　　　　{name:'اللغة الصينية',marks:67}
　　　　　　],
　　　　　　fullName: function() {
　　　　　　　　　var studentObject;
　　　　　　　　　studentObject = $scope.student;
　　　　　　　　　return studentObject.firstName + " " + studentObject.lastName;
　　　　　　}
　　　});
});

نتائج الإخراج

فتح الملف في متصفح الويبtextAngularJS.htm.

نماذج AngularJSHTML DOM في AngularJS