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 ฉันจะนำมันออกไปแยกกันในครั้งต่อไป