Saya menonton video tentang AngularJS. Konten video menjelaskan cara membuat spa dalam bentuk daftar TODO (aplikasi halaman sederhana). Untuk meningkatkan pemahaman, sebuah artikel ditulis di bawah ini untuk ditinjau dan dikonsolidasikan.
Mempersiapkan
Download angularjs
Ini disebut unduhan, tetapi pada kenyataannya, selama Anda dapat merujuk AngularJS di halaman kami. Mungkin ada metode berikut.
Akselerasi CDN
Dimungkinkan juga untuk menggunakan layanan akselerasi CDN domestik.
Salin kode sebagai berikut: <skrip src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
Metode NPM
Juga cukup nyaman untuk menggunakan alat manajemen paket Nodejs, pada dasarnya dapat dilakukan dalam dua langkah.
Pertama, masukkan folder tempat kami akan menulis kode.
• Pasang AngularJS: NPM Instal Angular
• Diperkenalkan untuk digunakan di halaman:
<!-Alamat SRC ini tergantung pada situasi Anda sendiri->
<skrip src = "node_modules/angular/angular.js"> </script>
Cara konvensional
Metode konvensional adalah mengunduh file yang relevan secara manual dan kemudian memperkenalkannya secara manual, karena cukup rumit. Tidak ada lagi narasi di sini.
Unduh Bootstrap
Sebagai kerangka kerja front-end yang sangat populer dan modern, Bootstrap adalah hit. Alamat unduhan
Cadangan Pengetahuan
Arsitektur MVC
Inti AngularJS mengadopsi arsitektur MVC dan aplikasi yang digerakkan oleh acara. Saya baru dalam hal itu, jadi saya tidak memahaminya dengan baik. Jika ada kesalahan, saya harap blogger akan menunjukkannya.
NG-APP
Sebagai kepala pelayan dari seluruh halaman tunggal, aplikasi berarti aplikasi, dan arti aplikasi. Layanan satu halaman kami bertindak sebagai aplikasi.
Secara umum, NG-APP harus bersarang sebagai wadah induk dari NG-Controller. Jika tidak, hasil yang diharapkan mungkin tidak muncul
NG-Controller
Pengontrol, tangan kanan diterapkan pada halaman, dan keberadaan pengontrol menyederhanakan kopling antar modul, membuat kode menulis lebih terstandarisasi dan sederhana.
NG-MODEL
Selama pemrosesan model, umumnya akan mengikat dan mengeluarkan dengan elemen halaman untuk mencapai efek halaman bebas refresh.
Dasar Acara
NG-klik
Dalam aplikasi satu halaman kami, elemen -elemen yang mendeklarasikan atribut ini memiliki fungsi acara klik. Adapun bagian mana dari fungsi yang disebut, mereka sebenarnya terkait dengan wadah tempat elemen berada.
Dengan kata lain, fungsi yang sesuai dengan acara klik adalah kode yang ditulis dalam pengontrol yang relevan untuk menyelesaikan fungsi tertentu.
Kode lengkap
Kode terperinci untuk contoh ini diposting di bawah ini
Main.js
(function(window){ // Register an application main module var todoapp = window.angular.module('todoapp',[]); // Register the controller// window.angular.module('todoapp') todoapp.controller('maincontroller' ,['$scope',function($scope){ // The function of $scope is to add elements to the view// The value in the text box $ scope.text = ''; $ scope.text.trim (); if (teks) {$ scope.todolist.push ({teks: teks, dilakukan: false}); Hapus} // Dapatkan jumlah acara yang sudah selesai dan terapkan sesuai dengan pemilihan kotak centang // Karena halaman ini diubah secara dinamis, Anda perlu menggunakan fungsi, atau hanya menggunakan pengikatan model, tetapi itu akan sedikit merepotkan $ scope.donecount = function () {// menggunakan filter untuk mengimplementasikan var temp = $ scope.todolist.filist = function (function) {// item untuk mengimplementasikan var suh = $ scope.todolist.filist.filist (function () {// memenuhi persyaratan dan acara telah selesai});todolist.html
<! Doctype html> <html> <head> <meta charset = "UTF-8"> <Title> AngularJS mengintegrasikan daftar tugas implementasi bootstrap </iteme> <!-memperkenalkan bootstrap-> <tautan href = "http://apps.bdimg.com/libs/bootstrap.3. rel = "stylesheet"> <tyle> .container {max-width: 720px; } .done {color: #CCA; } .checkbox {margin-right: 12px; margin-bottom: 0; } .done> .checkbox> label> span {text-decoration: line-through; } </tyle> <script src = "node_modules/angular/angular.js"> </script> <script src = "myjs/app.js"> </cript> </adephing> <doD> <v-ng-app = "TODOApp"> <header> <h1> Daftar TODO </h1> <header> <h.-! NG-Controller = "MainController"> <!-Untuk mencapai antarmuka yang tampan, kontrol bentuk digunakan-> <sorm> <input type = "text" ng-Model = "text" name = ""> <span> <button ng-click = "add ()"> add </button> </span> </form storm> </uL style = "pad =" Pad = " ng-class="{'done':item.done}" ng-repeat="item in todolist" > <button type="button" aria-label="close" ng-click="delete(item)"> <span aria-hidden="true">×</span> <span>Close</span> </button> <div> <label> <input type="checkbox" ng-model = "item.done"> <span> {{item.text}} </span> </label> </div> </li> </ul> <p> Total <strong> {{todolist.length}} </strong> telah diselesaikan </strong> </p> </bagian> </kupuEfek halaman
Penjelasan kode terperinci
Lapisan kode terluar dalam kode dapat memiliki efek yang baik sebagai ruang sementara dan mencegah polusi namespace.
(function (window) {// Untuk melakukan sesuatu}) (jendela)Perhatikan bahwa (jendela) terakhir sangat diperlukan.
Buat aplikasi
// Daftarkan Modul Utama Aplikasi
var toDoApp = window.angular.module ('TODOAPP', []);
Buat pengontrol
TODOAPP.CONTROLLER ('MainController' // $ SCOPE DI SINI juga memainkan peran wadah dan menyatakan kisaran variabel yang terlihat., ['$ scope', function ($ scope) {// Fungsi dari $ scope adalah untuk menambah elemen ke tampilan // nilai dalam kotak teks $ scope.text = ''; secara manual menambahkan string daftar $ scope.todolist = [{text: 'angularjs', selesai: false}, {text: 'bootstrap', selesai: false}];}]);Meningkatkan fungsi fungsi
// tambahkan fungsi untuk merespons interaksi $ scope.add = function () {var text = $ scope.text.trim (); if (text) {$ scope.todolist.push ({text: text, done: false}); $ scope.text = ''; }} // Klik peristiwa respons $ scope.delete = function (todo) {var index = $ scope.todolist.indexof (todo) $ scope.todolist.splice (index, 1); // untuk menghapus}} // mendapatkan jumlah peristiwa yang sudah selesai dan mengimplementasikannya sesuai dengan pemilihan cecekbox // sejak halaman itu diubah, Anda perlu diubah secara dinamis, Anda perlu diubah secara dinamis, Anda tidak perlu diubah secara dinamis // Sejak halaman ini, sedikit merepotkan $ scope.donecount = function () {// Gunakan filter untuk mengimplementasikan var temp = $ scope.todolist.filter (fungsi (item) {return item.done; // return true untuk menunjukkan bahwa data saat ini memenuhi persyaratan dan acara telah selesai}); kembalikan temp.length; }Meringkaskan
Tidak ada banyak kode dan pemikiran mendalam.
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.