Gagasan inti dari sudut adalah mendorong semuanya melalui data, dan yang lainnya adalah perpanjangan data.
Untuk menerapkan gagasan bahwa semuanya adalah objek, dapat dikatakan dalam sudut bahwa semuanya adalah data.
Tentang konstruksi proyek
(1) Persyaratan dan yeoman
Saat pertama kali masuk atau menggunakan Angular, Anda akan selalu bingung dengan pertanyaan serupa. Jawaban praktis saya adalah Anda tidak perlu membutuhkan atau yeoman. Yang pertama tidak digunakan karena Angular sendiri memiliki implementasi modul. Yang terakhir adalah karena struktur organisasi sudut dan konstruksi proyek sama sekali tidak perlu menjadi sangat rumit. Cukup tulis atau tarik proyek benih di GitHub.
(2) Cara mengatur struktur proyek
Masalah ini agak tidak berguna karena bervariasi sepenuhnya dari orang ke orang ke proyek. Saya pribadi merekomendasikan dua struktur organisasi, satu sesuai dengan fungsi kode, yaitu, pengontrol ditempatkan dalam satu folder dan layanan ditempatkan dalam satu folder. Yang lain mengikuti fungsi yang diimplementasikan. Misalnya, pengguna menempatkan templat, layanan, dan pengontrol yang sesuai di folder pengguna.
Keduanya baik -baik saja, dan dari perspektif pemeliharaan, yang kedua akan lebih baik.
(3) Divisi Pengontrol dan Layanan
Di sini, pengontrol biasanya satu pengontrol pada halaman. Jika halaman memiliki bagian yang sama, bagian publik selalu menggunakan pengontrol. Layanan harus dibagi menjadi dua bagian, satu adalah layanan yang berinteraksi dengan data server, dan yang lainnya adalah beberapa konten umum fungsional, yang menempatkan beberapa layanan yang dapat digunakan kembali yang ditulis sendiri, mirip dengan notify, dll.
Adapun apakah layanan harus dibagi lebih lanjut sesuai dengan fungsi dan modul, itu tergantung pada proyek.
(4) Penggunaan plug-in dan pustaka sudut
Jelas tidak realistis bagi suatu proyek untuk mendapatkan barang-barang siap pakai secara online, tetapi bahkan lebih tidak realistis untuk menulis semuanya sendiri. Banyak plug-in dalam sudut dikembangkan oleh tim Angular atau beberapa orang yang dikemas dengan plug-in jQuery. Tampilan saya pada plug-in sangat sederhana. Jika Anda menggunakannya, Anda dapat menggunakannya sesegera mungkin. Jika Anda tidak dapat memenuhi kebutuhan, Anda dapat menulisnya sendiri atau memperbaikinya pada plug-in yang ada.
Untuk plug-in yang tidak dapat Anda tangani selama beberapa jam debugging, tolong dengarkan saran saya dan menyerah. Sebagian besar plug-in adalah plug-in UI, jadi Anda tidak perlu mengejar kompleksitas. Terkadang kontrol HTML sederhana juga memiliki keindahan sederhana.
Jika Anda menghadapi konflik plugin sudut, terutama plugin UI, Anda harus menyerahkan salah satunya dalam kebanyakan kasus, seperti Angular-UI dan strap sudut.
Tip Penggunaan
Memasukkan teks utama di bawah ini, saya akan mencantumkan beberapa teknik yang saya gunakan dalam proses menggunakan Angular, dan akan mencantumkannya satu per satu dalam bentuk adegan. Saya tidak akan menjelaskan beberapa konsep dasar sudut di sini. Artikel ini adalah hal yang terampil, bukan tutorial dasar.
(1) Konflik Flask antara "{{}}" di Angular dan Python
Dalam templat yang digunakan oleh Flask Python, pengikatan data juga dilewatkan melalui dua kawat gigi "{", yang bertentangan dengan pengikatan data Angular. Ada dua solusi untuk ini. Salah satunya adalah untuk memodifikasi tanda pengikatan sudut, dan yang lainnya adalah memodifikasi tanda pengikatan flask. Kedua solusi diberikan di sini.
Ubah Angular:
$ interpolateProvider.startsymbol ('{[{'). endsymbol ('}]}');
// Tambahkan hanya kalimat ini untuk mengonfigurasi dan memasukkannya ke dalam modul rute. Di sini Anda mengubah sudut asli {{}} mengikat ke {[{}]} mengikat ke {[{}]} mengikat.
Ubah Flask:
kelas customflask (flask): jinja_options = flask.jinja_options.copy () jinja_options.update (dict (block_start_string = '{%', block_end_string = '%}', variable_start_string = '{#', variabel = '%}', variable_start_string = '{#', variabel = variabel = variabel = variabel = variabel = '{#', variabel = '{', variabel = '{', variabel = ' comment_start_string = '<#', comment_end_string = '#>',)) App = CustomFlask (__ name__, instance_path = '/web')Di sini saya merekomendasikan memodifikasi labu, karena setelah menggunakan sudut, ujung depan dan belakang dipisahkan. Template jinjia Flask tidak lagi diperlukan. Pada saat yang sama, jika Anda memodifikasi tag pengikat sudut, kontrol dan perpustakaan lainnya akan memiliki masalah.
(2) Hapus URL selalu default ke "#"
Saat mengatur rute, aktifkan mode HTML5.
angular.module ('router', ['ngroute']). config (['$ routeProvider', '$ locationProvider', function ($ routeProvider, $ locationProvider) {$ locationProvider.html5mode (true); // Setel kalimat ini}]);(3) ng-klik = "ekspresi" dan instruksi serupa, bagaimana menulis beberapa ekspresi dalam ekspresi?
Misalnya, jika saya ingin menetapkan nilai ke 2 variabel dalam klik ng, saya dapat membaginya melalui ";" titik koma:
<a ng-click = "obja = 1; objb = 2"> </a>
(4) $ Watch tidak berpengaruh atau hanya berlaku sekali
Secara umum, situasi ini akan muncul ketika mendengarkan string atau angka, $ scope. $ Watch ("name", function () {}). Itu tidak berlaku atau hanya berlaku sekali. Solusinya adalah bahwa $ Watch mendengarkan suatu objek sebanyak mungkin, dan lampirkan nilai yang ingin Anda dengarkan dalam suatu objek.
Saat Anda menggunakan modal di Angular-UI, ini lebih jelas. Alasan spesifik adalah karena warisan $ cakupan. Karena modal setara dengan menciptakan ruang lingkup lain di pengontrol halaman saat ini, tidak mungkin untuk mengambil dan melacak rantai prototipe untuk literal. Jika Anda ingin menyelesaikannya, Anda harus memiliki objek untuk mencapai pengikatan refresh data di ruang lingkup orangtua-anak melalui rantai prototipe.
(5) Saya harap konten NG-View ditampilkan di seluruh halaman
Biasanya suatu halaman mungkin memiliki menu atas atau bilah samping, bagian tetap seperti itu, dan kemudian setiap rute mengubah templat NG-view. Jika halaman ingin seluruh halaman untuk ditampilkan sepenuhnya, itu tidak termasuk bagian tetap seperti menu top.
Berikut ini biasanya template.html yang ditampilkan oleh index.html dan peninjau NG. Menu dan bilah samping terletak di index.html. Tampilan mereka disembunyikan dengan mengikat variabel ke NG-IF.
Jika halaman perlu ditampilkan sepenuhnya dengan sendirinya dan tidak menampilkan sidebar, maka pesan dikirim dalam pengontrolnya melalui $ scope. $ Emit, dan pengontrol halaman indeks mendengarkan pesan melalui $ scope. $ On. Setelah pesan didengar, variabel yang mengontrol sidebar yang terlihat dan tersembunyi diubah.
Anda juga dapat menggunakan layanan untuk mengontrol variabel global, dan rekomendasi pribadi masih melalui penyiaran pesan.
(6) Ingatlah untuk menggunakan ng-if bukan-show ng
Ini adalah lubang kecil sudut, atau dapat dikatakan sebagai lubang yang tidak besar atau kecil. Beberapa data daftar panjang dapat ditampilkan secara default tersembunyi dan mengklik untuk ditampilkan. Bagian konten yang dapat mengontrol yang terlihat dan tersembunyi ini juga akan disertai dengan banyak pengikatan data. Ini sangat mempengaruhi kinerja saat merender halaman.
Ambil daftar. Misalnya, Angular biasanya merekomendasikan bahwa halaman tidak lebih dari 2.000 pengikatan data. Jika ada halaman yang secara langsung mengikat 2.000 model, dan kemudian Anda memuatnya, Anda akan menemukan bahwa itu sangat macet. Jika Anda mengatur setiap 100 model ke NG-Show, itu tidak ditampilkan secara default, Anda akan menemukan bahwa itu masih sangat macet.
Kemudian Anda mengganti semua NG-Show dengan NG-IF, dan Anda akan menemukan bahwa kinerjanya langsung cepat seperti dua aplikasi. Alasannya adalah bahwa NG-Show masih akan mengeksekusi semua binding, dan NG-IF akan menjalankan binding ketika sama dengan yang benar, yaitu, itu akan mengeksekusi binding saat ditampilkan. Ini akan sangat meningkatkan kinerja. Saya menggunakan modifikasi sederhana ini sebelumnya, dan halaman dimuat sekitar 10 kali lebih cepat.
Jadi, ketika Anda dapat menggunakan NG-IF, gunakan itu alih-alih semua NG-Show dan NG-Hide.
(7) Tentang ng-bind-html
Biasanya, data terikat pada elemen HTML, dan NG-bind sudah cukup, tetapi dalam beberapa situasi, apa yang perlu terikat bukan data biasa, tetapi HTML. Maka NG-Bind tidak cukup. Anda perlu menggunakan NG-bind-HTML, yang akan menghasilkan konten sebagai format HTML. Misalnya, jika Anda ingin mengeluarkan HTML dengan kelas, maka gunakan NG-bind-HTML, dan kerja sama NgSanitize diperlukan, dan file yang sesuai perlu diperkenalkan.
(8) Dapatkan hasilnya setelah filter data NG-re-repeat
Ini umumnya digunakan saat mencari, seperti beberapa data NG-repeat membentuk daftar. Kemudian saring bidang, dan sekarang Anda perlu mendapatkan hasil setelah filter, ada 2 cara.
Satu ditulis dalam html ng-repeat seperti ini:
ng-repeat = "Food in foodcategory._displayfoods = (foodcategory.foods | filter: {'name': searchoBj.foodfilter} | orderby: food.sort_order)"
Dengan cara ini, _DisplayFoods adalah hasil tampilan akhir setelah filter. Cara lain adalah dengan menggunakan dua set data, satu set ditulis dalam pengontrol, dan kemudian filter dan orderby dioperasikan dalam pengontrol. Hasil akhir digunakan untuk memperbaiki NG.
Metode pertama lebih nyaman, sedangkan metode kedua lebih baik dan kinerjanya bagus.
(9) Ng-Class dan NG-Style menetapkan nilai dengan menilai
Tentukan apakah akan menerapkan kelas tertentu dan gaya yang berbeda berdasarkan nilai variabel.
ng-class = "{'state-error' :! foodform.foodstock. $ valid}"
ng-style = "{color: i.color == '' || i.name == 'live'? 'default': '#ffff'}"
(10) Verifikasi bentuk mengambil input sebagai contoh
Bentuk sudut dapat diperiksa melalui atribut input HTML5. Di sini, ini terutama dikunci melalui formulir dan atribut nama input. FormName.InputName. $ Valid menunjukkan apakah ruang di mana nama inputName melewati verifikasi atributnya sendiri.
(11) $ janji untuk $ sumber daya dan $ http
$ q.all ([resource.query (). $ janji, sumber daya2. foodfactory.food.get ({id: result.id}). $ janji.then (function (data) {});});Ini tidak dijelaskan, bacalah saja secara langsung. Perhatikan bahwa janji $ http perlu dikembalikan secara manual, jadi secara umum, itu melewati $ sumber daya.
(12) Hanya satu properti di $ Watch yang mendengarkan
Tetapkan parameter ketiga dari $ Watch ke True to Deep Watch. Namun, kadang -kadang Anda tidak ingin atau perlu mendengarkan semua properti koleksi. Pantau saja satu atau beberapa dari mereka, meskipun Anda dapat mengulang $ tonton melalui loop, jelas terlalu membuat frustrasi.
Melalui metode penulisan berikut, Anda dapat memantau properti objek tunggal dari suatu koleksi.
$ scope.people = [{"groupName": "g1", "jussion": [{"id": 1, "name": "bill"}, {"id": 2, "name": "bill2"}]}, {"groupName": "g2", "bertias": [{"ID": ":": ":": ":": ":": "": "{" {"GroupName": "G2", "ID": "ID": "ID": "ID": "ID": "ID": "ID": "ID": "ID": "ID": "ID": "ID": "ID": "ID": "ID": "ID": "ID": [{"ID": [{"ID": " "bill4"}]}] $ scope. $ watch (function ($ scope) {return $ scope.people.map (function (obj) {return obj.persions.map (function (g) {return g.name});});} function (newVal) {$ scope.count.count.cope, $ scope. BENAR);(13) Debounce Anti-Shake Treatment
Ini sangat berguna untuk pemrosesan keberangkatan yang sering dan cocok untuk beberapa skenario seperti NG-Change dan $ Watch. Misalnya, ketika pencarian kata kunci dihilangkan, $ debounce dienkapsulasi sebagai layanan, dan antarmuka dipanggil secara langsung. Kode: http://jsfiddle.net/warspawn/6k7kd/
(14) Temukan lokasi dengan cepat
Secara umum, halaman dapat dikombinasikan dengan kode JS untuk mencapai posisi cepat melalui formulir <a id = "Bottom"> </a>. Dalam Angular, ini juga diimplementasikan melalui prinsip -prinsip yang sama, dan kodenya adalah sebagai berikut:
var old = $ location.hash (); $ location.hash ('Batchmenu-bottom'); $ anchorscroll (); $ location.hash (lama);Ini karena lokasi langsung. Kerusakan akan menyebabkan perubahan URL dan lompatan halaman, sehingga kode untuk mencegah melompat ditambahkan.
Saya telah merangkum begitu banyak untuk saat ini. Banyak hal dicari informasi dan dipraktikkan sendiri. Saya harap mereka akan membantu TX yang Anda butuhkan. Jika ada hal baru di masa depan, saya akan terus menulisnya.
Di atas adalah ringkasan keterampilan aplikasi sudut. Kami akan terus menambah dan mengatur artikel yang relevan di masa depan. Terima kasih atas dukungan Anda untuk situs ini!