Purpose: Apply AngularUI templates to existing projects
The steps are as follows:
Press the menu to modify the demo interface
Learn how angularUI loads all pages. In order to set a custom loading template, find this paragraph in demo/demo.js
The code copy is as follows:
//When # is /,/scroll, etc., request the page of <base href=""> + home.html in index.html
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});
});
Continue reading demo.js' execution script
Drag item disappears
Drag and drop to switch pictures
Main controller
L195 $rootScope.$on('$routeChangeStart', function(){}); and L199 $rootScope.$on('$routeChangeSuccess', function(){}); Learning to use .$on() to bind events and change hash events can trigger the code here. After comparison, I found that the two basic methods are the same. The difference is that routeChangeStart is triggered first, and routeChangeSuccess is triggered later.
Scroll List Page: Scroll bar loads data $scope.scrollItems = scrollItems; scrollItems is an array of lists; scroll to the bottom event (requires a pull-down refresh)
The json data in the chat sidebar on the right shows whether it is online or not. For me, I don't have the ability to do chat function for the time being
Form page
Change the original bootstrap template
1. According to step 2 above, there are two factors that determine the loading of the page:
The code copy is as follows:
1 base path => base_url()
2 hash corresponding page path => controller/method
3 Hide index.php
/config/config.php $config['index_page'] = ''; //L29 is set to empty
.htaccess
RewriteEngine on
RewriteCond $1 !^(lightapp|lightapp/.php|index/.php|public|robots/.txt) #Allow lightapp|lightapp.php to access
RewriteRule ^(.*)$ /index.php/$1 [L]
config.yaml
- rewrite: if( !is_file() && !is_dir()) goto "index.php?%{QUERY_STRING}"
# If the url is neither a file nor a directory, jump to index.php?%{QUERY_STRING} and cannot be placed behind cron
4 Modify the menu route in demo.js
2. Replace resource path <?=__PUBLIC__?>, copy 2 js and 3 css files
3. Create a new style and script directory to store the project's js and css
4. Copy the font directory fonts to public
5. Copy the home.html, sidebar.html page to the view directory
Summary: At this point, the project template has angularUI applied.