الثلاثاء، 22 ديسمبر 2020

First Application AngularJS كيفية كتابة تطبيق ب انجليولر جي إس جافا سكريبت

First Application AngularJS كيفية كتابة تطبيق ب انجليولر جي إس جافا سكريبت 

First Application AngularJS كيفية كتابة تطبيق ب انجليولر جي إس جافا سكريبت

First Application AngularJS كيفية كتابة تطبيق ب انجليولر جي إس جافا سكريبت 

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

 هناك العديد من بيئات التطوير المتكاملة التي يمكنك استخدامها لتطوير AngularJS ، وبعضها مذكور أدناه.  في مثالنا ، نحن نستخدم Webstorm باعتباره IDE الخاص بنا.
  1.  Webstorm
  2. Sublime Text
  3. AngularJS Eclipse
  4. Visual Studio


تطبيقك الأول  مرحبًا بالعالم في  AngularJS

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

 تطبيقك الأول في انجولير جي إس AngularJS 

<html lang="en">


<head>

  <meta charset="utf 8">

  <title>Arabic blog knowledge </title>

</head>


<body ng-app="app"><! --  الخطوة رقم ١ -->

  <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><! -- الخطوة رقم ٤-->

  </br>

  <a href="https://devlopertechnology.blogspot.com/"  >Follow me تابعني</a>

</body>


</html>    

اضغط هنا لتطبيق الكود السابق 


شرح كود انجليولر AngularJS 

  • الخطوة رقم ١

تُستخدم الكلمة الأساسية "ng-app" للإشارة إلى وجوب اعتبار هذا التطبيق أحد تطبيقات الزاوية AngularJS .  يمكن إعطاء أي اسم لهذا التطبيق.

ملاحظة كلمة Angular تعني بالعربي الزاوية

  •  الخطوة رقم ٢

ng-controller المتحكم هو ما يستخدم للاحتفاظ بمنطق الأعمال.  في علامة h1 ، نريد الوصول إلى وحدة التحكم ، والتي سيكون لها منطق لعرض "HelloWorld" ، لذلك يمكننا القول ، في هذه العلامة ، نريد الوصول إلى وحدة التحكم المسماة "HelloWorldCtrl".

 نحن نستخدم متغير عضو يسمى "message" وهو ليس سوى عنصر  لعرض رسالة "Hello World".

  • الخطوة رقم ٣ 

استدعاء مكتبة الزاوية AngularJS وبدونها لن يعمل التطبيق، لاحظ الزاوية AngularJS تماما مثل jquery فهي مكتبة تسهل عليك برمجة وتصميم تطبيقات الويب. 

 تُستخدم "علامة البرنامج النصي script tag" للإشارة إلى البرنامج النصي angular.js الذي يحتوي على جميع الوظائف الضرورية لـ angular js.  بدون هذا المرجع ، إذا حاولنا استخدام أي من وظائف AngularJS ، فلن تعمل.

  • الخطوة الرابعة 

Controller  "المتحكم" هو المكان الذي ننشئ فيه منطق أعمالنا ، وهو المتحكم الخاص بنا.  سيتم شرح تفاصيل كل كلمة رئيسية في الفصول اللاحقة.  من المهم ملاحظة أننا نحدد طريقة تحكم تسمى 'HelloWorldCtrl' والتي تتم الإشارة إليها في الخطوة 2.

 نحن نقوم بإنشاء "دالة function" سيتم استدعاؤها عندما يستدعي كودنا عن طريق وحدة التحكم هذه.  كائن $scope  هو كائن خاص في AngularJS وهو كائن عام يستخدم في Angular.js.  يتم استخدام كائن النطاق $scope لإدارة البيانات بين وحدة التحكم والعرض.

 نقوم بإنشاء متغير  يسمى "message" ، مع تخصيص قيمة "HelloWorld" له وإرفاق متغير العضو بكائن $scope.

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


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

First Application AngularJS كيفية كتابة تطبيق ب انجليولر جي إس جافا سكريبت





التسميات:

مرسلة بواسطة Ahmed almahallawi @ ديسمبر 22, 2020