Jalan menuju transformasi demo rangka kerja aplikasi web AngularUI_AngularJS

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

Salin kod Kod adalah seperti berikut:

//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

Kod adalah seperti berikut: 1 laluan asas => base_url() 2 Laluan halaman yang sepadan dengan cincang => Pengawal/Kaedah 3 Sembunyikan index.php /config/config.php $config['index_page'] = ''; //L29 ditetapkan kepada kosong

.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 , 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.