Alamat asli: http://code.angularjs.org/1.0.2/docs/guide/concepts
melanjutkan. .
1. Ringkasan
Artikel ini terutama memberikan ikhtisar komponen sudut dan menjelaskan cara kerjanya. Daftarnya adalah sebagai berikut:
2. Startup
Inilah cara Angular dimulai (lihat bagan dengan contoh berikut):
1. Browser memuat HTML dan mengubah tag HTML menjadi objek DOM;
2. Browser memuat skrip Angular.js;
3. Angular Waits untuk acara DomContentloaded;
4. Tampilan Angular untuk NG-APP, arahan yang digunakan untuk menentukan rentang batas aplikasi;
5. Jika NG-App memiliki modul yang ditentukan (mungkin NG-App = "SomeApp"), itu akan digunakan sebagai konfigurasi $ injektor;
6. $ injektor digunakan untuk membuat $ Compile Service (Layanan) dan $ Rootscope;
7. Layanan $ kompilasi digunakan sebagai "kompilasi" (semacam traversal, lalu lakukan sedikit hal misterius) Dom dan menghubungkannya ke $ rootscope yang sesuai.
8. NG-INIT Petunjuk ini membuat atribut nama dalam ruang lingkup yang sesuai dan memberikannya nilai "kucing";
9. Masukkan nilai "{{name}}" ke dalam ekspresi dan akhirnya menampilkan "Hello Kitty!".
<! Doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <itement> hello kitty! </Title> <style type = "text/css"> .ng-cloak {display: none; } </tyle> </head> <body> <v ng-init = "name = 'kitty'"> halo {{name}}! </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> </script> </script> </html>Kemajuannya lambat karena saya membahas sesuatu dengan seseorang malam ini. . . Itulah kalimatnya lagi. . . Sekarang sudah larut malam. . . Angular, sampai jumpa setelah iklan!
=================================================================
Iklan selesai. . . melanjutkan
3. Runtime
Bagan ini dan contoh berikut menjelaskan bagaimana sudut berinteraksi melalui peramban-loop peristiwa (fungsi pemrosesan sepanjang masa, serta fungsi yang dieksekusi dengan pengatur waktu, akan diatur dalam struktur antrian, dan menggunakan loop tak terbatas untuk terus mengekstrak fungsi dari antrian untuk dieksekusi. Ini adalah loop peristiwa. http://wiki.nodejs.tw/nodejs_from_scratch/javascript-yunodejs/2-1-event-loop).
1. Loop acara browser menunggu acara tiba. Acara berasal dari interaksi pengguna (acara DOM), acara timer (setTimeOut), acara jaringan (respons server, xhr, dll.);
2. Fungsi panggilan balik acara mulai dieksekusi. Di sini kita memasukkan konteks JavaScript (konteks). Fungsi panggilan balik ini dapat memodifikasi struktur DOM.
3. Ketika fungsi callback dieksekusi, browser keluar dari konteks JavaScript dan menggambar ulang tampilan sesuai dengan perubahan DOM.
Angular memodifikasi aliran javascript umum dengan membuat loop pemrosesan acara sendiri. Ini membagi JavaScript menjadi konteks eksekusi tradisional dan sudut. Operasi apa pun yang dilakukan dalam konteks eksekusi sudut memiliki pengikatan data sudut, penanganan pengecualian, pengamatan properti dan kemampuan lainnya. Kita dapat memasukkan konteks eksekusi sudut dengan menggunakan $ apply () di JavaScript. Tetapi ingat bahwa di sebagian besar tempat (Angular) (seperti pengontrol, layanan), arahan yang menangani acara akan menghubungi $ berlaku untuk Anda. Skenario di mana $ berlaku dipanggil secara manual biasanya ketika Anda menerapkan pawang acara khusus atau menangani panggilan balik dari perpustakaan pihak ketiga.
1. Masukkan konteks eksekusi sudut dengan memanggil ruang lingkup. $ Apply (stimulusfn). Stimulusfn adalah fungsi (termasuk ruang lingkup sebagai argumen) atau ekspresi hukum sudut yang ingin kami jalankan dalam konteks eksekusi sudut.
2. Angular mengeksekusi stimulusfn, yang biasanya mengubah status aplikasi.
3. Angular memasuki loop $ digest. Loop ini terdiri dari dua loop kecil yang menangani $ evalasync antrian dan $ watch list. Loop $ Digest akan terus berulang sebelum model stabil, yaitu antrian $ evalasync kosong, dan tidak ada perubahan yang terdeteksi oleh daftar $ Watch.
4. $ Evalasync Antrian digunakan sebagai sarana untuk mengatur bahwa bingkai tumpukan saat ini harus dilompat keluar dari bingkai tumpukan saat ini (bingkai tumpukan mengacu pada area (atau ruang) yang dialokasikan ke fungsi yang saat ini berjalan dalam tumpukan. Parameter yang ditularkan, fungsi pengembalian (yang harus dialihkan ke saat fungsi berakhir. Catatan terjemahan: yaitu, breakpoint. Variabel yang disimpan di tumpukan) semuanya ada di bingkai tumpukan. Ini biasanya dicapai dengan menggunakan SetTimeout (0). Tetapi metode setTimeout (0) akan menyebabkan kelambatan, atau ketika browser menggambar tampilan setelah setiap peristiwa diproses, tampilan akan berkedip (apakah pemecahan sudut ini masalah ini? Bagaimana cara menyelesaikannya?).
5. $ Watch List adalah kumpulan ekspresi yang dapat dimodifikasi dalam iterasi terbaru. Jika (model) berubah, fungsi $ watch akan dipanggil untuk mencapai tujuan menugaskan kembali DOM tertentu.
6. Setelah loop Digest sudut sudut selesai (situasi yang disebutkan dalam 3 sebelumnya), setelah meninggalkan konteks sudut dan javascript, browser kemudian akan mengecat ulang DOM sebagai respons terhadap perubahan.
Berikut ini menjelaskan bagaimana contoh "Hello Kitty" (-_-!) Mengimplementasikan efek pengikatan data ketika pengguna memasukkan teks di kotak teks.
1. Fase Kompilasi:
A) NG-Model dan Input Directive Keydown Event, pendengar ditentukan dalam <sput>.
b) {{name}} placeholder (interpolasi, tidak tahu cara menerjemahkan) (ekspresi) Atur $ watch untuk merespons ketika namanya berubah.
2. Fase runtime:
a) Tekan tombol "X" di kontrol InUT untuk membiarkan browser memicu acara Keydown;
b) Input Directive menangkap perubahan dalam nilai kotak teks, dan kemudian memanggil $ apply ("name = 'x';"), memperbarui model yang diterapkan dalam konteks eksekusi sudut.
c) Angluar berlaku "name = 'x';" untuk model. (Model telah berubah)
D) $ Digest Loop Mulai
E) $ Daftar Tonton Mendeteksi bahwa nilai nama telah diubah, kemudian mem -parsing ekspresi {{{name}} lagi, dan kemudian memperbarui DOM.
f) Angular Exit (Angular) Konteks Eksekusi, dan kemudian keluar dari Keydown Event dan konteks eksekusi JavaScript pada gilirannya;
g) Browser menggambar ulang tampilan dan memperbarui karakter.
<! Doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <itement> hello kitty! </Title> <style type = "text/css"> .ng-cloak {display: none; } </tyle> </head> <body> <input ng-model = "name"/> <p> halo {{name}}! </p> <script src = "../ angular-1.0.1.js" type = "text/javaScript"> </script> </script> </body> </html>4. Lingkup
Ruang lingkup bertanggung jawab untuk mendeteksi perubahan dalam model dan berfungsi sebagai konteks eksekusi ekspresi. Lingkup bersarang dalam hierarki yang mirip dengan struktur DOM (seperti yang kami pelajari sebelumnya, divisi mungkin terkait dengan pengontrol). (Untuk detailnya, periksa dokumentasi arahan individu untuk melihat arahan mana yang akan membuat ruang lingkup baru)
Contoh berikut menunjukkan bahwa nilai ekspresi "nama" ditentukan berdasarkan ruang lingkupnya tergantung pada (yang dimiliki), dan juga termasuk cara pencarian nilai (mirip dengan rantai lingkup JS, jika Anda tidak memilikinya, silakan cari ayah saya).
<! Doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <iteme> scope </iteme> <style type = "text/css"> .ng-cloak {display: none; } </tyle> </head> <body> <Div ng-controller = "controllera"> halo {{name}}!; </div> <div ng-controller = "controllerb"> halo {{name}}!; <div ng-controller = "controllerc"> halo {{name}}!; <div ng-controller = "controllerD"> halo {{name}}!; </div> </div> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> function controllera ($ scope) {$ scope.name = 'Kitty'; } function controllerb ($ scope) {$ scope.name = 'lclao'; } function controllerc ($ scope) {$ scope.name = 'jeffrey'; } function controllerd ($ scope) {} </script> </body> </html>5. Pengontrol
<! Doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <itement> controller </iteme> <style type = "text/css"> .ng-cloak {display: none; } </tyle> </head> <body> <Div ng-controller = "controllera"> halo {{name}}! <tombol ng-click = "doit ()"> doit !! </button> </div> <skrip src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> function controllera ($ scope) {$ scope.name = 'Kitty'; $ scope.doit = function () {$ scope.name = "tampan"; }; } </script> </body> </html>Pengontrol adalah kode di belakang tampilan (-_-!). Tanggung jawabnya adalah membangun model dan mendorongnya ke tampilan melalui fungsi callback. View adalah peta lingkup saat ini untuk template (html) (diterjemahkan sedikit hampir ...). Lingkup adalah tautan yang mengarahkan model ke tampilan dan mengirim acara ke pengontrol.
Penting untuk memisahkan pengontrol dari tampilan karena:
1.Controller ditulis dalam JavaScript. Javascript sangat penting. Perintah penting adalah cara yang baik untuk menggambarkan perilaku suatu aplikasi. Pengontrol tidak boleh berisi informasi tampilan (logis) (referensi DOM atau fragmen HTML)
2. View Template ditulis dalam HTML. HTML adalah deklaratif. Deklaratif (HTML) adalah cara yang baik untuk menggambarkan UI. Tampilan tidak boleh mengandung perilaku apa pun.
3. Karena pengontrol tidak tahu tampilan mana yang perlu disesuaikan, pengontrol dapat (secara tidak langsung) menggunakan banyak tampilan. Ini penting untuk skinning (ganti kulit?), Tampilan khusus perangkat lainnya (seperti ponsel dan desktop), dan pengukuran kode.
6. Model
Model dapat dipahami sebagai objek data. Ini digunakan sebagai kombinasi dengan templat untuk menghasilkan tampilan. Untuk menulis model ke tampilan, model harus direferensikan oleh ruang lingkup. Tidak seperti banyak kerangka kerja lainnya, Angular tidak memiliki batasan atau persyaratan pada model. Tidak perlu menambahkan kelas tambahan, Anda juga tidak perlu mengakses atau mengubah model melalui metode istimewa. Jenis data model dapat berupa tipe primitif (string, angka ...), objek nilai-kunci ({a: 1, b: 2}), atau fungsi (fungsi () {...}). Sederhananya, model sudut harus menjadi objek JavaScript yang normal.
7. Lihat
View adalah sesuatu yang bisa dilihat pengguna. Pemandangan itu lahir di templat. Ini bergabung dengan model dan akhirnya menjadikannya sebagai browser DOM. Angular membutuhkan cara yang sangat berbeda untuk menyajikan pandangan untuk banyak sistem templat lainnya.
Mesin Template Lainnya: Banyak mesin template diimplementasikan dengan membuat string HTML dengan tag khusus. Biasanya tag template ini menghancurkan sintaks HTML, yang berarti bahwa kode tidak dapat diedit melalui editor HTML umum (ini ...). String template diteruskan ke mesin template dan digabungkan dengan data. Akhirnya menghasilkan string HTML. String ini umumnya ditulis ke DOM di .innerhtml, mendorong browser untuk membuat konten template. Proses ini perlu diulang lagi dan lagi ketika data berubah. Granularitas templat konsisten dengan granularitas pembaruan DOM. Kunci dari biji -bijian ini adalah bahwa sistem template memproses string.
Angular: Perbedaan antara templat sudut adalah bahwa ia berbasis DOM daripada berbasis string. Template masih perlu menulis beberapa string ke dalam HTML, tetapi masih HTML (bukan dengan menanamkan templat di dalamnya). Browser mengonversi html ke DOM, dan kemudian DOM menjadi input kompiler (mesin template Angular). Compiler mencari arahan dan mengatur jam tangan pada model pada gilirannya. Hasilnya adalah tampilan yang telah diperbarui sepanjang waktu, dan tidak perlu menjahit ulang model dan templat. Model menjadi satu -satunya sumber kebenaran untuk dilihat.
8. Arahan
Directive adalah perilaku (misalnya, dalam contoh artikel sebelumnya "Sembunyikan dan cari") atau konversi DOM (tag khusus, berisi satu set DOM), dan menempatkan namanya di atribut, nama tag, dan nama kelas dapat memicu arahan. Directive memungkinkan Anda untuk memperluas tag HTML dengan cara deklaratif.
Masih ada beberapa pertanyaan dalam contoh -contoh berikut. Begitulah cara $ render pemicu @_ @
<! Doctype html> <html lang = "zh-cn" ng-app = "mydirective"> <head> <meta charset = "utf-8"> <itement> directive </iteme> <style type = "text/css"> .ng-cloak {display: no; } </tyle> </head> <body ng-controller = "myctrl"> <v ng ng-model = "konten" contentEditable = "true"> my little dada </div> <per> ModelValue = {{Content}} </pre> <button ng-click = "reset ()"> reset {{}} </butt> </pre-click = "reset ()"> reset (kancing </pre> </pre-click = "reset ()"> reset (kancing </pre> src="../angular-1.0.1.js" type="text/javascript"></script><script type="text/javascript"> angular.module("myDirective",[]) .directive("contenteditable",function() { return { require:'ngModel', link:function (scope, element, attr, ngModel) { function setVal() {ngModel. $ setViewValue (element.text ()); setVal ();}}}) .controller ("myctrl", function ($ scope) {$ scope.reset = function () {$ scope.content = "my little dada";};}); </script> </body> </html>9. Filter
Filter berperan dalam konversi data (pemformatan). Biasanya mereka terkait dengan wilayah tersebut, dan daerah yang berbeda mungkin memiliki format output yang berbeda. Mereka mengikuti semangat filter UNIX dengan sintaks yang sama: | (pipa)
<! Doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <itement> filter </iteme> <style type = "text/css"> .ng-cloak {display: none; } </tyle> </head> <body> <v ng -init = "list = ['baidu b', 'sogou s', '360', '3sb']"> format angka: 1233211234567 -> {{{{12333211234567 | angka}} <br/ron> arron, array, dan lalat, {12333211234567 ng-model = "myfiltertext" type = "text"/> <br/> {{list | filter: myfiltertext | json}} <br/> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> </body> hl10. Modul dan injektor
Injektor adalah pencari layanan. Setiap aplikasi sudut akan memiliki injektor terpisah. Injektor menyediakan cara untuk menemukan instance objek dengan nama. Injektor akan menyimpan semua instance objek dalam cache internal, jadi ketika nama yang sama berulang kali dipanggil, instance objek yang sama dikembalikan. Jika objek tidak ada, itu akan meminta pabrik instance untuk membuat instance baru.
Modul adalah metode mengkonfigurasi pabrik instance dari injektor, yang disebut "penyedia".
// Buat modul var mymodule = angular.module ('mymodule', []) // Konfigurasikan injektor mymodule.factory ('servicea', function () {return {// bukan {}, letakkan pembuatan objek Anda di sini};}); // Buat injektor dan konfigurasikan dari 'mymodule' var $ injector = angular.Injector ('mymodule'); // Ambil objek dari injektor dengan nama var servicea = $ injector.get ('serviceea'); // selalu benar karena cache instance $ injector.get ('servicea') === $ injector.get ('servicea'); // BENARTetapi X injektor yang benar -benar keren adalah dapat digunakan untuk memanggil metode dan jenis "instantiate". Fitur yang luar biasa ini adalah memungkinkan metode dan tipe untuk meminta sumber daya yang mereka andalkan, daripada mencarinya.
// Anda menulis fungsi seperti ini. function dosomething (serviceea, serviceB) {// lakukan sesuatu di sini. } // Angular menyediakan injektor untuk aplikasi Anda var $ injector = ...; ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// Hubungi fungsi dosomething (servicea, serviceB); // Di atas adalah metode lama tradisional ~ berikut adalah metode sudut berbicara tentang sapinya sendiri X/////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////// Cara keren untuk mendapatkan dependensi. // $ injector akan memasok argumen ke fungsi secara otomatis $ injector.invoke (dosomething); // Beginilah kerangka kerja memanggil fungsi AndaPerhatikan bahwa satu -satunya hal yang perlu kita tulis adalah fungsi kita, dan kita dapat mencantumkan sumber daya yang bergantung pada metode dalam argumen fungsi! Ketika fungsi panggilan sudut, itu akan menggunakan metode "panggilan" untuk secara otomatis mengisi agrumen fungsi.
Perhatikan bagaimana dependensi tercantum dalam konstruktor dalam contoh di bawah ini. Ketika NG-Controller memancing pengontrol, sumber daya ketergantungan akan secara otomatis disediakan. Tidak perlu membuat, mencari, atau membuat referensi injektor untuk memuat sumber daya ketergantungan.
<! Doctype html> <html lang = "zh-cn" ng-app = "timeExample"> <adept> <meta charset = "utf-8"> <itement> injektor </iteme> <style type = "text/css"> .ng-cloak {display: Tidak Ada; } </tyle> </head> <body> <v ng ng-controller = "clockctrl"> Waktu saat ini adalah: {{time.now}} </div> <script src = "../ angular -.0.1.js" type = "text/javascript"> </skrip <skrip type = "text/javascript"> "JavaScript"> </script lipt = "TEXT/JAVASLCRIPL", TEXTLAX/JAVASCRIPT "> </script lipt/script/javascript/javascript"> []). Factory ("myclock", function ($ timeout) {var time = {}; (function cick () {time.now = new date (). toString (); $ timeout (centang, 1000);}) (); waktu pengembalian;}); /** * * @param $ scope * @param myclock Ketergantungan myclock secara otomatis dimasukkan di sini! Lai * @constructor */ function clockctrl ($ scope, myclock) {$ scope.time = myclock; } </script> </body> </html>11. Namespace Angular
Untuk mencegah konflik nama, Angular akan menambahkan awalan $ ke nama objek. Tolong jangan gunakan $ awalan dalam kode Anda untuk menghindari konflik. (-_- !!)
Di atas adalah informasi tentang konsep AngularJS. Kami akan terus menambahkan artikel yang relevan di masa depan. Terima kasih atas dukungan Anda untuk situs ini!