وحدات تحكم AngularJS مع مثال ng-Controller

من قبل: جيمس هارتمان جيمس هارتمان
Hours تحديث

ما هو جهاز التحكم في AngularJS؟

A مراقب في AngularJS، يأخذ البرنامج البيانات من العرض، ويعالجها، ثم يرسل تلك البيانات إلى العرض الذي يتم عرضه للمستخدم النهائي. سيحتوي المتحكم على منطق العمل الأساسي الخاص بك. سيستخدم المتحكم نموذج البيانات، وينفذ المعالجة المطلوبة ثم يمرر الناتج إلى العرض الذي يتم عرضه بدوره للمستخدم النهائي.

ما الذي تفعله وحدة التحكم من منظور Angular؟

فيما يلي تعريف بسيط لكيفية عمل AngularJS Controller:

عمل وحدة تحكم AngularJS
عمل وحدة تحكم AngularJS
  • المسؤولية الأساسية لوحدة التحكم هي التحكم في البيانات التي يتم تمريرها إلى العرض. النطاق والعرض لهما اتصال في اتجاهين.
  • يمكن لخصائص العرض استدعاء "الوظائف" في النطاق. علاوة على ذلك، يمكن للأحداث في العرض استدعاء "الطرق" في النطاق. يقدم مقتطف الكود أدناه مثالاً بسيطًا للوظيفة.
    • استخدم وظيفة (نطاق $) والذي يتم تعريفه عند تحديد وحدة التحكم والوظيفة الداخلية التي يتم استخدامها لإرجاع تسلسل $scope.firstName و$scope.lastName.
    • In AngularJS، عندما تقوم بتعريف دالة كمتغير، فإنها تُعرف باسم الطريقة.

عمل وحدة تحكم AngularJS

  • تمر البيانات بهذه الطريقة من وحدة التحكم إلى النطاق، ثم تنتقل البيانات ذهابًا وإيابًا من النطاق إلى العرض.
  • يتم استخدام النطاق لتعريض النموذج للعرض. يمكن تعديل النموذج عبر الأساليب المحددة في النطاق والتي يمكن تشغيلها عبر أحداث من العرض. يمكننا تحديد ربط النموذج ثنائي الاتجاه من النطاق إلى النموذج.
  • لا ينبغي استخدام وحدات التحكم بشكل مثالي للتعامل مع DOM. بل ينبغي القيام بذلك من خلال التوجيهات التي سنراها لاحقًا.
  • أفضل ممارسة هي استخدام وحدات تحكم تعتمد على الوظائف. على سبيل المثال، إذا كان لديك نموذج للإدخال وتحتاج إلى وحدة تحكم لذلك، قم بإنشاء وحدة تحكم تسمى "وحدة تحكم النموذج".

كيفية بناء وحدة تحكم أساسية في AngularJS

فيما يلي خطوات إنشاء وحدة تحكم في AngularJS:

الخطوة 1) إنشاء صفحة HTML أساسية

قبل أن نبدأ بإنشاء وحدة التحكم، نحتاج أولاً إلى إعداد صفحة HTML الأساسية الخاصة بنا.

مقتطف الكود أدناه عبارة عن صفحة HTML بسيطة تحمل عنوان "تسجيل الأحداث" وتحتوي على إشارات إلى مكتبات مهمة مثل Bootstrapومسج والزاوي.

قم ببناء وحدة تحكم أساسية في AngularJS

  1. نحن نضيف مراجع إلى أوراق أنماط bootstrap CSS، والتي سيتم استخدامها مع مكتبات bootstrap.
  2. نقوم بإضافة مراجع إلى مكتبات angularjs. والآن، سيتم الرجوع إلى كل ما نفعله مع angular.js من هذه المكتبة.
  3. نقوم بإضافة مراجع إلى مكتبة bootstrap لجعل صفحة الويب الخاصة بنا أكثر استجابة لعناصر تحكم معينة.
  4. لقد أضفنا مراجع إلى مكتبات jquery التي سيتم استخدامها لمعالجة DOM. هذا مطلوب بواسطة Angular لأن بعض الوظائف في Angular تعتمد على هذه المكتبة.

افتراضيًا، سيكون مقتطف الكود أعلاه موجودًا في جميع الأمثلة لدينا، حتى نتمكن من عرض كود angularJS المحدد فقط في الأقسام اللاحقة.

الخطوة 2) التحقق من الملفات وبنية الملف

ثانيًا، دعونا نلقي نظرة على ملفاتنا وبنية الملفات التي سنبدأ بها طوال مدة الدورة التدريبية.

قم ببناء وحدة تحكم أساسية في AngularJS

  1. نقوم أولاً بفصل ملفاتنا إلى مجلدين كما هو الحال مع أي تطبيق ويب تقليدي. لدينا المجلد "CSS". سيحتوي على جميع ملفات أوراق الأنماط المتتالية، وبعد ذلك سيكون لدينا مجلد "lib" الخاص بنا والذي سيحتوي على جميع ملفاتنا Javaسيناريو الملفات.
  2. يتم وضع ملف bootstrap.css في مجلد CSS ويستخدم لإضافة مظهر ومظهر جيد لموقعنا على الويب.
  3. angular.js هو ملفنا الرئيسي الذي تم تنزيله من موقع angularJS وحفظه في مجلد lib الخاص بنا.
  4. سيحتوي ملف app.js على الكود الخاص بنا لوحدات التحكم.
  5. يتم استخدام ملف bootstrap.js لتكملة ملف bootstrap.cs لإضافة وظيفة bootstrap إلى تطبيق الويب الخاص بنا.
  6. سيتم استخدام ملف jquery لإضافة وظيفة معالجة DOM إلى موقعنا.

الخطوة 3) استخدم كود AngularJS لعرض الإخراج

ما نريد فعله هنا هو عرض الكلمات "AngularJS" بصيغة نصية وفي مربع نصي عند عرض الصفحة في المتصفح. دعنا نرى مثالاً حول كيفية استخدام angular.js للقيام بذلك:

قم ببناء وحدة تحكم أساسية في AngularJS

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">

	Tutorial Name : <input type="text" ng-model="tutorialName"><br>

	This tutorial is {{tutorialName}}
</div>
<script>
	var app = angular.module('DemoApp',[]);

	app.controller('DemoController', function($scope){
	$scope.tutorialName = "Angular JS";
	});
</script>

</body>
</html>

شرح الكود:

  1. استخدم ng- التطبيق يتم استخدام الكلمة الأساسية للإشارة إلى أن هذا التطبيق يجب اعتباره تطبيقًا زاويًا. أي شيء يبدأ بالبادئة "نانوغرام" ومن المعروف باسم توجيهات. "DemoApp" هو الاسم الذي يطلق على تطبيق Angular.JS الخاص بنا.
  2. لقد أنشأنا علامة div وفي هذه العلامة أضفنا توجيه ng-controller بالإضافة إلى اسم وحدة التحكم الخاصة بنا "DemoController". وهذا يجعل علامة div الخاصة بنا قادرة على الوصول إلى محتويات وحدة التحكم التجريبية. يتعين عليك ذكر اسم وحدة التحكم ضمن التوجيه للتأكد من قدرتك على الوصول إلى الوظائف المحددة داخل وحدة التحكم.
  3. نقوم بإنشاء نموذج ربط باستخدام التوجيه ng-model. ما يفعله هذا هو ربط مربع النص الخاص باسم البرنامج التعليمي بالمتغير العضو "tutorialName".
  4. نحن نقوم بإنشاء متغير عضو يسمى "tutorialName" والذي سيتم استخدامه لعرض المعلومات التي يكتبها المستخدم في مربع النص لاسم البرنامج التعليمي.
  5. نحن نقوم بإنشاء وحدة سيتم إرفاقها بتطبيق DemoApp الخاص بنا. لذا أصبحت هذه الوحدة الآن جزءًا من تطبيقنا.
  6. في الوحدة، نحدد دالة تقوم بتعيين قيمة افتراضية "AngularJS" لمتغير اسم البرنامج التعليمي الخاص بنا.

إذا تم تنفيذ الأمر بنجاح، سيتم عرض الإخراج التالي عند تشغيل الكود الخاص بك في المتصفح.

الإخراج:

قم ببناء وحدة تحكم أساسية في AngularJS

نظرًا لأننا قمنا بتعيين قيمة "Angular JS" للمتغير tutorialName، فسيتم عرض ذلك في مربع النص وفي سطر النص العادي.

ذات المواد

كيفية تحديد الأساليب في وحدات تحكم AngularJS

عادة، قد يرغب المرء في تحديد طرق متعددة في وحدة التحكم لفصل منطق الأعمال.

على سبيل المثال، لنفترض أنك إذا أردت أن تجعل وحدة التحكم الخاصة بك تقوم بأمرين أساسيين،

  1. قم بإجراء عملية جمع رقمين
  2. إجراء عملية طرح رقمين

يمكنك بعد ذلك إنشاء طريقتين بشكل مثالي داخل وحدة التحكم الخاصة بك، واحدة لإجراء عملية الجمع والأخرى لإجراء الطرح.

دعونا نرى مثالاً بسيطًا لكيفية تحديد الأساليب المخصصة داخل وحدة تحكم Angular.JS. سوف تقوم وحدة التحكم ببساطة بإرجاع سلسلة.

تحديد الأساليب في وحدات تحكم AngularJS

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">
	Tutorial Name :<input type="text" ng-model="tutorialName"><br>
	<br>
	This tutorial is {{tutorialName}}	
</div>

<script>
var app = angular.module('DemoApp', []);
app.controller('DemoController', function($scope) {
    $scope.tutorialName = "Angular JS";
	$scope.tName = function() {
        return $scope.tName;
    };
});
</script>	
</body>
</html>

شرح الكود:

  1. هنا، نقوم فقط بتعريف دالة تُرجع سلسلة من "AngularJS". يتم إرفاق الوظيفة بكائن النطاق عبر متغير عضو يسمى TutorialName.
  2. إذا تم تنفيذ الأمر بنجاح، سيتم عرض الإخراج التالي عند تشغيل الكود الخاص بك في المتصفح.

الإخراج:

تحديد الأساليب في وحدات تحكم AngularJS

وحدة تحكم AngularJS مع مثال ng-Controller

دعونا نلقي نظرة على مثال "HelloWorld" حيث تم وضع جميع الوظائف في ملف واحد. حان الوقت الآن لوضع الكود الخاص بوحدة التحكم في ملفات منفصلة.

دعنا نتبع الخطوات أدناه للقيام بذلك:

الخطوة 1) في ملف app.js، أضف الكود التالي لوحدة التحكم الخاصة بك

وحدة تحكم AngularJS مع وحدة تحكم ng

angular.module('app',[]).controller('HelloWorldCtrl',function($scope)
{
	$scope.message = "Hello World"
});

يقوم الكود أعلاه بالأشياء التالية:

  1. حدد وحدة تسمى "التطبيق" والتي ستحمل وحدة التحكم جنبًا إلى جنب مع وظيفة وحدة التحكم.
  2. قم بإنشاء وحدة تحكم باسم "HelloWorldCtrl". سيتم استخدام وحدة التحكم هذه للحصول على وظيفة لعرض رسالة "Hello World".
  3. يتم استخدام كائن النطاق لتمرير المعلومات من وحدة التحكم إلى العرض. لذلك في حالتنا، سيتم استخدام كائن النطاق للاحتفاظ بمتغير يسمى "message".
  4. نحن نحدد الرسالة المتغيرة ونخصص لها القيمة "Hello World".

الخطوة 2) الآن، في ملف Sample.html الخاص بك، قم بإضافة فئة div التي ستحتوي على توجيه ng-controller ثم قم بإضافة مرجع إلى متغير العضو "message"

لا تنس أيضًا إضافة مرجع إلى ملف البرنامج النصي app.js الذي يحتوي على الكود المصدري لوحدة التحكم الخاصة بك.

وحدة تحكم AngularJS مع وحدة تحكم ng

<!DOCTYPE html>
<html ng-app="app">
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<div class="container">
	<div ng-controller="HelloWorldCtrl">{{message}}</div>
</div>

<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<script src="app.js"></script>

</body>
</html>

إذا تم إدخال الكود أعلاه بشكل صحيح، فسيتم عرض الإخراج التالي عند تشغيل الكود في المتصفح.

الإخراج:

وحدة تحكم AngularJS مع وحدة تحكم ng

ملخص

  • المسؤولية الأساسية لوحدة التحكم هي إنشاء كائن نطاق والذي بدوره يتم تمريره إلى العرض
  • كيفية إنشاء وحدة تحكم بسيطة باستخدام توجيهات ng-app وng-controller وng-model
  • كيفية إضافة أساليب مخصصة إلى وحدة التحكم والتي يمكن استخدامها لفصل الوظائف المختلفة داخل وحدة angularjs.
  • يمكن تعريف وحدات التحكم في ملفات خارجية لفصل هذه الطبقة عن طبقة العرض. يعد هذا عادةً من أفضل الممارسات عند إنشاء تطبيقات الويب.

تلخيص هذه التدوينة بـ: