ANGULARJS implementation of single page application principle-routing (route)

ANGULARJS implementation of single page application principle-routing (route)

Routing: tells you a path to a specific page

Http://127.0.0.1/index.html#/start

Http://127.0.0.1/index.html#/main

#/start <=> start.html

#/main <=> main.html

The principle of page switching in a spa app:

(1) Use JS to parse the current page address Location.hash ()

(2) Find the dictionary and find the true page name for the specified routing address

(3) Initiate an asynchronous Ajax request to read the contents of the target page and load it to the current page at the specified location

Routing modules in Angularjs-for "pseudo-page transition effects" in spa applications

Steps:

(1) Introduction of Angular.js and Angular-route.js in index.html

(2) the page declares a container with Ngview directive: <div ng-view></div>

(3) Create Module declaration module dependent on Ngroute module

Angular.module (' module name ', [' ngroute ', ' ng '])

(4) Configure the mapping information for the routing address:

. config (function ($routeProvider) {

$routeProvider. When ('/routing address ', {templateurl: ' pseudo page address '})

} )

(5) Test: Enter http://...../index.html#/routing address in the address bar

Love Card (Shenzhen) Management Co., Ltd.

Share every moment of a wonderful

: Icafeyojoy

Weibo:Http://weibo.com/iCafeYOJOY

Official website:www.icafe.im

ANGULARJS implementation of single page application principle-routing (route)