Latest web development tutorials

AngularJS Bootstrap

AngularJS แผ่นรูปแบบที่ต้องการคือเงินทุน Twitter, Twitter Bootstrap เป็นที่นิยมที่สุดกรอบ front-end

ดู Bootstrap กวดวิชา

บูต

คุณสามารถเข้าร่วมการประยุกต์ใช้เงินทุน Twitter AngularJS ของคุณคุณสามารถเพิ่มองค์ประกอบรหัสต่อไปนี้ใน <head> ของคุณ:

<link rel = "สไตล์ชีต" href = "// maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

หากเว็บไซต์ในประเทศก็จะแนะนำให้ใช้ Baidu พื้นที่เก็บข้อมูลแบบคงที่เงินทุน, รหัสต่อไปนี้:

<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">

ต่อไปนี้เป็นตัวอย่างที่สมบูรณ์แบบ HTML โดยใช้ AngularJS และการสอนระดับเงินทุน

โค้ด HTML

<! DOCTYPE html>
<html>
<link rel = "สไตล์ชีต" href = "http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
<body NG-App = "MyApp " NG-ควบคุม = "userCtrl">

<ระดับ Div = "ภาชนะ">

<h3> ผู้ใช้ </ h3>

<ตารางเรียน = "ตาราง table- ลาย">
<thead> <tr>
<Th> แก้ไข </ TH>
<Th> ชื่อ </ TH >
<Th> นามสกุล </ TH >
</ tr> </ thead>
<TBODY> <TR NG-ซ้ำ = "ของผู้ใช้ในผู้ใช้">
<td>
<ระดับปุ่ม = "BTN" NG -click = "editUser (user.id)">
<span class = "glyphicon glyphicon- ดินสอ"> </ span> & nbsp; & nbsp; แก้ไข
</ ปุ่ม>
</ td>
<td> {{user.fName}} </ td>
<td> {{user.lName}} </ td>
</ tr> </ tbody>
</ table>

<hr>
<ระดับปุ่ม = "btn- btn ความสำเร็จ" NG-คลิก = "editUser ( 'ใหม่')">
<span class = "glyphicon glyphicon- ผู้ใช้"> </ span> สร้างผู้ใช้ใหม่
</ ปุ่ม>
<hr>

<H3 NG-แสดง = "แก้ไข "> สร้างผู้ใช้ใหม่: </ h3>
<H3 NG-ซ่อน = "แก้ไข "> แก้ไขผู้ใช้: </ h3>

<แบบฟอร์มคลาส = "รูปแบบแนวนอน ">
<ระดับ Div = "รูปแบบกลุ่ม ">
<ระดับฉลาก = "Col-SM -2 ควบคุมฉลาก"> ชื่อจริง: </ label>
<div class = "Col-SM -10">
<ประเภทขาเข้า = "text" NG -model = "fName" NG-พิการ = "! แก้ไข" ยึด = "ชื่อจริง">
</ div>
</ div>
<ระดับ Div = "รูปแบบกลุ่ม ">
<label class = "Col-SM -2 ควบคุมฉลาก"> นามสกุล: </ label>
<div class = "Col-SM -10">
<ประเภทขาเข้า = "text" NG -model = "lname" NG-พิการ = "! แก้ไข" ยึด = "นามสกุล">
</ div>
</ div>
<ระดับ Div = "รูปแบบกลุ่ม ">
<label class = "Col-SM -2 ควบคุมฉลาก"> รหัสผ่าน: </ label>
<div class = "Col-SM -10">
<input type = "รหัสผ่าน" NG -model = "passw1" ยึด = "รหัสผ่าน">
</ div>
</ div>
<ระดับ Div = "รูปแบบกลุ่ม ">
<label class = "Col-SM -2 ควบคุมฉลาก"> ทำซ้ำ: </ label>
<div class = "Col-SM -10">
<input type = "รหัสผ่าน" NG -model = "passw2" ยึด = "ทำซ้ำรหัสผ่าน">
</ div>
</ div>
</ form>

<hr>
<ระดับปุ่ม = "btn btn- ความสำเร็จ" NG-พิการ = "ข้อผิดพลาดที่ไม่สมบูรณ์ ||">
<span class = "glyphicon glyphicon- บันทึก"> </ span> บันทึกการเปลี่ยนแปลง
</ ปุ่ม>
</ div>

<script src = "myUsers.js"> </ script>
</ body>
</ html>

ลอง»

แยกคำสั่ง

AngularJS สั่ง ลักษณะ
<html NG-App สำหรับ <html> องค์ประกอบที่กำหนดโปรแกรมประยุกต์ (ไม่มีชื่อ)
<body NG-ควบคุม สำหรับ <body> องค์ประกอบที่กำหนดควบคุม
<Tr NG-ซ้ำ ผู้ใช้วงจรอาร์เรย์ของวัตถุแต่ละวัตถุผู้ใช้ใน <tr> องค์ประกอบ
<ปุ่ม NG-คลิก เมื่อฟังก์ชั่นที่เรียกว่า editUser คลิก <ปุ่ม> องค์ประกอบเมื่อ ()
<H3 NG-แสดง ถ้าคุณแก้ไข = ดิสเพลย์จริง <h3> องค์ประกอบ
<H3 NG-ซ่อน ถ้าคุณแก้ไข = true ซ่อน <h3> องค์ประกอบ
<input NG-รุ่น ผูก <input> สำหรับการประยุกต์ใช้
<ปุ่ม NG-คนพิการ หากเกิดข้อผิดพลาดหรือ ncomplete = true ปิดการใช้งาน <ปุ่ม> องค์ประกอบ

ระดับเงินทุนของการวิเคราะห์

ธาตุ ระดับเงินทุน คำจำกัดความ
<div> ภาชนะ เนื้อหาของภาชนะ
<table> ตาราง ตาราง
<table> ตารางลาย พื้นหลังลายตาราง
<ปุ่ม> BTN ปุ่มกด
<ปุ่ม> BTN ความสำเร็จ ปุ่มที่ประสบความสำเร็จ
<span> glyphicon บั้งนายสิบ
<span> glyphicon ดินสอ ไอคอนดินสอ
<span> glyphicon ผู้ใช้ ไอคอนผู้ใช้
<span> glyphicon บันทึก ไอคอนบันทึก
<form> รูปแบบแนวนอน ตารางตามแนวนอน
<div> รูปแบบกลุ่ม กลุ่มแบบฟอร์ม
<label> ควบคุมฉลาก ควบคุมแท็ก
<label> Col-SM-2 กว่าสอง
<div> Col-SM-10 กว่า 10

โค้ด JavaScript

myUsers.js

angular.module ( 'MyApp' [] ). Controller ( 'userCtrl' ฟังก์ชั่น ($ ขอบเขต) {
$ scope.fName = '';
$ scope.lName = '';
$ scope.passw1 = '';
$ scope.passw2 = '';
$ Scope.users = [
{ID: 1, fName: ' Hege' lname: "Pege"},
{ID: 2, fName: ' คิม' lname: "พิม"},
{ID: 3, fName: ' พะยอม' lname: "สมิ ธ "},
{ID: 4, fName: ' แจ็ค' lname: "โจนส์"},
{ID: 5 fName: ' จอห์น' lname: "กวาง"},
{ID: 6 fName: ' ปีเตอร์' lname: "แพน"}
];
$ scope.edit = true;
$ scope.error = false;
$ scope.incomplete = false;

$ scope.editUser = ฟังก์ชั่น (ID) {
ถ้า (Id == 'ใหม่') {
$ scope.edit = true;
$ scope.incomplete = true;
$ scope.fName = '';
$ scope.lName = '';
} else {
$ scope.edit = false;
$ = $ Scope.fName scope.users [ID-1] .fName;
$ = $ Scope.lName scope.users [ID-1] .lName;
}
};

. $ $ ขอบเขต Watch ( 'passw1 ' ฟังก์ชั่น () {$ scope.test ();});
. $ $ ขอบเขต Watch ( 'passw2 ' ฟังก์ชั่น () {$ scope.test ();});
. $ $ ขอบเขต Watch ( 'fName ' ฟังก์ชั่น () {$ scope.test ();});
. $ $ ขอบเขต Watch ( 'lname ' ฟังก์ชั่น () {$ scope.test ();});

$ scope.test = function () {
ถ้า ($ scope.passw1! == $ scope.passw2 ) {
$ scope.error = true;
} else {
$ scope.error = false;
}
$ scope.incomplete = false;
ถ้า ($ scope.edit && (! $ scope.fName.length ||
! $ Scope.lName.length ||
! $ Scope.passw1.length ||! $ Scope.passw2.length)) {
$ scope.incomplete = true;
}
};

});

การวิเคราะห์รหัส JavaScript

คุณสมบัติขอบเขต ใช้
$ Scope.fName ตัวแปรรุ่น (username)
$ Scope.lName ตัวแปรรุ่น (ชื่อผู้ใช้)
$ Scope.passw1 ตัวแปร Model (รหัสผ่านผู้ใช้ 1)
$ Scope.passw2 ตัวแปร Model (รหัสผ่านผู้ใช้ 2)
$ Scope.users ตัวแปร Model (อาร์เรย์ของผู้ใช้)
$ Scope.edit มันถูกตั้งค่าเป็นจริงเมื่อผู้ใช้คลิกเพื่อสร้างผู้ใช้
$ Scope.error หาก passw1 ไม่เท่ากับ passw2 ตั้งค่าเป็นจริง
$ Scope.incomplete ถ้าแต่ละเขตเป็นที่ว่างเปล่า (ความยาว = 0) กำหนดเป็นจริง
$ Scope.editUser รูปแบบการตั้งค่าตัวแปร
$ Scope.watch ตัวแปรรูปแบบการตรวจสอบ
$ Scope.test ข้อผิดพลาดของการตรวจสอบและครบถ้วนของตัวแปรรุ่น