TUJUAN: Menerapkan template Angularui ke proyek yang ada
Langkah -langkahnya adalah sebagai berikut:
Tekan menu untuk memodifikasi antarmuka demo
Pelajari bagaimana Angularui memuat semua halaman. Untuk mengatur template pemuatan khusus, temukan paragraf ini dalam demo/demo.js
Salinan kode adalah sebagai berikut:
// Saat # is/,/gulir, dll., Minta halaman <base href = ""> + home.html di index.html
app.config (function ($ routeProvider) {
$ routeProvider.when ('/', {templateUrl: 'home.html', reloadonSearch: false});
$ routeProvider.when ('/gulir', {templateUrl: 'scroll.html', reloadonSearch: false});
$ routeProvider.when ('/toggle', {templateUrl: 'toggle.html', reloadonSearch: false});
$ routeProvider.when ('/tab', {templateUrl: 'tabs.html', reloadonSearch: false});
$ routeProvider.when ('/Accordion', {TemplateUrl: 'Accordion.html', ReloadonSearch: false});
$ routeProvider.when ('/overlay', {templateUrl: 'overlay.html', reloadonSearch: false});
$ routeProvider.when ('/forms', {templateUrl: 'forms.html', reloadonSearch: false});
$ routeProvider.when ('/dropdown', {templateUrl: 'dropdown.html', reloadonSearch: false});
$ routeProvider.when ('/drag', {templateUrl: 'drag.html', reloadonSearch: false});
$ routeProvider.when ('/carousel', {templateUrl: 'carousel.html', reloadonSearch: false});
});
Lanjutkan membaca skrip eksekusi demo.js
Seret item menghilang
Seret dan lepas untuk beralih gambar
Pengontrol utama
L195 $ rootscope. $ On ('$ routeChangestArt', function () {}); dan l199 $ rootscope. $ on ('$ routeChangeSuccess', function () {}); Belajar menggunakan. $ On () untuk mengikat acara dan mengubah acara hash dapat memicu kode di sini. Setelah perbandingan, saya menemukan bahwa dua metode dasar adalah sama. Perbedaannya adalah bahwa RouteChangestArt dipicu terlebih dahulu, dan routechangesuccess dipicu kemudian.
Halaman Daftar Gulir: Gulir memuat data $ scope.scrollitems = scrollItems; ScrollItems adalah array daftar; Gulir ke acara bawah (membutuhkan penyegaran pull-down)
Data JSON di sidebar obrolan di sebelah kanan menunjukkan apakah itu online atau tidak. Bagi saya, saya tidak memiliki kemampuan untuk melakukan fungsi obrolan untuk saat ini
Halaman formulir
Ubah Template Bootstrap Asli
1. Menurut langkah 2 di atas, ada dua faktor yang menentukan pemuatan halaman:
Salinan kode adalah sebagai berikut:
1 Jalur dasar => base_url ()
2 Hash Pacp Path => Controller/Metode
3 Sembunyikan index.php
/config/config.php $ config ['index_page'] = ''; // l29 diatur ke kosong
.htaccess
Menulis ulang
REWRITECOND $ 1!^(LightApp | LightApp/.PHP | Index/.php | Publik | Robot/.txt) #Anallow Lightapp | Lightapp.php untuk diakses
Penulisan ulang ^(.*) $ /Index.php/$1 [l]
config.yaml
- Tulis ulang: if (! is_file () &&! is_dir ()) goto "index.php?%{query_string}"
# Jika URL bukanlah file atau direktori, lompat ke index.php?%{Query_string} dan tidak dapat ditempatkan di belakang cron
4 Ubah rute menu di demo.js
2. Ganti Jalur Sumber Daya <? = __ Publik __?>, Salin 2 JS dan 3 file CSS
3. Buat direktori gaya dan skrip baru untuk menyimpan JS dan CSS proyek
4. Salin font direktori font ke publik
5. Salin halaman home.html, sidebar.html ke direktori tampilan
Ringkasan: Pada titik ini, templat proyek telah diterapkan Angularui.