مستشار AngularJS

يعتمد تطبيق AngularJS بشكل رئيسي على التحكم لتحكم تدفق البيانات في التطبيق. يتم استخدام التحكم بng-controllerتعريف التعليمات. ويعتبر التحكم كbject JavaScript يحتوي على خصائص/خصائص والوظائف. يتلقى كل تحكم $scope كمعامل، مما يمثل التحكم الذي يجب معالجته من تطبيق/الملف.

<div　ng-app　=　""　ng-controller　=　"studentController">
　　　...</div>

في هذا المكان، نستخدم تعليمات ng-controller لتحديد اسمstudentControllerمدير. نحن نحدد كما يلي-

<script>
　　　function studentController($scope) {
　　　　　　$scope.student = {
　　　　　　　　　firstName: "Mahesh",
　　　　　　　　　lastName: "Parashar",
　　　　　　　　　
　　　　　　　　　fullName: function() {
　　　　　　　　　　　　var studentObject;
　　　　　　　　　　　　studentObject = $scope.student;
　　　　　　　　　　　　return studentObject.firstName + " " + studentObject.lastName;
　　　　　　　　　}
　　　　　　};
　　　}
</script>

studentController يتم تعريفه ككائن JavaScript ويتم تقديم $scope كمعامل.
$scope يشير إلى تطبيق يستخدم كائن studentController.
$scope.student هو خاصية كائن studentController.
firstName و lastName هي خصائص كائن $scope.student. نحن نرسل القيم الافتراضية إليهم.
الخصائص fullName هي وظيفة كائن $scope.student، والذي يعيدcombining الاسم.
في دالة fullName، نحصل على كائن Student، ثم نعيدcombining الاسم.
لاحظ أننا يمكننا أيضًا تعريف كائن المدير في ملف JS منفصل ونقوم بالإشارة إليه في صفحة HTML.

الآن يمكننا استخدام ng-model أو التعبير التالي لاستخدام خاصية student في studentController:

ادخل الاسم: <input type="text" ng-model="student.firstName"><br>
ادخل العائلة: <input type="text" ng-model="student.lastName"><br><br>
أنت تكتب: {{student.fullName()}}

نحن نقوم بتحديد student.firstName و student.lastName في نافذتين من الإدخال.
نحن نقوم بتحديد student.fullName() في HTML.
الآن، بغض النظر عن ما تكتبه في نافذة إدخال الاسم والعائلة، يمكنك رؤية أن الاسم الكامل يتم تحديثه تلقائيًا.

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

في هذا المثال، يتم عرض استخدام المدير-

testAngularJS.htm

مثال

<html>
　　　<head>
　　　　　　<title>مدير AngularJS</title>
　　　　　　<script src="https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js"></script>
　　　　　　</script>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>مثال على مدير AngularJS</h2>
　　　　　　
　　　　　　<div ng-app="mainApp" ng-controller="studentController">
　　　　　　　　　ادخل الاسم: <input type="text" ng-model="student.firstName"><br>
　　　　　　　　　<br>
　　　　　　　　　ادخل العائلة: <input type="text" ng-model="student.lastName"><br>
　　　　　　　　　<br>
　　　　　　　　　أنت تكتب: {{student.fullName()}}
　　　　　　</div>
　　　　　　
　　　　　　<script>
　　　　　　　　　var mainApp = angular.module("mainApp", []);
　　　　　　　　　
　　　　　　　　　mainApp.controller('studentController', function($scope) {
　　　　　　　　　　　　$scope.student = {
　　　　　　　　　　　　　　　firstName: "Mahesh",
　　　　　　　　　　　　　　　lastName: "Parashar",
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　fullName: function() {
　　　　　　　　　　　　　　　　　　var studentObject;
　　　　　　　　　　　　　　　　　　studentObject = $scope.student;
　　　　　　　　　　　　　　　　　　return studentObject.firstName + " " + studentObject.lastName;
　　　　　　　　　　　　　　　}
　　　　　　　　　　　　};
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>

اختبار لمعرفة‹/›

أظهر النتائج

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

متصفح AngularJS تعبيرات AngularJS

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

مستشار AngularJS

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

testAngularJS.htm