AngularJS التمهيد

السابق: AngularJS التحقق من صحة المدخلات

التالي: AngularJS يحتوي على

AngularJS ورقة الأنماط المفضلة هي تويتر التمهيد، التمهيد تويتر هو الإطار الأمامية الأكثر شعبية.

انظر التمهيد البرنامج التعليمي .

التمهيد

يمكنك الانضمام إلى تويتر التمهيد تطبيق AngularJS الخاص بك، يمكنك إضافة عنصر البرمجية التالية في حياتك <رئيس>:

<وصلة يختلط = "أنماط" أ href = "// maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

إذا كان الموقع في البلاد، فمن المستحسن استخدام بايدو مستودع ثابت التمهيد، التعليمة البرمجية التالية:

ما يلي هو HTML سبيل المثال الكامل باستخدام AngularJS والتعليم من الدرجة التمهيد.

كود HTML

<! DOCTYPE HTML>
<HTML>
<وصلة يختلط = "أنماط" أ href = "http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<سيناريو SRC = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
<الجسم نانوغرام التطبيق = "اسم التطبيق " نانوغرام تحكم = "userCtrl">

<فئة الدرجة = "حاوية">

<H3> الأعضاء </ H3>

<الجدول الطبقة = "الجدول table- مخطط">
<THEAD> <tr>
<ث> تحرير </ تشرين>
<ث> الاسم </ تشرين >
<ث> اسم العائلة </ تشرين >
</ tr> </ THEAD>
<TBODY> <TR-نانوغرام تكرار = "المستخدم في عدد مستخدمي">
<td>
<الطبقة زر = "BTN" نانوغرام -click = "editUser (user.id)">
<سبان الطبقة = "glyphicon glyphicon- قلم رصاص"> </ SPAN> & نبسب؛ & نبسب؛ تحرير
</ زر>
</ td>
<td> {{user.fName}} </ td>
<td> {{user.lName}} </ td>
</ tr> </ TBODY>
</ الجدول>

<hr>
<الطبقة زر = "BTN btn- نجاح" نانوغرام مزدوجا فوق = "editUser ( 'الجديد')">
<سبان الطبقة = "glyphicon glyphicon- المستخدم"> </ SPAN> إنشاء مستخدم جديد
</ زر>
<hr>

<H3 نانوغرام تظهر = "تحرير "> إنشاء مستخدم جديد: </ H3>
<H3 نانوغرام إخفاء = "تحرير "> تحرير المستخدم: </ H3>

<فئة النموذج = "شكل أفقي ">
<فئة الدرجة = "شكل فريق ">
<الطبقة تسمية = "عمود-ن خ -2 ضبط تسمية"> الاسم الأول: </ التسمية>
<div الطبقة = "عمود-خ -10">
<إدخال نوع = "نص" نانوغرام -model = "fName"، نانوغرام تعطيل = "! تحرير" نائبا = "الاسم الأول">
</ div>
</ div>
<فئة الدرجة = "شكل فريق ">
<تسمية الطبقة = "عمود-ن خ -2 ضبط تسمية"> اسم العائلة: </ التسمية>
<div الطبقة = "عمود-خ -10">
<إدخال نوع = "نص" نانوغرام -model = "lName"، نانوغرام تعطيل = "! تحرير" نائبا = "اسم العائلة">
</ div>
</ div>
<فئة الدرجة = "شكل فريق ">
<تسمية الطبقة = "عمود-ن خ -2 ضبط تسمية"> كلمة السر: </ التسمية>
<div الطبقة = "عمود-خ -10">
<إدخال نوع = "كلمة المرور" نانوغرام -model = "passw1" نائبا = "كلمة المرور">
</ div>
</ div>
<فئة الدرجة = "شكل فريق ">
<تسمية الطبقة = "عمود-ن خ -2 ضبط تسمية"> كرر: </ التسمية>
<div الطبقة = "عمود-خ -10">
<إدخال نوع = "كلمة المرور" نانوغرام -model = "passw2" نائبا = "كرر كلمة">
</ div>
</ div>
</ النموذج>

<hr>
<الطبقة زر = "BTN btn- نجاح" = "خطأ || غير مكتمل"، نانوغرام تعطيل>
<سبان الطبقة = "glyphicon glyphicon- حفظ"> </ SPAN> حفظ التغييرات
</ زر>
</ div>

<سيناريو SRC = "myUsers.js"> </ script>
</ الجسم>
</ HTML>

محاولة »

إعراب القيادة

AngularJS توجيهات	وصف
<الاكواد نانوغرام التطبيق	ل<HTML> عنصر يحدد تطبيق (لم يسمها)
<الجسم نانوغرام تحكم	ل<body> عنصر يحدد وحدة تحكم
<tr نانوغرام تكرار	المستخدمين دورة مجموعة من الأشياء، كل كائن المستخدم في عنصر <tr>.
<زر نانوغرام النقر	عندما يتم استدعاء الدالة editUser فوق <زر> العنصر عندما ()
<H3 نانوغرام تظهر	إذا قمت بتحرير = عرض حقيقي <H3> العنصر
<H3 نانوغرام إخفاء	إذا قمت بتحرير = الحقيقية مخبأة <H3> العنصر
<الإدخال نانوغرام نموذج	ملزمة <إدخال> عنصر لتطبيق
<زر نانوغرام المعوقين	في حالة حدوث خطأ أو ncomplete = صحيح تعطيل <زر> العنصر

الطبقة التمهيد من التحليل

العنصر	الطبقة التمهيد	التعاريف
<div>	حاوية	محتويات الحاوية
<جدول>	طاولة	طاولة
<جدول>	شريطية الجدول	خلفية مخطط الجدول
<زر>	BTN	زر
<زر>	BTN-نجاح	زر النجاح
<سبان>	glyphicon	شارة الرتبة
<سبان>	glyphicon قلم رصاص	أيقونة قلم رصاص
<سبان>	glyphicon المستخدم	رمز المستخدم
<سبان>	glyphicon الحفظ	حفظ رمز
<النموذج>	شكل أفقي	الجدول الأفقي
<div>	شكل مجموعة	المجموعة شكل
<تسمية>	ضبط التسمية	تحكم الكلمات
<تسمية>	العقيد-SM-2	أكثر من
<div>	العقيد SM-10	أكثر من 10

شفرة جافا سكريبت

myUsers.js

angular.module ( 'اسم التطبيق "، [] ). تحكم (' userCtrl، وظيفة ($ نطاق) {
$ scope.fName = ''؛
$ scope.lName = ''؛
$ scope.passw1 = ''؛
$ scope.passw2 = ''؛
$ Scope.users = [
{معرف: 1، fName: " هيج"، lName: "Pege"}،
{معرف: 2، fName: " كيم"، lName: "بيم"}،
{معرف: 3، fName: " سال"، lName: "سميث"}،
{معرف: 4، fName: " جاك"، lName: "جونز"}،
{معرف: 5، fName: " جون"، lName: "الفلاني"}،
{معرف: 6، fName: " بيتر"، lName: "بان"}
].
$ scope.edit = صحيح.
$ scope.error = كاذبة؛
$ scope.incomplete = كاذبة؛

$ scope.editUser = وظيفة (معرف) {
إذا (معرف == 'الجديد') {
$ scope.edit = صحيح.
$ scope.incomplete = صحيح.
$ scope.fName = ''؛
$ scope.lName = ''؛
} {شيء آخر
$ scope.edit = كاذبة؛
$ Scope.fName = $ scope.users [معرف 1] .fName.
$ Scope.lName = $ scope.users [معرف 1] .lName.
}
}؛

. $ نطاق $ ساعة ( 'passw1 ، وظيفة () {$ scope.test ()؛})؛
. $ نطاق $ ساعة ( 'passw2 ، وظيفة () {$ scope.test ()؛})؛
. $ نطاق $ ساعة ( 'fName ، وظيفة () {$ scope.test ()؛})؛
. $ نطاق $ ساعة ( 'lName ، وظيفة () {$ scope.test ()؛})؛

$ scope.test = وظيفة () {
إذا (scope.passw1 $! == $ scope.passw2 ) {
$ scope.error = صحيح.
} {شيء آخر
$ scope.error = كاذبة؛
}
$ scope.incomplete = كاذبة؛
إذا ($ scope.edit && (! $ scope.fName.length ||
! $ Scope.lName.length ||
! $ Scope.passw1.length ||! $ Scope.passw2.length)) {
$ scope.incomplete = صحيح.
}
}؛

})؛

تحليل شفرة جافا سكريبت

خصائص نطاق	استعمال
$ Scope.fName	متغيرات نموذج (اسم المستخدم)
$ Scope.lName	متغيرات نموذج (اسم المستخدم)
$ Scope.passw1	متغيرات نموذج (المستخدم كلمة السر 1)
$ Scope.passw2	متغيرات نموذج (المستخدم كلمة السر 2)
$ Scope.users	متغيرات نموذج (المصفوفات من المستخدمين)
$ Scope.edit	ومن المقرر أن يصدق عندما ينقر المستخدم لإنشاء مستخدم.
$ Scope.error	إذا وضع passw1 لا تساوي passw2 إلى true
$ Scope.incomplete	ومن المقرر إذا كل حقل فارغ (طول = 0) إلى true
$ Scope.editUser	تحديد المتغيرات في نموذج
$ Scope.watch	متغيرات نموذج رصد
$ Scope.test	أخطاء التحقق من الصحة، واكتمال متغيرات النموذج