AngularJS التطبيقات

وحدة AngularJS: السابق

أمثلة AngularJS: التالي

الآن هو الوقت المناسب لإنشاء AngularJS الحقيقي تطبيقات الويب صفحة واحدة (صفحة واحدة تطبيقات الويب، SPA) أ.

AngularJS أمثلة التطبيق

كنت قد تعلمت ما يكفي من المعرفة حول AngularJS، يمكنك الآن البدء في إنشاء أول تطبيق AngularJS الخاص بك:

ملاحظاتي

تبقى عدد الكلمات:100

شرح تطبيق

AngularJS الأمثلة

<الاكواد نانوغرام التطبيق = "myNoteApp ">
<رئيس>
<محارف ميتا = "UTF-8 ">
<سيناريو SRC = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ رئيس>
<body>

<div نانوغرام تحكم = "myNoteCtrl ">

<H2> ملاحظاتي </ H2>

<P> <تيكستاريا نانوغرام طراز = "رسالة" من الأعمدة = "40" الصفوف = "10"> </ textarea> من </ P>

<P>
<زر نانوغرام مزدوجا فوق = "انقاذ ()"> حفظ </ زر>
<زر نانوغرام مزدوجا فوق = "واضحة ()"> مسح </ زر>
</ P>

<P> عدد الأحرف اليسار: <SPAN نانوغرام ربط = "اليسار ()"> </ SPAN> </ P>

</ div>

<سيناريو SRC = "myNoteApp.js"> </ script>
<سيناريو SRC = "myNoteCtrl.js"> </ script>

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

محاولة »

الملفات تطبيق "myNoteApp.js":

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

تحكم ملف "myNoteCtrl.js":

app.controller ( "myNoteCtrl"، وظيفة ($ نطاق) {
$ Scope.message = ""؛
$ Scope.left = وظيفة () {عودة 100 - $ scope.message.length؛}.
$ Scope.clear = وظيفة () {$ scope.message = ""؛}؛
$ Scope.save = وظيفة () {تنبيه ( "ملاحظة محفوظ")؛}؛
})؛

<HTML> العنصر AngularJS التطبيق: نانوغرام التطبيق = "myNoteApp" حاوية:

<الاكواد نانوغرام التطبيق = "myNoteApp ">

صفحات <div> HTML في وحدة تحكم: نانوغرام تحكم = "myNoteCtrl" النطاق:

نانوغرام نموذج التوجيه ربط <textarea> من على الرسالة تحكم متغير:

<ناحية النص نانوغرام طراز = "رسالة " من الأعمدة = "40" الصفوف = "10"> </ textarea> من

يدعو اثنين نانوغرام مزدوجا فوق الحدث وظيفة تحكم واضحة () وحفظ ():

<زر نانوغرام مزدوجا فوق = "انقاذ ()"> حفظ </ زر>
<زر نانوغرام مزدوجا فوق = "واضحة ()"> محو </ زر>

قيادة نانوغرام ربط لربط اليسار ظيفة وحدة تحكم () في <span>، ويستخدم لعرض الأحرف المتبقية:

عدد الأحرف اليسار: <SPAN نانوغرام -bind = "اليسار ()"> </ SPAN>

تطبيقات مكتبة الملفات اللازمة لأداء بعد AngularJs التحميل:

<سيناريو SRC = "myNoteApp.js"> </ script>
<سيناريو SRC = "myNoteCtrl.js"> </ script>

AngularJS تطبيق الهندسة المعمارية

ومن الأمثلة على ما سبق هو AngularJS كاملة تطبيقات الويب صفحة واحدة (صفحة واحدة تطبيقات الويب، SPA).

<HTML> العنصر يحتوي على تطبيق AngularJS (نانوغرام التطبيق =).

<div> العنصر يحدد نطاق نغ (وحدة تحكم =) AngularJS تحكم.

تطبيقات يمكن أن يتم في الكثير من وحدات التحكم.

ملف التطبيق (بلدي ... App.js) يحدد تطبيق مدونة نموذجية.

ملف واحد أو أكثر وحدات التحكم (بلدي ... Ctrl.js) يحدد رمز وحدة تحكم.

ملخص - كيف يعمل؟

التوجيه نانوغرام التطبيق في العنصر الجذر للتطبيق.

لتطبيقات صفحة واحدة ويب (صفحة واحدة تطبيقات الويب، SPA)، وتطبيقات الجذر عادة <HTML> العنصر.

ويعرف واحد أو أكثر نانوغرام تحكم التوجيه وحدة تحكم التطبيق. كل وحدة تحكم لديها عناصر HTML :: له تعريف نطاق الخاص.

AngularJS بدء تلقائيا في حالة HTML DOMContentLoaded. إذا وجدت التوجيه نانوغرام التطبيق، AngularJS وحدة التعليم الحمل، ونانوغرام التطبيق كما جذر التطبيق ليتم تجميعها.

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