Saya telah menonton AngularJS untuk sementara waktu baru -baru ini, dan saya akan meringkasnya pada suatu waktu.
Alamat situs web resmi: http://angularjs.org/
Rekomendasikan beberapa tutorial terlebih dahulu
1. Tutorial pengantar AngularJS relatif mendasar dan merupakan terjemahan dari tutorial resmi.
2. Tujuh langkah dari pemula AngularJS ke para ahli juga relatif mendasar, dan situs web pemutaran musik online dibuat.
3. Tutorial Panduan Pengembangan AngularJS cukup komprehensif, tetapi saya merasa bahwa terjemahannya agak tidak jelas dan sulit dipahami.
Setelah membaca tutorial ini, saya merasa bahwa AngularJS juga tahu sedikit, jadi saya ingin melakukan sesuatu dengannya, jadi saya menganalisis TODODOMVC yang ditulis oleh AngularJS.
Alamat situs web resmi TODOMVC: http://todomvc.com/
Direktori proyek adalah sebagai berikut:
Ada dua folder di Bower_Components, di antaranya folder sudut digunakan sama dengan file Angular.js. Folder TODOMVC-Common berisi CSS/JS terpadu dari semua proyek TODO (hanya digunakan untuk menghasilkan konten kiri dan tidak ada hubungannya dengan proyek) dan gambar.
Folder JS adalah header besar, dan pengontrol (controller)/arahan (instruksi)/layanan (layanan) dan app.js ditempatkan di dalamnya.
Folder uji berisi kode untuk pengujian dan tidak menganalisis.
Index.html adalah halaman tampilan proyek.
Mari kita lihat app.js
Salinan kode adalah sebagai berikut:
/ *Global Angular */
/ *jshint tidak digunakan: false */
'Gunakan ketat';
/**
* Modul Aplikasi TODOMVC Utama
*
* @type {angular.module}
*/
var toDomvc = angular.module ('toDomvc', []);
Itu mendefinisikan module todomvc
Lihatlah Todostorage.js di bawah Layanan
Salinan kode adalah sebagai berikut:
/ *Global TODOMVC */
'Gunakan ketat';
/**
* Layanan yang bertahan dan mengambil todos dari LocalStorage
*/
TODOMVC.Factory ('Todostorage', function () {
// pengidentifikasi unik Todos untuk penyimpanan string JSON
var storage_id = 'todos-angularjs';
kembali {
// Keluarkan Todos dari LocalStorage dan menguraikannya menjadi objek JSON
get: function () {
return json.parse (localstorage.getItem (Storage_id) || '[]');
},
// Konversikan objek Todos menjadi string JSON dan menyimpannya di LocalStorage
put: function (todos) {
localstorage.setitem (Storage_id, json.stringify (todos));
}
};
});
Metode layanan Todostorage dibuat menggunakan metode pabrik. Inti dari metode layanan ini adalah mengembalikan dua metode GET dan POS. Keduanya menggunakan fitur JSON2 dan HTML5. Dapatkan mengambil konten Todos dari LocalStorage dan parses ke JSON, masukkan todo yang dikonversi ke dalam string JSON dan menyimpannya di LocalStorage.
Mari kita lihat dua file perintah di bawah arahan.
todofocus.js
Salinan kode adalah sebagai berikut:
/ *Global TODOMVC */
'Gunakan ketat';
/**
* Petunjuk yang menempatkan fokus pada elemen yang diterapkan ketika ekspresi yang berikatan untuk dievaluasi
*/
TODOMVC.Directive ('Todofocus', function todofocus ($ timeout) {
fungsi pengembalian (lingkup, elem, attrs) {
// Tambahkan mendengarkan nilai properti Todofocus
scope. $ watch (attrs.todofocus, function (newVal) {
if (newVal) {
$ timeout (function () {
elem [0] .focus ();
}, 0, false);
}
});
};
});
Dalam fungsi pengembalian parameter, Elem adalah array elemen yang berisi instruksi, dan ATTRS adalah objek yang terdiri dari semua atribut, nama atribut, dll. Dari elemen.
Dua metode AngularJS digunakan
$ Watch (WatchExpression, Listener, ObjectEquality) Daftarkan panggilan balik pendengar. Setiap kali ekspresi Watch Expression berubah, panggilan balik pendengar akan dieksekusi.
$ timeout (fn [, delay] [, InvokeApply]) Ketika nilai batas waktu tercapai, fungsi FN dieksekusi.
todofocus.js menciptakan arahan Todofocus. Ketika suatu elemen memiliki properti Todofocus, arahan akan menambah pendengar pada nilai properti Todofocus dari elemen. Jika nilai properti Todofocus diubah menjadi true, $ timeout (function () {elem [0] .focus ();}, 0, false); Waktu tunda adalah 0 detik, jadi elem [0] .focus () akan segera dieksekusi.
TODOESCAPE.JS
Salinan kode adalah sebagai berikut:
/ *Global TODOMVC */
'Gunakan ketat';
/**
* Petunjuk yang mengeksekusi ekspresi saat elemen yang diterapkan untuk mendapatkan
* Acara Keydown `Escape`.
*/
TODOMVC.Directive ('TODOESCAPE', function () {
var Escape_key = 27;
fungsi pengembalian (lingkup, elem, attrs) {
elem.bind ('KeyDown', function (event) {
if (event.keycode === Escape_key) {
scope. $ apply (attrs.todoescape);
}
});
};
});
TODOESCAPE.js Membuat Petunjuk Todoescape. Ketika tombol Escape ditekan, ekspresi attrs.todoescape dieksekusi.
Lihatlah kepala besar, todoctrl.js di folder pengontrol. File ini sedikit lebih lama, jadi saya baru saja menulis komentar.
Salinan kode adalah sebagai berikut:
/ *Global TODOMVC, Angular */
'Gunakan ketat';
/**
* Pengontrol utama untuk aplikasi. Pengontrol:
* - Mengambil dan bertahan model melalui Layanan Todostorage
* - Mengekspos model ke templat dan berikan penangan acara
*/
TODOMVC.Controller ('Todoctrl', function Todoctrl ($ scope, $ location, todostorage, filterfilter) {
// Dapatkan Todos dari LocalStorage
var todos = $ scope.todos = todostorage.get ();
// Rekam todo baru
$ scope.newtodo = '';
// Rekam Todo yang Diedit
$ scope.itedittodo = null;
// Jalankan metode saat nilai todos berubah
$ scope. $ watch ('todos', function (newValue, oldvalue) {
// Dapatkan jumlah Todos yang belum selesai
$ scope.remainingcount = filterfilter (todos, {selesai: false}). panjang;
// Dapatkan jumlah todos yang sudah selesai
$ scope.completedcount = todos.length - $ scope.remainingcount;
// $ scope.allchecked adalah benar jika dan hanya jika $ scope.remainingcount adalah 0
$ scope.allchecked =! $ scope.remainingcount;
// Saat nilai baru todos dan nilai lama tidak sama, simpan todos ke stor localstorage
if (newValue! == oldValue) {// Ini mencegah panggilan yang tidak dibutuhkan ke penyimpanan lokal
todostorage.put (todos);
}
}, BENAR);
if ($ location.path () === '') {
// jika $ location.path () kosong, diatur ke /
$ location.path ('/');
}
$ scope.location = $ lokasi;
// Jalankan metode saat nilai location.path () berubah
$ scope. $ watch ('location.path ()', function (path) {
// Dapatkan filter negara bagian
// Jika jalur '/aktif', filternya {selesai: false}
// jika jalur '/selesai', filternya {selesai: true}
// jika tidak, filternya nol
$ scope.statusfilter = (path === '/aktif')?
{Selesai: false}: (path === '/selesai')?
{selesai: true}: null;
});
// tambahkan todo baru
$ scope.addtodo = function () {
var newtodo = $ scope.newtodo.trim ();
if (! newtodo.length) {
kembali;
}
// Tambahkan todo ke todos, properti yang diselesaikan default ke false
todos.push ({
Judul: Newtodo,
Selesai: Salah
});
// Kosong
$ scope.newtodo = '';
};
// edit todo
$ scope.edittodo = function (todo) {
$ scope.itedittodo = todo;
// Kloning todo asli untuk mengembalikannya sesuai permintaan.
// simpan todo sebelum mengedit dan bersiap untuk memulihkan pengeditan
$ scope.originaltodo = angular.extend ({}, todo);
};
// edit todo untuk menyelesaikan
$ scope.doneediting = function (todo) {
// Kosong
$ scope.itedittodo = null;
TODO.TITLE = TODO.TITLE.TRIM ();
if (! TODO.TITLE) {
// Jika judul todo kosong, lepaskan todo
$ scope.removetodo (todo);
}
};
// Kembalikan todo sebelum mengedit
$ scope.reverediting = function (todo) {
todos [todos.indexof (todo)] = $ scope.originaltodo;
$ scope.donediting ($ scope.originaltodo);
};
// Lepaskan todo
$ scope.removetodo = function (todo) {
todos.splice (todos.indexof (todo), 1);
};
// Bersihkan Todos Selesai
$ scope.clearcompetedtodos = function () {
$ scope.todos = todos = todos.filter (function (val) {
Return! Val.
});
};
// Tandai semua status TODO (benar atau salah)
$ scope.markall = function (selesai) {
todos.foreach (function (todo) {
TODO.
});
};
});
Akhirnya, mari kita lihat Index.html, analisis kami tentang file ini satu per satu.
Salinan kode adalah sebagai berikut:
<! Doctype html>
<html lang = "en" ng-app = "toDomvc" data-framework = "angularjs">
<head>
<meta charset = "UTF-8">
<meta http-equiv = "x-ua-kompatibel" konten = "ie = edge">
<title> AngularJS • TODOMVC </iteme>
<tautan rel = "stylesheet" href = "bower_components/todomvc-common/base.css">
<tyle> [ng-cloak] {display: none; } </style>
</head>
<body>
<Bagian id = "TODOApp" ng-controller = "todoctrl">
<header id = "header">
<h1> Todos </h1>
<Form id = "TODO-FORM" ng-submit = "addtodo ()">
<input id = "new-todo" placeholder = "Apa yang perlu dilakukan?" NG-Model = "newtodo" Autofocus>
</form>
</teader>
<bagian id = "utama" ng-show = "todos.length" ng-cloak>
<input id = "sakelar-semua" type = "centang kotak" ng-model = "allcheck" ng-click = "markall (allchecked)">
<label untuk = "toggle-all"> Tandai semua sebagai lengkap </label>
<ul id = "TODO-LIST">
<li ng-repeat = "TODO IN Todos | Filter: StatusFilter Track Oleh $ index" ng-class = "{Selesai: TODO.
<div>
<input type = "centang kotak" ng-model = "TODO.Completed">
<label ng-dblClick = "edittodo (TODO)"> {{TODO.TITLE}} </label>
<tombol ng-click = "removetodo (TODO)"> </button>
</div>
<bentuk ng-submit = "donediting (todo)">
<input ng-trim = "false" ng-model = "todo.title" TODO-escape = "ReverTediting (todo)" ng-blur = "donediting (todo)" TODO-FOCUS = "TODO == EditedTodo">
</form>
</li>
</ul>
</section>
<footer id = "footer" ng-show = "todos.length" ng-cloak>
<span id = "TODO-COUNT"> <strong> {{sisacount}} </strong>
<ng-pluralize count = "sisacount" when = "{One: 'item left', lain: 'item tersisa'}"> </ Ng-PLURALIZE>
</span>
<ul id = "filter">
<li>
<a ng-class = "{dipilih: location.path () == '/'}" href = "#/"> semua </a>
</li>
<li>
<a ng-class = "{dipilih: location.path () == '/Active'}" href = "#/aktif"> aktif </a>
</li>
<li>
<a ng-class = "{dipilih: location.path () == '/selesai'}" href = "#/selesai"> selesai </a>
</li>
</ul>
<tombol id = "clear-completed" ng-click = "clearcletedtodos ()" ng-show = "flevedcount"> clear coveed ({{funedcount}}) </buttond
</footer>
</section>
<footer id = "info">
<p> Klik dua kali untuk mengedit todo </p>
<p> Kredit:
<a href = "http://twitter.com/cburgdorf"> Christoph Burgdorf </a>,
<a href = "http://ericbidelman.com"> Eric Bidelman </a>,
<a href = "http://jacobmumm.com"> jacob mumm </a> dan
<a href = "http://igorminar.com"> Igor Minar </a>
</p>
<p> Bagian dari <a href = "http://todomvc.com"> todomvc </a> </p>
</footer>
<Script src = "bower_components/toDomvc-common/base.js"> </script>
<skrip src = "bower_components/angular/angular.js"> </ptript>
<skrip src = "js/app.js"> </script>
<Script src = "js/controllers/todoctrl.js"> </script>
<skrip src = "js/services/todostorage.js"> </ptript>
<skrip src = "js/arahan/todofocus.js"> </script>
<skrip src = "js/arahan/todoescape.js"> </script>
</body>
</html>
Pertama -tama, kami akan memperkenalkan JS yang sesuai di bagian bawah, jadi saya tidak akan banyak bicara tentang ini.
Salinan kode adalah sebagai berikut:
<Script src = "bower_components/toDomvc-common/base.js"> </script>
<skrip src = "bower_components/angular/angular.js"> </ptript>
<skrip src = "js/app.js"> </script>
<Script src = "js/controllers/todoctrl.js"> </script>
<skrip src = "js/services/todostorage.js"> </ptript>
<skrip src = "js/arahan/todofocus.js"> </script>
<skrip src = "js/arahan/todoescape.js"> </script>
Tentukan gaya [Ng-Cloak], yang berisi atribut NG-Cloak dan tidak terlihat.
Salinan kode adalah sebagai berikut:
<tyle> [ng-cloak] {display: none; } </style>
Mari kita lihat HTML untuk menambahkan Todo. Model terikat adalah Newtodo. Metode pengiriman adalah addtodo () di todoctrl.js. Todo akan ditambahkan. Klik ENTER, dan acara pengiriman akan dipicu secara default, yang akan memicu metode AddTodo () dan menambahkan TODO ke Todos.
Salinan kode adalah sebagai berikut:
<Form id = "TODO-FORM" ng-submit = "addtodo ()">
<input id = "new-todo" placeholder = "Apa yang perlu dilakukan?" NG-Model = "newtodo" Autofocus>
</form>
Lihatlah HTML yang menunjukkan Todos
Salinan kode adalah sebagai berikut:
<bagian id = "utama" ng-show = "todos.length" ng-cloak>
<input id = "sakelar-semua" type = "centang kotak" ng-model = "allcheck" ng-click = "markall (allchecked)">
<label untuk = "toggle-all"> Tandai semua sebagai lengkap </label>
<ul id = "TODO-LIST">
<li ng-repeat = "TODO IN Todos | Filter: StatusFilter Track Oleh $ index" ng-class = "{Selesai: TODO.
<div>
<input type = "centang kotak" ng-model = "TODO.Completed">
<label ng-dblClick = "edittodo (TODO)"> {{TODO.TITLE}} </label>
<tombol ng-click = "removetodo (TODO)"> </button>
</div>
<bentuk ng-submit = "donediting (todo)">
<input ng-trim = "false" ng-model = "todo.title" TODO-escape = "ReverTediting (todo)" ng-blur = "donediting (todo)" TODO-FOCUS = "TODO == EditedTodo">
</form>
</li>
</ul>
</section>
Bagian ini menggunakan metode NgShow untuk menentukan apakah ditampilkan berdasarkan panjang todos. Atribut NG-Cloak ditambahkan untuk mencegah halaman yang tidak diproses AngularJS di awal. Anda dapat menghapus penyegaran dan mencobanya.
Kotak centang dengan ID adalah sakelar-semua terikat pada model allchecked, klik untuk memicu Markall (allchecked), berikan nilai allchecked, dan tandai semua todos.
Gunakan Ngrepeat Loop untuk menghasilkan tag Li, todo di Todos | Filter: StatusFilter Track By $ Index, Loop Todos, Filter dengan StatusFilter, dan Trace dengan $ Index. NGClass mengikat dua kelas, {selesai: TODO. Kelas terikat untuk TODO. Label yang ditampilkan dalam judul Todo mengikat acara klik dua kali. Klik dua kali untuk memicu Edittodo (TODO). Edittodo akan menugaskan Todo ke EditedTodo, dan kemudian memicu instruksi Todofocus dalam bentuk di bawah ini. Pada saat ini, input dalam bentuk dapat terlihat. Tekan ESC untuk memicu Revertediting (TODO). Sebelum kembali ke pengeditan, tekan Enter atau kehilangan fokus untuk memicu Donediting (TODO) untuk menyimpan TODO yang diedit. Kelas mengikat tombol klik untuk menghancurkan tombol, klik untuk memicu Removetodo (TODO), dan hapus TODO.
Akhirnya, lihat HTML yang ditampilkan oleh Todos Statistics
Salinan kode adalah sebagai berikut:
<footer id = "footer" ng-show = "todos.length" ng-cloak>
<span id = "TODO-COUNT"> <strong> {{sisacount}} </strong>
<ng-pluralize count = "sisacount" when = "{One: 'item left', lain: 'item tersisa'}"> </ Ng-PLURALIZE>
</span>
<ul id = "filter">
<li>
<a ng-class = "{dipilih: location.path () == '/'}" href = "#/"> semua </a>
</li>
<li>
<a ng-class = "{dipilih: location.path () == '/Active'}" href = "#/aktif"> aktif </a>
</li>
<li>
<a ng-class = "{dipilih: location.path () == '/selesai'}" href = "#/selesai"> selesai </a>
</li>
</ul>
<tombol id = "clear-completed" ng-click = "clearcletedtodos ()" ng-show = "flevedcount"> clear coveed ({{funedcount}}) </buttond
</footer>
Tag NG-pluralize mengimplementasikan item tampilan yang ditinggalkan ketika jumlah yang tersisa adalah 1, jika tidak, item tampilan yang tersisa.
Tag UL dengan ID adalah filter dipilih sesuai dengan konten lokasi. Path ().
ID Menambahkan Acara Klik ke tombol Clear-Incheted, memicu ClearCompletedTodos (), membersihkan semua todos yang telah selesai.
Mari kita berhenti di sini catatan hari ini. Mereka semua adalah pengalaman pribadi. Saya harap Anda bisa menyukainya.