WebApp Framework-Learning AngularUI2 (Demo retrofit)

Objective: To apply the template of Angularui to "GUI Electric online"

The steps are as follows:

2. Modify the Demo interface by function table
3. Learn how Angularui loads all pages, and in order to set up a custom load template, find this section in Demo/demo.js

   //when # for/,/scroll and so on, request index.html in <base href= "" > + home.html pageApp. 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});});

5. Continue reading Demo.js's execution script
   1. Drag-and-drop items disappear
   2. Drag to toggle Picture
   3. Main controller
      1. L195 $rootScope. $on (' $routeChangeStart ', function () {}); and L199 $rootScope. $on (' $routeChangeSuccess ', function () {}), learn to use. $on () To bind events and change the hash of the event can trigger the code here, after comparison, found the same two basic methods. A different point is to trigger Routechangestart first, then trigger routechangesuccess.
      2. Scroll List page: Scroll bar to load data $scope. Scrollitems = Scrollitems; Scrollitems is a list array; Scroll to the bottom of the event (need to do a drop-down refresh)
      3. On the right side of the chat sidebar JSON data, show online or not online, for me temporarily do not have the ability to do chat function
      4. Form page

Change the original bootstrap template

1. There are two factors that determine the page load from step 2 above:

1 Base Path => base_url ()

2 hash corresponding page path = Controller/method

3 Hidden index.php

/config/config.php $config [' index_page '] = '; L29 set to NULL

. htaccess

Rewriteengine   on Rewritecond $1 !^ (lightapp|lightapp\.php|index\.php|public|robots\.txt)   #允许lightapp |  ^ (. *) $/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 modifying menu routes in Demo.js

2. Replace the resource path <?=__public__?>, copy 2 js,3 CSS files

3. Create a new Style,script directory to store JS and CSS for the project

4. Copy the font directory fonts to public

5. Copy the home.html,sidebar.html page to the view directory

Summary: At this point, GUI Electric online template on the application of Angularui. Record the next development plan:

1. Show my menu is logged in and not logged in (Register login screen)

2. Display the school Announcements News list, and details

WebApp Framework-Learning AngularUI2 (Demo retrofit)