Implement a single page application with Angularjs

Take a look at the route of angular, use it to make a very simple single page application, record a bit.

By the way, the advantage is that the page changes without needing to refresh, and each page shows different data. This is especially handy when using template pages.

An example

1. Project structure:

   Index.html

   Script.js

   ------pages

   ---------home.html

   ---------about.html

   ---------cantact.html

2. Project Code

   <1>.index.html

<! doctype html>
       <2>.script.js 
 
Var appmodule = angular.module (' Scotchapp ',  [' Ngroute ']);// configure our  Routesappmodule.config (function ($routeProvider)  {$routeProvider// route for the home  page        .when (' Home ', {             templateUrl :  ' pages/home.html ',             controller  :  ' Maincontroller '          })         // route for  the about page        .when ('/about ', {         templateUrl :  ' pages/about.html ',         controller  :  ' Aboutcontroller '          })         // route for the contact page         .when ('/contact ', {             templateUrl :  ' pages/contact.html ',             controller  :  ' Contactcontroller '          })         .otherwise (' Home ');}); Var mainctrl = function ($scope) {$scope .message =  ' everyone come and  See how good i look! ';} Var aboutctrl = function ($scope) {$scope .message =  ' look! i am an  About page. ';} Var contactctrl = function ($scope) {$scope .message =  ' contact us! jk.  This is just a demo. ';} Appmodule.controller (' Maincontroller ',  mainctrl); Appmodule.controller (' Aboutcontroller ',  aboutctrl); Appmodule.controller (' Contactcontroller ',  Contactctrl);
<3> Run Effect:
Two problems encountered:

 
 

  
  
 
   
Error occurred: Cross origin requests is only supported for protocol schemes:http, data, Chrome, chrome-extension, HTTPS, Chrome-ex Tension-resource.
Workaround: Because I am open in the form of a file, due to Chrome's setup problem, only HTTP, data, Chrome, chrome-extension, HTTPS, chrome-extension-resource These formats are supported, This problem occurs because file:///xxxx.html is not supported in this format.
Method One: Start the Chrom parameter
 
   
--allow-file-access-from-files
Method Two: Start tomcat, throw all your files into the WebApps, and then access them in the browser.
 
  
 
 
Three about removing the # number in a URL
1. In config, add:
$locationProvider. Html5mode (True);
2. In HTML, set the base, for example:
<base href= "/xxxxwebapp/" >
3. Remove the # of the href.
= = "There is a problem: When you refresh the page, an error occurs.
Original source: http://my.oschina.net/pingjiangyetan/blog/412289
Implement a single page application with Angularjs