AngularJS ความรู้พื้นฐานและตัวอย่างสรุป

AngularJS เป็นกรอบการพัฒนา MVC ระดับสูงระดับไฮเอนด์ที่พัฒนาโดย Google

เว็บไซต์ทางการ AngularJS: https://angularjs.org/ เว็บไซต์ทางการมีการสาธิตและอาจจำเป็นต้องเข้าถึง FQ

Angularjs ชุมชนจีน: http://www.angularjs.cn/ เหมาะสำหรับผู้เริ่มต้น

ไฟล์อ้างอิง: https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js

หมายเหตุเมื่อใช้ Angular

อ้างถึงไลบรารี AngularJS: https: //github.com/litengdesign/angularjstest/blob/master/angular-1.0.1 .... คุณสามารถดาวน์โหลดได้ใน GitHub ในตัวอย่างในส่วนนี้

คุณต้องเพิ่ม ng-app = "appname" ในพื้นที่ที่คุณใช้หรือโดยตรง NG-APP (ทั่วโลก)

ตั้งค่าคอนโทรลเลอร์ ng-controller = "ctrl"

โปรดทราบจุดต่อไปนี้เมื่อทดสอบตัวอย่าง

คุณต้องแนะนำรหัส AngularJS ก่อนหัว ผู้เขียนใช้ Angular-1.0.1.min.js โปรดให้ความสนใจกับความแตกต่างของเวอร์ชัน

ตัวอย่างเล็ก ๆ ทั้งหมดทำงานในพื้นที่ต่อไปนี้อย่าลืมเพิ่ม NG-APP ในพื้นที่ที่ใช้งานอยู่

ต่อไปนี้เป็นกรณีเล็ก ๆ เพื่อแสดงคำแนะนำทั่วไปและการใช้ค่าเริ่มต้นของ AngularJS

Hello World Program (การผูกข้อมูลคู่)

ใช้ ng-model = {{name}} เพื่อผูกข้อมูล

การคัดลอกรหัสมีดังนี้:

<label for = "name"> ชื่อ: </lable>

<input type = "text" ng-model = "name" id = "name"/>>>

<Hr>

สวัสดี: {{ชื่อ || 'Liteng'}}

http://2.liteng.sinaapp.com/angularjstest/helloangularjs.html

กรณีเล็ก ๆ ของการใช้งานที่มีผลผูกพัน

การคัดลอกรหัสมีดังนี้:

<div>

ราคาต่อหน่วย: <อินพุต type = "number" min = 0 ng-model = "price" ng-init = "price = 299">

ปริมาณ: <อินพุต type = "number" min = 0 ng-model = "ปริมาณ" ng-init = "ปริมาณ = 1">

<br>

ราคารวม: {{(ราคา) * (ปริมาณ)}}

<Dt>

<Dl> หมายเหตุ: </dl>

<dd> อินพุตที่เกี่ยวข้องกับ html5: <a href = "http://www.w3school.com.cn/html5/att_input_type.asp"> http://www.w3school.com.cn/html5/att_input_type.aspe.aspe.

<dd> ng-init: ตั้งค่าเริ่มต้น </dd>

</dt>

</div>

http://2.liteng.sinaapp.com/angularjstest/event-bind.html

Ng-init: ค่าแอตทริบิวต์สามารถระบุได้โดยค่าเริ่มต้น

การคัดลอกรหัสมีดังนี้:

<p ng-init = "value = 'hello world'"> {{value}} </p>

http://2.liteng.sinaapp.com/angularjstest/ng-init.html

NG-Repeat: ใช้ซ้ำข้อมูลคล้ายกับ I สำหรับข้อมูลใน JS

การคัดลอกรหัสมีดังนี้:

<div ng-init = "friends = [{ชื่อ: 'jhon', อายุ: 25}, {ชื่อ: 'Mary', อายุ: 28}]"> </div>

<p> ฉันมีเพื่อน {{friends.length}} เพื่อน พวกเขาคือ </p>

<ul>

<li ng-repeat = "เพื่อนในเพื่อน">

[{{$ index+1}}]: {{friend.name}} อายุคือ: {{friend.age}}

</li>

</ul>

http://2.liteng.sinaapp.com/angularjstest/ng-repeat.html

NG-CLICK: เหตุการณ์คลิกที่ DOM

การคัดลอกรหัสมีดังนี้:

<div ng-controller = "ctrl">

<button ng-dblclick = 'showmsg ()'> {{a}} </button>

</div>

<script>

ฟังก์ชั่น ctrl ($ scope) {

$ scope.a = 'สวัสดี';

$ scope.showmsg = function () {

$ scope.a = 'โลก';

-

-

</script>

http://2.liteng.sinaapp.com/angularjstest/ng-click.html

ng-show: ตั้งค่าองค์ประกอบการแสดงผล

หมายเหตุ: ng-show = "! xx": เพิ่มก่อนค่าแอตทริบิวต์! หมายความว่ามันจะแสดงให้แน่ใจว่าจะแสดงถ้าไม่ได้เพิ่ม! ไม่แสดงหากไม่แน่ใจ

การคัดลอกรหัสมีดังนี้:

<div ng-show = "! show">

ng-show = "! show"

</div>

<div ng-show = "show">

ng-show = "show"

</div>

http://2.liteng.sinaapp.com/angularjstest/ng-show.html

ng-hide: ตั้งค่าการซ่อนองค์ประกอบ

การคัดลอกรหัสมีดังนี้:

<div ng-hid = "aaa">

ng-hide = "AAA"

</div>

<div ng-hhid = "! aaa">

ng-show = "! aaa"

</div>

http://2.liteng.sinaapp.com/angularjstest/ng-hide.html

ใช้ NG-Show เพื่อสร้างเอฟเฟกต์สลับ

การคัดลอกรหัสมีดังนี้:

<H2> สลับ </h2>

<a href ng-click = "showlog =! showlog"> โลโก้แสดง </a>

<div ng-show = "showlog">

<img ng-src = "http://liteng.org/sites/default/files/logo.png">

</div>

http://2.liteng.sinaapp.com/angularjstest/ng-toggle.html

NG-Style: คล้ายกับสไตล์เริ่มต้น

โปรดทราบรูปแบบการเขียนที่นี่: สตริงต้องรวมอยู่ในเครื่องหมายคำพูด

การคัดลอกรหัสมีดังนี้:

<div ng-style = "{width: 100+'px', ความสูง: 200+'px', backgroundColor: 'สีแดง'}">

กล่อง

</div>

http://2.liteng.sinaapp.com/angularjstest/ng-style.html

ตัวกรอง: ฟิลด์ตัวกรอง

การคัดลอกรหัสมีดังนี้:

<div> {{9999 | หมายเลข}} </div> <!-9,999->

<div> {{9999+1 | หมายเลข: 2}} </div> <!-10,000.00->

<div> {{9*9 | สกุลเงิน}} </div> <!-$ 81.00->

<div> {{'Hello World' | uppercase}} </div> <!-Hello World->

http://2.liteng.sinaapp.com/angularjstest/filter.html

NG-Template: สามารถโหลดเทมเพลตได้

การคัดลอกรหัสมีดังนี้:

<div ng-include = "'tpl.html'"> </div>

tpl.html

การคัดลอกรหัสมีดังนี้:

<H1> สวัสดี </h1>

http://2.liteng.sinaapp.com/angularjstest/show-tpl.html

$ http: วิธีที่คล้ายกับ Ajax ทำงานได้ดีมาก

การคัดลอกรหัสมีดังนี้:

<div ng-controller = "testctrl">

<H2> http Request-method 1 </h2>

<ul>

<li ng-repeat = "x ในชื่อ">

{{x.name}}+{{x.country}}

</li>

</ul>

</div>

<H2> วิธีการ 2 </h2>

<div ng-controller = "testCtrl2">

<ul>

<li ng-repeat = "y in info">

{{y.aid}}+{{y.title}}

</li>

</ul>

</div>

<script>

// วิธี 1

var testCtrl = function ($ scope, $ http) {

var p = $ http ({

วิธี: 'รับ',

url: 'json/date.json'

-

P.Success (ฟังก์ชั่น (การตอบสนอง, สถานะ, ส่วนหัว, config) {

$ scope.names = การตอบสนอง;

-

P.Error (ฟังก์ชั่น (สถานะ) {

console.log (สถานะ);

-

-

// วิธี 2

ฟังก์ชั่น testCtrl2 ($ scope, $ http) {

$ http.get ('json/yiqi_article.json'). ความสำเร็จ (ฟังก์ชั่น (การตอบสนอง) {

$ scope.info = การตอบสนอง;

-

-

</script>

http://2.liteng.sinaapp.com/angularjstest/ajax.html

รหัสทั้งหมดข้างต้น: https://github.com/litengdesign/angularjstest

การสาธิตที่ใช้งาน: http://2.liteng.sinaapp.com/angularjstest/index.html

สำหรับเราเตอร์และคำสั่งของ AngularJs ฉันจะนำมันออกไปแยกกันในครั้งต่อไป