Aplikasi AngularJS

Kini tiba masanya untuk mencipta aplikasi web (SPA) halaman tunggal AngularJS sebenar.

Contoh Aplikasi AngularJS

Anda telah cukup belajar tentang AngularJS dan kini boleh mula mencipta aplikasi AngularJS pertama anda:

Penjelasan aplikasi

Contoh

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="myNoteApp" ng-controller="myNoteCtrl">

<h2>我的笔记</h2>


<textarea ng-model="message" cols="40" rows="10"></textarea>

<p>
<button ng-click="save()">保存</button>
<button ng-click="clear()">清除</button>
</p>

<p>剩余字数: <span ng-bind="left()"></span></p>

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

</body>
</html>

Contoh berjalan »

Klik Butang "Jalankan Instance" untuk melihat contoh dalam talian

Fail aplikasi "myNoteApp.js":

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

Fail pengawal "myNoteCtrl.js":

app.controller("myNoteCtrl", function($scope) {
$scope.message = "";
$scope.left = function() {return 100 - $scope.message.length;};
$scope.clear = function() {$scope.message = "";};
$scope.save = function() {alert("Nota Disimpan");};
});

< Elemen html> ialah bekas aplikasi AngularJS: ng-app="myNoteApp":

<div> ialah pengawal dalam halaman HTML: ng- controller="< Skop 🎜>myNoteCtrl":

ng-model arahan mengikat <textarea> kepada pembolehubah pengawal mesej:

Dua acara ng-click memanggil fungsi pengawal clear() dan save():

<butang ng-klik="simpan()">Simpan</butang>
<butang ng-klik=" jelas ()">Kosongkan</butang>

< The Arahan 🎜>ng-bind mengikat fungsi pengawal left() ke <span> untuk memaparkan aksara yang tinggal:

Bilangan aksara yang tinggal:

Fail perpustakaan aplikasi perlu dimuatkan dalam AngularJs sebelum ia boleh dilaksanakan:

< ;skrip src="myNoteApp.js"></ skrip>
<skrip src="myNoteCtrl.js"></skrip>

Seni bina aplikasi AngularJS

Contoh di atas ialah aplikasi web (SPA) halaman tunggal AngularJS yang lengkap. Elemen

<html> mengandungi aplikasi AngularJS (ng-app=). Elemen

<div> mentakrifkan skop pengawal AngularJS (ng-controller=).

Aplikasi boleh mempunyai banyak pengawal. Fail aplikasi

(my...App.js) mentakrifkan kod model aplikasi.

Satu atau lebih fail pengawal (my...Ctrl.js) tentukan kod pengawal.

Ringkasan - Bagaimana ia berfungsi? Arahan

ng-app terletak di bawah elemen akar apl.

Untuk aplikasi web halaman tunggal (SPA), akar aplikasi biasanya <html>

Satu atau lebih arahan ng-controller mentakrifkan pengawal aplikasi. Setiap pengawal mempunyai skop tersendiri: elemen HTML yang ditentukan.

AngularJS bermula secara automatik dalam acara HTML DOMContentLoaded. jika dijumpai arahan ng-app, AngularJS memuatkan modul dalam arahan dan menyusun ng-app sebagai akar aplikasi.

Akar aplikasi boleh menjadi keseluruhan halaman, atau sebahagian kecil halaman Jika ia adalah sebahagian kecil, ia akan menyusun dan melaksanakan dengan lebih cepat.

← penghalaan AngularJS