WebApp Framework-Learning AngularUI2 (Demo retrofit)

Source: Internet
Author: User

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

The steps are as follows:

  1. Modify the Demo interface by function table
  2. 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});});
  3. 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)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.