The road to demo transformation of webapp framework AngularUI

The road to demo transformation of webapp framework AngularUI_AngularJS

WBOY

Release： 2016-05-16 16:25:19

Original

1187 people have browsed it

Purpose: Apply AngularUI templates to existing projects

The steps are as follows:

Click 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

Copy code The code is as follows:

//When # is /, /scroll, etc., request the page 
 of  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 the execution script of demo.js

Drag items disappear
Drag and drop to switch pictures
Main controller

L195 $rootScope.$on('$routeChangeStart', function(){}); and L199 $rootScope.$on('$routeChangeSuccess', function(){}); learn to use.$on() Binding events and changing hash events can trigger the code here. After comparison, we found that the two basic methods are the same. The difference is that routeChangeStart is triggered first, and then routeChangeSuccess is triggered.
Scroll list page: scroll bar loads data $scope.scrollItems = scrollItems; scrollItems is a list array; scroll to bottom event (requires pull-down refresh)
The json data in the chat sidebar on the right shows whether you are online or not. For me, I do not have the ability to use the chat function for the time being
Form page

Change the original bootstrap template

1. From step 2 above, we know that page loading is determined by two factors:

Copy code The code is as follows:

1 base path => base_url()

2 Page path corresponding to hash => 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 after cron

4 Modify the menu routing in demo.js

2. Replace the resource path , copy 2 js and 3 css files

3. Create a new style and script directory to store the js and css of the project

4. Copy the font directory fonts to public

5. Copy the home.html and sidebar.html pages to the view directory

Summary: At this point, the project template has applied angularUI.