Saya bosan di rumah, dan kebetulan menemukan tutorial tentang sudut online. Saya belajar dua modul sudut, UI-router dan NG-grid, dan meniru dan membuat hal kecil.
Kode telah diunggah ke Github, dan alamatnya ada di sini https://github.com/wwervin72/angular.
Teman yang tertarik bisa melihatnya. Kemudian di sini pertama -tama kita memahami penggunaan kedua modul ini.
Mari kita bicara tentang modul UI-Router, yang terutama digunakan untuk mengimplementasikan perutean tingkat dalam. Faktanya, Angular memiliki instruksi bawaan NG-route. Jika tidak ada masalah bersarang dalam proyek, akan cukup nyaman untuk menggunakan instruksi ini untuk mencapai lompatan di antara halaman, tetapi kekurangannya adalah bahwa ia tidak memiliki cara untuk menggunakan rute bersarang yang dalam. Jadi pertama -tama, jika kita ingin menggunakan modul ini, kita perlu mengunduhnya.
Alamat unduhan ada di sini http://www.bootcdn.cn/angular-ui-router/.
Setelah mengunduh, kami dapat mengimpornya ke proyek kami. Harap dicatat di sini bahwa karena modular ini didasarkan pada Angular, kita perlu mengimpor file JS Angular sebelum ini. Ini dapat diunduh di situs web resmi Angular.
Kemudian setelah semua persiapan di atas dilakukan, kita dapat menulis kode kita ditulis tangan.
Bagian html
<div> <div ui-view> </div> </div>
Berikut adalah satu hal yang perlu dicatat bahwa atribut yang ditambahkan dalam DIV tidak lagi NG-View, tetapi UI-View.
Bagian JS
var app = angular.module ('app', ['ui.router', 'LoginModel', 'listModel']); app.config (function ($ stateProvider, $ urlrouteProvider) {$ urlrouteProvider.otherwise ('/index'); $ stateProvider. 'tpls/start.html'}) .state ('register', {url: '/register', templateUrl: 'tpls/register.html'}) .state ('main', {url: '/main {positionType: [0.9] {1.5}', tampilan {PositionType: [0.9] {1.5} ',' 'tpls/main.html'}, 'typelist@main': {templateUrl: 'tpls/typelist.html'}, 'tbhero@main': {templateUrl: 'tpls/tbhero.html'}}}). 'tpls/addhero.html'}) .state ('find', {url: '/findpwd', templateUrl: 'tpls/findpwd.html'}) .state ('detail', {url: '/detail/: id', templateurl: 'tpls/detail/detail'/detail), tplateurl: 'tpls/tpls/detail' h)Ada tiga tempat untuk memperhatikan:
1. Saat bersarang, lapisan terluar saya adalah bagian utama, dan kemudian bagian typelist dan tbhero bersarang di dalam. Kita perlu memperhatikan metode penulisan di sini.
2. Ketika kita perlu membuka konten yang berbeda sesuai dengan pilihan, kita perlu meneruskan parameter ke halaman berikutnya. Berikut adalah bagian detailnya, dan kami juga perlu lebih memperhatikan metode penulisan di sini.
3. Ketika kita menggunakan Angular.module untuk membuat aplikasi aplikasi, kita perlu mengimpor modul UI.Router di dalamnya, dan beberapa modul yang kita buat sendiri juga perlu mengimpornya di sini.
4. Kami menggunakan $ StateProvider untuk mengonfigurasi rute, bukan $ routeProvider, dan negara yang digunakan di sini alih -alih kapan.
Setelah perutean dikonfigurasi, sisanya adalah menulis kode untuk setiap bagian TPL. Saya tidak akan terlalu memperkenalkannya di sini. Hal terpenting di sini adalah konfigurasi perutean.
Oke, mari kita lihat penggunaan NG-grid. Berikut adalah alamat unduhan http://www.bootcdn.cn/ng-grid/.
Bagian html
Bagian utama
<dv> <div ui-view = "typelist"> </div> <div ui-view = "tbhero"> </div> </div>
Bagian Typelist
<dv> <div> <div> <a href = "javascript: void (0);"> tipe penentuan posisi pahlawan </a> <a ui-sref = "main ({positionType: 0})"> Semua penempatan </a> <a ui-sref = "main ({positionType: 1})"> </a> ui-sref = "main ({positionType: 2})"> Jalur tengah </a> <a ui-sref = "main ({positionType: 3})"> Top lane </a> <a ui-sref = "Main ({PositionType: 4})"> Jungler </a> <a Ui> "{{{positiontype: 4})"> Jungler </a> <a Ui> </a "{position =" Position: 4}) "> Jungler </a> </a> <a Ui>" position = "Position:" Position: "Position:" Position: "Position:" Position: " </div> </div> </div>bagian tbhero
<Div ng-controller = "listCtrl"> <viv> <div> <button ui-sref = "addhero ()"> Tambahkan pahlawan </button> <button ui-sref = "index ()"> Keluar </butpon> </div> <vorm> <input type = "text" ng-nodel = "filterptions." </form> </div> </div> <div> <div> <div ng-grid = "gridoptions"> </div> </div> </div> </div> </div> </div>
Bagian JS
var listModel = angular.module ('listModel', ['ngGrid']); listModel.controller ('listctrl', ['$ scope', '$ http', '$ state', $ stateparams ', function ($ scope, $ http, $ state, $ stateparams) {$ scopeons $ {$ http, $ state, $ stateparams) {$ sceagions. [5,15,20], Halaman: 5, CurrentPage: 1}; searchText.TolowerCase (); $ http.get ('data/hero.php? param ='+$ stateParams.positionType) .success (function (data) {var data = data.filter (function) {return json.stringify (item) .indexof (searchText)! = -1; }); Data) {Data.foreach (Function (item, i) {item.index = i+1;}); $ scope.getDates ($ scope.pagingoptions.pagesize, $ scope.pagingoptions.currentpage); function () {$ scope.getDates ($ scope.pagingoptions.pagesize, $ scope.pagingoptions.currentpage, $ scope.filteroptions.filtertext); false, // Apakah mungkin untuk memilih baris yang diaktifkancellselection: true, // Apakah mungkin untuk memilih sel yang diaktifkancelledit: false, // Apakah mungkin untuk memodifikasi konten yang diaktifkan peminat: true, // Apakah itu terkunci pada tabel: {{field: 'index', // Berikut adalah nama atribut dalam lebar data: 80, pindaon: 'nomor': 'NOMER', 'NOMER', OF NOMER, 'NOMER', OF NOMER: 'NOMER', OF TABUNG: " true, sortable: true // Apakah mungkin untuk mengurutkan}, {field: 'name', displayname: 'name', width: 120, sortable: true, pinnable: true}, {field: 'alias', displayname: 'alias', displayname: 'alias', DisplayName: 'alias', displaynable: displayname: 'alias', DisplayName: 'Alias', Displayname: 'well', wore: 60, 'alias', DisplayName: 'ALIAS', DISPLAYNABLE: 'LAYAN }, {field: 'position', displayName: 'position', lebar: 70, sortable: true, pinnable: true}, {field: 'equip', displayname: 'equip', width: 500, sortable: true, pinnable: true}, {field: 'id', displayname: 'detail strategi', fales: a fales, founde, founde, found ui-sref="detail({id:row.getProperty(col.field)})" id="{{row.getProperty(col.field)}}">Details</a></div>' } ], enablePaging: true, //Can you turn the page showFooter: true, //Do you display the end of the table totalServerItems: 'totalServerItems', //Total Jumlah PagingOptions Data: $ scope.pagingoptions, // Page Part FilterOptions: $ scope.filteroptions // Bagian filter data}}])Yang paling penting di sini adalah $ scope.gridoptions. Pada saat yang sama, kita perlu lebih memperhatikan metode penulisan parameter dalam panduan terperinci terakhir.
Berikut beberapa rendering:
Berikut beberapa rendering:
Selain itu, saya tidak akan memperkenalkan isi verifikasi bentuk sudut, layanan, wizard, php, dll. Di sini. Jika ada yang salah dengan tulisan itu, saya akan meninggalkan pesan untuk memberi tahu Anda, terima kasih ^_ ^.
Analisis singkat di atas dari modul UI-Router dan NG-grid di AngularJS adalah semua konten yang telah saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.