Path to demo transformation of webapp framework AngularUI _ AngularJS

This article mainly introduces the demo transformation of the webapp framework AngularUI. For more information, see: apply AngularUI templates to existing projects.

The procedure is as follows:

Modify demo page by menu

Learn how to load all pages in angularUI. in order to set a custom loading Template, find this section in demo/demo. js.

The code is as follows:

// When # is/,/scrollequality, request index.html+ Home.html page
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 ('/droplow', {templateUrl: 'dropdown.html', reloadOnSearch: false });
$ RouteProvider. when ('/drag', {templateUrl: 'drag.html', reloadOnSearch: false });
$ RouteProvider. when ('/carousel', {templateUrl: 'Your usel.html ', reloadOnSearch: false });
});

Continue to read the execution script of demo. js

Drag items to disappear
Drag to switch images
Main controller

L195 $ rootScope. $ on ('$ routeChangeStart', function () {}); and L199 $ rootScope. $ on ('$ routeChangeSuccess', function () {}); learned to use. $ on () to bind events and change the hash event can trigger the code here. after comparison, we find 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 to load data $ scope. scrollItems = scrollItems; scrollItems is a list array; scroll to the bottom event (pull-down refresh is required)
The json data in the chat column on the right shows whether the data is online or not. for me, this function is not available for chatting.
Form page

Change the original bootstrap template

1. the following two factors are determined by Step 2:

The code is as follows:

1 base path => base_url ()
2. page path corresponding to hash => controller/method
3. hide index. php
/Config. php $ config ['index _ page'] = ''; // Set L29 to null.
. Htaccess
RewriteEngine on
RewriteCond $1! ^ (Lightapp | lightapp \. php | index \. php | public | robots \. txt) # Allow lightapp | lightapp. php 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} cannot be placed behind cron
4. modify menu routes in demo. js

2. replace the resource path <? =/Public?>, Copy 2 js files and 3 css files

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

4. copy the fonts directory to the public directory.

5.beihome.html, sidebar.html page to view Directory

Conclusion: angularUI is applied to the project template.