تطبيق AngularJS Hello World: برنامجك النموذجي الأول

أفضل طريقة لرؤية قوة تطبيق AngularJS هي إنشاء أول تطبيق برنامج أساسي "Hello World" في Angular.JS.

هناك العديد من بيئات التطوير المتكاملة التي يمكنك استخدامها لتطوير AngularJS، بعض البيئات الشائعة مذكورة أدناه. في مثالنا نستخدم Webstorm كما IDE لدينا.

Webstorm
Sublime Text
AngularJS Eclipse
البصرية ستوديو

مرحبًا بالعالم، AngularJS

يوضح المثال أدناه أسهل طريقة لإنشاء تطبيق "Hello World" الأول في AngularJS.

<!DOCTYPE html>  
<html ng-app="app">  
<head>  
    <meta charset="utf 8">
    <title>Guru99</title>     
</head>  
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>  
    angular.module("app", []).controller("HelloWorldCtrl", function($scope) {  
    $scope.message="Hello World" 
    } )
</script> 

</body>  
</html>

شرح الكود:

في "ng- التطبيق"يتم استخدام الكلمة الأساسية للإشارة إلى أن هذا التطبيق يجب اعتباره تطبيق js زاويًا. يمكن إعطاء أي اسم لهذا التطبيق.
وحدة التحكم هي ما يتم استخدامه للاحتفاظ بمنطق الأعمال. في علامة h1، نريد الوصول إلى وحدة التحكم، والتي سيكون لها منطق عرض "HelloWorld"، لذلك يمكننا القول، في هذه العلامة نريد الوصول إلى وحدة التحكم المسماة "HelloWorldCtrl".
نحن نستخدم متغير عضو يسمى "الرسالة" وهو ليس سوى عنصر نائب لعرض رسالة "Hello World".
يتم استخدام "علامة البرنامج النصي" للإشارة إلى البرنامج النصي angular.js الذي يحتوي على جميع الوظائف الضرورية لـ angular js. بدون هذا المرجع، إذا حاولنا استخدام أي من وظائف AngularJS، فلن تعمل.
"وحدة التحكم" هي المكان الذي نقوم فيه فعليًا بإنشاء منطق أعمالنا، وهو وحدة التحكم الخاصة بنا. سيتم شرح تفاصيل كل كلمة رئيسية في الفصول اللاحقة. من المهم ملاحظة أننا نحدد طريقة تحكم تسمى "HelloWorldCtrl" والتي تتم الإشارة إليها في الخطوة 2.
نحن نقوم بإنشاء "وظيفة" سيتم استدعاؤها عندما يستدعي الكود الخاص بنا وحدة التحكم هذه. كائن $scope هو كائن خاص في AngularJS وهو كائن عام يستخدم داخل Angular.js. يتم استخدام كائن $scope لإدارة البيانات بين وحدة التحكم وطريقة العرض.
نقوم الآن بإنشاء متغير عضو يسمى "message"، ونخصص له قيمة "HelloWorld" ونربط متغير العضو بكائن النطاق.

نوت: التوجيه ng-controller هو كلمة أساسية محددة في AngularJS (الخطوة رقم 2) ويستخدم لتحديد وحدات التحكم في التطبيق الخاص بك. هنا في تطبيقنا، استخدمنا الكلمة الأساسية ng-controller لتحديد وحدة تحكم تسمى "HelloWorldCtrl". سيتم إنشاء المنطق الفعلي لوحدة التحكم في (الخطوة رقم 5).

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

الإخراج:

سيتم عرض الرسالة "مرحبا بالعالم".

تطبيق AngularJS Hello World: برنامجك النموذجي الأول

مرحبًا بالعالم، AngularJS

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

اشترك في النشرة الإخبارية