Tujuan: Gunakan templat AngularUI pada projek sedia ada
Langkah-langkahnya adalah seperti berikut:
Klik menu untuk mengubah suai antara muka demo
Ketahui cara angularUI memuatkan semua halaman Untuk menetapkan templat pemuatan tersuai, cari perenggan ini dalam demo/demo.js
//Apabila # ialah /, /skrol, dsb., minta halaman
app.config(function($routeProvider) {
$routeProvider.when('/', {templateUrl: 'home.html', reloadOnSearch: false});
$routeProvider.when('/scroll', {templateUrl: 'scroll.html', reloadOnSearch: false});
$routeProvider.when('/toggle', {templateUrl: 'toggle.html', reloadOnSearch: false});
$routeProvider.when('/tabs', {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});
});
Teruskan membaca skrip pelaksanaan demo.js
Item seret hilang
Seret dan lepas untuk menukar gambar
Pengawal utama
L195 $rootScope.$on('$routeChangeStart', function(){}); dan L199 $rootScope.$on('$routeChangeSuccess', function(){}); Peristiwa mengikat dan menukar peristiwa cincang boleh mencetuskan kod di sini Selepas perbandingan, kami mendapati bahawa kedua-dua kaedah asas adalah sama. Perbezaannya ialah routeChangeStart dicetuskan dahulu, dan kemudian routeChangeSuccess dicetuskan.
Halaman senarai tatal: bar tatal memuatkan data $scope.scrollItems = scrollItems;
Data json dalam bar sisi sembang di sebelah kanan menunjukkan sama ada anda berada dalam talian atau tidak, bagi saya, saya tidak mempunyai keupayaan untuk menggunakan fungsi sembang buat masa ini
Halaman borang
Tukar templat bootstrap asal
1 Daripada langkah 2 di atas, kita tahu bahawa pemuatan halaman ditentukan oleh dua faktor:
Salin kod
.htaccess
RewriteEnine pada
RewriteCond $1 !^(lightapp|lightapp.php|index.php|public|robots.txt) #Benarkan lightapp|lightapp.php mengakses
RewriteRule ^(.*)$ /index.php/$1 [L]
config.yaml
- tulis semula: if( !is_file() && !is_dir()) pergi ke "index.php?%{QUERY_STRING}"
# Jika url itu bukan fail mahupun direktori, lompat ke index.php?%{QUERY_STRING} dan tidak boleh diletakkan selepas cron
4 Ubah suai penghalaan menu dalam demo.js
2. Gantikan laluan sumber =__PUBLIC__?>, salin 2 js dan 3 fail css
3. Cipta direktori gaya dan skrip baharu untuk menyimpan js dan css projek
4. Salin fon direktori fon kepada awam
5. Salin halaman home.html dan sidebar.html ke direktori paparan
Ringkasan: Pada ketika ini, templat projek telah menggunakan angularUI.