AngularJS bootstrap
ورقة الأنماط المفضلة لـ AngularJS هي Twitter Bootstrap ، وهو الإطار الأمامي الأكثر شعبية في الوقت الحاضر.
تحقق من البرنامج التعليمي bootstrap.
bootstrap
يمكنك إضافة bootstrap Twitter إلى تطبيق AngularJS الخاص بك ، ويمكنك إضافة الكود التالي إلى عنصر <head> الخاص بك:
<link Rel = "STYLESHEET" href = "// maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
إذا كان الموقع في البلاد ، فمن المستحسن استخدام Bootstrap من مكتبة الموارد الثابتة في Baidu ، فإن الكود كما يلي:
<Link Rel = "STYLESHEET" href = "// apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
فيما يلي مثيل HTML كامل باستخدام توجيه AngularJS وفئة bootstrap.
رمز HTML
<! doctype html> <html> <head> <meta charset = "utf-8"> <link rel = "stylesheep src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body ng-app = "myapp" ng-controller = "userctrl"> <liv> <h3> المستخدمين <Th> name </h> <th> Last </h> </tr> </thead> <tbody> <tr ng-repeat = "user in user user"> <td> <button ng click = "edituser (user.id)"> </span> edit </td> </td> <td> user.lname}} </td> </tbody> </tbody> </table> <hr> <button ng click = "edituser ('new')"> <span> </span> إنشاء مستخدم جديد </button> <hr> <h3 ng-show = "edit"> إنشاء مستخدم جديد: </h3> <div> <blabe> الاسم: </sable> <viv> <input type = "text" ng-model = "fname" ng-disabled = "! edit" placeholder = "name"> </viv> </viv> <viv> <sial> الموضوع: </label> <div> <input type = "text" ng-model = lname " </viv> <viv> <label> كلمة المرور: </label> <viv> <inputive type = "password" ng-model = "passw1" placeholder = "password"> </viv> </viv> <viv> <label> تكرار كلمة المرور: </label> <div> <suppove type = "password" ng-model = "passW2" ng-disabled = "error || غير مكتمل"> <span> </span> تعديل </button> </div> <script src = "myusers.js"> </script> </body> </html>نتائج التشغيل:
تحليل التعليمات
| التوجيه AngularJS | يصف |
|---|---|
| <html ng-app | حدد طلبًا لعنصر <html> (لم يكشف عن اسمه) |
| <body ng-controller | حدد وحدة تحكم لعنصر <Body> |
| <tr ng-repeat | حلقات مجموعة كائنات المستخدمين ، يتم وضع كل كائن مستخدم في عنصر <TR>. |
| <button ng click | اتصل بالوظيفة edituser () عند النقر فوق عنصر <utnon> |
| <H3 NG-Show | إذا تم تحرير = true يعرض عنصر <h3> |
| <h3 ng-hide | إذا تم تحرير = True يخفي العنصر <h3> |
| <الإدخال نانوغرام النموذج | ربط <pection> عناصر التطبيق |
| <button ng معتمد | في حالة حدوث خطأ أو ncomplete = true يعطل العنصر <NUNTY> |
تحليل فئة bootstrap
| عنصر | فئة bootstrap | تعريف |
|---|---|---|
| <viv> | حاوية | حاوية المحتوى |
| <griding> | طاولة | ملزمة |
| <griding> | مخطوطة الجدول | جدول مع خلفية مخططة |
| <NUNTER> | BTN | زر |
| <NUNTER> | BTN-SUCCESS | زر النجاح |
| <span> | الغليفيكون | أيقونة Glyph |
| <span> | Glyphicon-Pencil | أيقونة قلم رصاص |
| <span> | مستخدم غليفيكون | أيقونة المستخدم |
| <span> | غليفيكون-ساف | حفظ أيقونة |
| <Porm> | شكل أفقي | جدول المستوى |
| <viv> | مجموعة الشكل | مجموعة النموذج |
| <blabel> | لعلامة السيطرة | علامات تحكم |
| <blabel> | Col-SM-2 | تمتد 2 أعمدة |
| <viv> | Col-SM-10 | تمتد 10 أعمدة |
رمز JavaScript
myusers.js
Angular.Module ('myapp' ، []). وحدة التحكم ('USERCTRL' ، الدالة ($ scope) {$ scope.fname = '' ' fname: 'kim' ، lname: "pim"} ، {id: 3 ، fname: 'sal' ، lname: "smith"} ، {id: 4 ، fname: 'jack' ، lname: "Jones"} ، {id: 5 ، fname: 'John' ، lname: "doe" ، }] $ scope.fname = $ scope.users [id-1] .fname ؛ {$ scope.test () ؛}) ؛ $ scope. $ watch ('fname' ، function () {$ scope.test () ؛}) ؛ $ scope. $ watch ('lname' ، function () {$ scope.test () ؛} ؛ {if ($ scope.passw1! == $ scope.passw2) {$ scope.error = true ؛ ! $ scope.passw2.length)) {$ scope.incomplete = true ؛رمز JavaScript تحليل
| خصائص النطاق | يستخدم |
|---|---|
| $ scope.fname | متغير النموذج (اسم المستخدم) |
| $ scope.lname | متغيرات النموذج (الاسم الأخير للمستخدم) |
| $ scope.passw1 | متغير النموذج (كلمة مرور المستخدم 1) |
| $ scope.passw2 | متغيرات النموذج (كلمة مرور المستخدم 2) |
| $ scope.users | متغيرات النموذج (صفيف المستخدم) |
| $ scope.edit | اضبط إلى TRUE عندما ينقر المستخدم على إنشاء مستخدم. |
| $ scope.error | إذا لم يتم تعيين PASSW1 على مساواة passw2 |
| $ scope.incomplete | إذا كان كل حقل فارغًا (طول = 0) |
| $ scope.edituser | تعيين متغيرات النموذج |
| $ scope.watch | مراقبة متغيرات النموذج |
| $ scope.test | تحقق من الأخطاء وسلامة متغيرات النموذج |
ما سبق هو مجموعة من معلومات bootstrap AngularJS. سوف نستمر في إضافته لاحقًا. آمل أن يكون الطلاب الذين يمكنهم المساعدة في برنامج AngularJS.