Latest web development tutorials

AngularJS حدة

وتعرف وحدة تطبيق.

الوحدة هي الحاويات في أجزاء مختلفة من التطبيق.

وحدة تحكم هو تطبيق الحاوية.

وحدة تحكم عادة تنتمي إلى وحدة نمطية.


إنشاء وحدة نمطية

يمكنك إنشاء وحدة نمطية التي كتبها AngularJS وظيفةangular.module:

<div نانوغرام التطبيق = "اسم التطبيق "> ... </ div>

<script>

فار التطبيق = angular.module ( "اسم التطبيق" ، [])؛

</ script>

"اسم التطبيق" المعلمة يناظر تنفيذ عناصر تطبيق HTML.

الآن يمكنك إضافة وحدة تحكم تعليمات والفلاتر وغيرها في التطبيقات AngularJS.


إضافة وحدة تحكم

يمكنك استخدام تعليماتنانوغرام تحكم لإضافة وحدة تحكم التطبيقات:

AngularJS الأمثلة

<div نانوغرام التطبيق = "اسم التطبيق " نانوغرام تحكم = "myCtrl" >
{{الاسم الأول + "" + اسم العائلة }}
</ div>

<script>

فار التطبيق = angular.module ( "اسم التطبيق" ، [])؛

app.controller ( "myCtrl"، وظيفة ( $ نطاق) {
$ scope.firstName = "جون".
$ scope.lastName = "دو".
})؛

</ script>

محاولة »

يمكنك AngularJS تحكم تعلم المزيد من المعرفة حول القسم تحكم.


إضافة إرشادات

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

تعليمات كاملة يمكن العثور عليها في محتويات دليل مرجعي AngularJS .

وبالإضافة إلى ذلك، يمكنك استخدام وحدة لإضافة تطبيقات التعليمات الخاصة بك:

AngularJS الأمثلة

<div نانوغرام التطبيق = "اسم التطبيق "، w3big التوجيه> </ div>

<script>

فار التطبيق = angular.module ( "اسم التطبيق" ، [])؛

app.directive ( "w3bigDirective"، وظيفة ( ) {
العودة {
قالب: "أنا خلقت منشئ تعليمات!"

})؛
</ script>

محاولة »

يمكنك AngularJS توجيهات تعلم المزيد من المعرفة عن قسم التعليمات.


وحدات التحكم المدرجة في ملف JS

عادة AngularJS حدة الطلب ويتم تضمين وحدة تحكم في ملف جافا سكريبت.

في الأمثلة التالية، "myApp.js" يحتوي على تعريف وحدات تطبيق البرنامج، يحتوي على "myCtrl.js" ملف وحدة تحكم:

AngularJS الأمثلة

<! DOCTYPE HTML>
<HTML>
<سيناريو SRC = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
<body>

<div نانوغرام التطبيق = "اسم التطبيق " نانوغرام تحكم = "myCtrl">
{{الاسم الأول + "" + اسم العائلة }}
</ div>

<سيناريو SRC = "myApp.js"> </ script>
<سيناريو SRC = "myCtrl.js"> </ script>

</ الجسم>
</ HTML>

محاولة »

myApp.js

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

مذكرة في تعريف وحدة يستخدم [] معلمة لتعريف تبعيات وحدة.
بين قوسين [] يشير إلى أن وحدة لا تعتمد على، إذا كان هناك تبعية، ثم سيعتمد على اسم وحدة مكتوبة بين قوسين.

myCtrl.js

app.controller( "myCtrl" , function($scope) {
    $scope.firstName = "John";
    $scope.lastName= "Doe";
});

وظيفة تؤثر على مساحة العالمي

يجب أن جافا سكريبت تجنب استخدام وظائف العالمية. لأنها يمكن بسهولة أن تكون مشمولة مع ملف نصي آخر.

AngularJS نطاق وحدة حتى يتسنى لجميع وظائف في وحدة، لتجنب هذه المشكلة.


عند تحميل المكتبة؟

مذكرة في مثالنا، يتم تحميل كافة مكتبات المستندات AngularJS HTML في الرأس.

لتطبيقات HTML ينصح بشكل عام على جميع النصوص توضع في الجزء السفلي من <BODY> العنصر.

سيؤدي هذا إلى زيادة سرعة تحميل الصفحة، لHTML لا تخضع لتحميل البرنامج النصي لتحميل.

في منطقتنا متعددة AngularJS سبيل المثال، سترى يتم تحميل مكتبة AngularJS في <رئيس> منطقة المستند.

في مثالنا، AngularJS في <رئيس> عنصر يتم تحميل، لأن الدعوة إلى angular.module أن تتم إلا بعد الانتهاء من تحميل المكتبة.

حل آخر هو لتحميل مكتبة AngularJS <body> عنصر، ولكن يجب أن توضع أمام النصي AngularJS الخاص بك:

AngularJS الأمثلة

<! DOCTYPE HTML>
<HTML>
<رئيس>
<محارف ميتا = "UTF-8 ">
<سيناريو SRC = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ رئيس>
<body>

<div نانوغرام التطبيق = "اسم التطبيق " نانوغرام تحكم = "myCtrl">
{{الاسم الأول + "" + اسم العائلة }}
</ div>
<script>
فار التطبيق = angular.module ( "اسم التطبيق"، [])؛
app.controller ( "myCtrl"، وظيفة ($ نطاق) {
$ Scope.firstName = "جون".
$ Scope.lastName = "دو".
})؛
</ script>

</ الجسم>
</ HTML>

محاولة »