Latest web development tutorials

AngularJS การประยุกต์ใช้งาน

ตอนนี้เป็นเวลาที่จะสร้าง AngularJS จริงการใช้งานเว็บหน้าเดียว (โปรแกรมเว็บหน้าเดียวสปาบริการ)

ตัวอย่างการประยุกต์ AngularJS

คุณได้เรียนรู้เกี่ยวกับความรู้เพียงพอ AngularJS ตอนนี้คุณสามารถเริ่มต้นสร้างแอปพลิเค AngularJS ครั้งแรกของคุณ:

บันทึกของฉัน



ที่เหลือนับจำนวนคำ:100


อธิบายแอพลิเคชัน

AngularJS ตัวอย่าง

<html NG-App = "myNoteApp ">
<head>
<Meta charset = "UTF-8 ">
<script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ head>
<body>

<div NG-ควบคุม = "myNoteCtrl ">

<h2> บันทึกของฉัน </ h2>

<p> <textarea NG-รุ่น = "ข้อความ" cols = "40" แถว = "10"> </ textarea> </ p>

<p>
<ปุ่ม NG-คลิก = "บันทึก ()"> บันทึก </ ปุ่ม>
<ปุ่ม NG-คลิก = "ชัดเจน ()"> ล้าง </ ปุ่ม>
</ p>

<p> จำนวนตัวอักษรที่เหลือ: <span NG-ผูก = "ซ้าย ()"> </ span> </ p>

</ div>

<script src = "myNoteApp.js"> </ script>
<script src = "myNoteCtrl.js"> </ script>

</ body>
</ html>

ลอง»

แอพลิเคชัน Files "myNoteApp.js":

var App = angular.module ( "myNoteApp" []);

ไฟล์ควบคุม "myNoteCtrl.js":

app.controller ( "myNoteCtrl" ฟังก์ชั่น ($ ขอบเขต) {
$ Scope.message = "";
$ Scope.left = function () {กลับ 100 - $ scope.message.length;};
$ Scope.clear = function () {$ scope.message = "";};
$ Scope.save = function () {แจ้งเตือน ( "หมายเหตุ: ที่บันทึกไว้");};
});

<html> องค์ประกอบเป็นโปรแกรม AngularJS: NG-App = "myNoteApp" ภาชนะ:

<html NG-App = "myNoteApp ">

<div> HTML หน้าในตัวควบคุม: NG-ควบคุม = "myNoteCtrl" ขอบเขต:

<div NG-ควบคุม = "myNoteCtrl ">

ผูก NG-รูปแบบคำสั่ง <textarea> เพื่อข้อความตัวแปรควบคุม:

<textarea NG-รุ่น = "ข้อความ " cols = "40" แถว = "10"> </ textarea>

สองเหตุการณ์ NG-คลิกเรียกฟังก์ชั่นการควบคุมที่ชัดเจน () และบันทึก ():

<ปุ่ม NG-คลิก = "บันทึก ()"> บันทึก </ ปุ่ม>
<ปุ่ม NG-คลิก = "ชัดเจน ()"> ล้าง </ ปุ่ม>

คำสั่ง NG-ผูกจะผูกซ้ายควบคุมฟังก์ชั่น () เพื่อ <span> จะใช้ในการแสดงตัวอักษรที่เหลือ:

จำนวนตัวอักษรที่เหลือ: <span NG -bind = "ซ้าย ()"> </ span>

การประยุกต์ใช้งานไฟล์ไลบรารีที่จำเป็นในการดำเนินการหลังจาก AngularJs โหลด:

<script src = "myNoteApp.js"> </ script>
<script src = "myNoteCtrl.js"> </ script>

AngularJS สถาปัตยกรรมงาน

ตัวอย่างข้างต้นเป็น AngularJS สมบูรณ์ใช้งานเว็บหน้าเดียว (โปรแกรมเว็บหน้าเดียว SPA)

<html> องค์ประกอบที่มีแอปพลิเค AngularJS (NG-App =)

<div> กำหนดขอบเขตของ (NG-ควบคุม =) AngularJS ควบคุม

การประยุกต์ใช้งานสามารถทำได้ในจำนวนมากของตัวควบคุม

แฟ้มแอพลิเคชัน (ของฉัน ... App.js) กำหนดรหัสการประยุกต์ใช้แบบจำลอง

หนึ่งหรือมากกว่าหนึ่งไฟล์ควบคุม (ของฉัน ... Ctrl.js) กำหนดรหัสควบคุม

ข้อมูลอย่างย่อ - มันทำงานอย่างไร

สั่ง NG-app ในองค์ประกอบหลักของการประยุกต์ใช้

สำหรับการใช้งานหน้าเดียวเว็บ (โปรแกรมเว็บหน้าเดียว SPA), โปรแกรมรากมัก <html> องค์ประกอบ

หนึ่งหรือ NG-ควบคุมมากขึ้นสั่งกำหนดควบคุมแอพลิเคชัน แต่ละตัวควบคุมมีองค์ประกอบ HTML :: ของการกำหนดขอบเขตของตัวเอง

AngularJS เริ่มต้นโดยอัตโนมัติในกรณี HTML DOMContentLoaded หากคุณพบว่าคำสั่ง NG-App โมดูลการเรียนการสอนโหลด AngularJS และ NG-App เป็นรากของโปรแกรมที่จะรวบรวม

การประยุกต์ใช้รากอาจจะเป็นส่วนเล็ก ๆ ของทั้งหน้าหรือหน้าถ้ามันเป็นเพียงส่วนเล็ก ๆ จะสะสมได้เร็วขึ้นและการดำเนินการ