Angularjs bootstrap
สไตล์ชีทที่ต้องการของ AngularJS คือ Twitter Bootstrap ซึ่งเป็นกรอบส่วนหน้ายอดนิยมมากที่สุดในปัจจุบัน
ตรวจสอบการสอน bootstrap
รองเท้าบู๊ต
คุณสามารถเพิ่ม twitter bootstrap ลงในแอปพลิเคชัน 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 Directive และคลาส bootstrap
รหัส HTML
<! doctype html> <html> <head> <meta charset = "utf-8"> <link rel = "stylesheet" href = "// apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.cs src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body ng-app = "myapp" ng-controller = "userctrl"> <div> <th> ชื่อ </th> <th> ล่าสุด </th> </tr> </thead> <tbody> <tr ng-repeat = "ผู้ใช้ในผู้ใช้"> <td> <button ng-click = "edituser (user.id)"> <span> user.lname}} </td> </tr> </tbody> </table> <hr> <button ng-click = "edituser ('ใหม่')"> <span> </span> สร้างผู้ใช้ใหม่ </button> <hr> <h3 ng-show = "แก้ไข"> สร้างผู้ใช้ใหม่: </h3 <div> <label> ชื่อ: </label> <div> <อินพุต type = "text" ng-model = "fname" ng-disabled = "! แก้ไข" placeHolder = "name"> </div> </div> <divel </div> <div> <dlable> รหัสผ่าน: </label> <div> <อินพุตประเภท = "รหัสผ่าน" ng-model = "passw1" placeholder = "รหัสผ่าน"> </div> </div> <darm> <label> รหัสผ่านซ้ำ: </label> <div> ng-disabled = "ข้อผิดพลาด || ไม่สมบูรณ์"> <span> </span> แก้ไข </button> </div> <script src = "myusers.js"> </script> </body> </html>ผลการทำงาน:
การวิเคราะห์คำสั่ง
| คำสั่ง Angularjs | อธิบาย |
|---|---|
| <html ng-app | กำหนดแอปพลิเคชันสำหรับองค์ประกอบ <html> (ไม่มีชื่อ) |
| <body ng-controller | กำหนดคอนโทรลเลอร์สำหรับองค์ประกอบ <body> |
| <tr ng-repeat | ลูปอาร์เรย์ของวัตถุผู้ใช้วัตถุผู้ใช้แต่ละรายการจะถูกวางไว้ในองค์ประกอบ <tr> |
| <ปุ่ม ng-click | เรียกฟังก์ชัน edituser () เมื่อคลิกองค์ประกอบ <button> |
| <h3 ng-show | หากแก้ไข = จริงแสดงองค์ประกอบ <h3> |
| <h3 ng-hide | หากแก้ไข = True ซ่อนองค์ประกอบ <h3> |
| <อินพุต ng-model | ผูก <อินพุต> องค์ประกอบสำหรับแอปพลิเคชัน |
| <ปุ่ม ng-disabled | หากเกิดข้อผิดพลาดหรือ ncomplete = True ปิดการใช้งานองค์ประกอบ <button> |
การวิเคราะห์ชั้นเรียน bootstrap
| องค์ประกอบ | คลาส bootstrap | คำนิยาม |
|---|---|---|
| <div> | คอนเทนเนอร์ | คอนเทนเนอร์เนื้อหา |
| <table> | โต๊ะ | แผ่น |
| <table> | ลายตาราง | ตารางที่มีพื้นหลังลาย |
| <ปุ่ม> | btn | ปุ่ม |
| <ปุ่ม> | BTN-Success | ปุ่มความสำเร็จ |
| <span> | มดลูก | ไอคอนร่ายมนตร์ |
| <span> | เพนซ์ | ไอคอนดินสอ |
| <span> | ผู้ใช้กลีฟิคอน | ไอคอนผู้ใช้ |
| <span> | การเก็บกล่อม | บันทึกไอคอน |
| <form> | รูปแบบ | ตารางระดับ |
| <div> | กลุ่ม | กลุ่ม |
| <label> | ฉลากควบคุม | แท็กคอนโทรลเลอร์ |
| <label> | COL-SM-2 | ครอบคลุม 2 คอลัมน์ |
| <div> | COL-SM-10 | ครอบคลุม 10 คอลัมน์ |
รหัส JavaScript
myusers.js
Angular.module ('myapp', []). คอนโทรลเลอร์ ('userCtrl', ฟังก์ชั่น ($ scope) {$ scope.fname = ''; $ scope.lname = ''; $ scope.passw1 = '' $ scope.passw2 = '' fname: 'kim', lname: "pim"}, {id: 3, fname: 'sal', lname: "smith"}, {id: 4, fname: 'jack', lname: "Jones"}, {id: 5, fname: 'John', lname: }]; $ scope.edit = true; $ scope.error = false; $ scope.incomplete = false; $ scope.edituser = function (id) {if (id == 'ใหม่') {$ scope.edit = true; $ scope.fname = $ scope.users [id-1] .fname; {$ scope.test ();}); $ scope. $ watch ('fname', function () {$ scope.test ();}); $ scope. $ watch ('lname', ฟังก์ชั่น () {$ scope.test ();};};}; {ถ้า ($ 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 | ตั้งค่าเป็นจริงเมื่อผู้ใช้คลิกเพื่อสร้างผู้ใช้ |
| $ scope.error | หาก passw1 ไม่เท่ากับ passw2 ถูกตั้งค่าเป็นจริง |
| $ SCOPE.ONCINGTE | หากแต่ละฟิลด์ว่างเปล่า (ความยาว = 0) ถูกตั้งค่าเป็นจริง |
| $ scope.edituser | ตั้งค่าตัวแปรโมเดล |
| $ scope.watch | ตัวแปรโมเดลมอนิเตอร์ |
| $ scope.test | ตรวจสอบข้อผิดพลาดและความสมบูรณ์ของตัวแปรโมเดล |
ข้างต้นเป็นการรวบรวมข้อมูล bootstrap AngularJS เราจะเพิ่มในภายหลัง ฉันหวังว่านักเรียนที่สามารถช่วยโปรแกรม AngularJS