ANGULARJS Notes---routing views

Recently, some colleagues mentioned about the use of ng-view, in fact, I do not understand, because recently has been doing angularjs rearch, so I saw some of the foreign blog about Ng-view. Did the ASP. MVC4 know, we will have a corresponding controller and views, there is a routerconfig. In fact, there are similar things in Angularjs. Below I will build a ANGULARJS demo from the ASP. NET-based MVC framework.

A. Create a file directory:

A. Controller folder to put Ng-controller code

B.js placing an application's external JS file

C. Views place the displayed HTML file

D. index.html Place Default page, Rounteconfig set route

Two. How to set up a route

2.1 Set the route.

Implemented by $routeprovider, when represents the current URI address, Templateuri actually loads the displayed HTML address, and the controller is the Ng-controller module that corresponds to the loaded template.

angular. Module ('MyApp', [    'Ngroute']). config (function ($routeProvider) {$routeProvider. When ('/', {templateurl:'views/main.html', Controller:'Mainctrl'}). When ('/about', {templateurl:'views/about.html', Controller:'Aboutctrl'}). Otherwise ({redirectto:'/'             }); });

2.2 Index.html Writing

This page implements the jump for page/main and/about. The above routeconfig.js file will be monitored to the URI that is currently accessed and then loaded opposite the Templateuri template displayed below

notes:1. Note referencing the Angular-route.js file

2. Note the link please use Ng-href, remember not to use the href, Ng-href will automatically add the current file directory, if href= '/about ' will automatically become the computer drive letter:/about.

<! DOCTYPE Html>'Js/angular.js'></script><script src='Rounteconfig.js'></script><script src='Js/angular-route.js'></script><script src='Controller/about.js'></script><script src='Controller/main.js'></script>"MyApp"> <div> <a ng-href="#/">main</a>|<a ng-href="#/about">about</a> </div> <div ng-view="'></div> </div></body>
Three. Views and controller settings.
3.1 We can create main.html and about.html files in views.
Notes: Because it is added to the index.html in the form of a template, so the HTML here does not need to reference any Angularjs JS file, only need to load in index.html
3.3 Add main.js and About.js files to the Controller folder
 angular.module ( " myapp   '    " aboutctrl   , function ($scope) {$ Scope.message  =  " i am Frank, I am a doubi
         
Angular.module ('myapp')  . Controller ('mainctrl'  , Function ($scope) {          "I am a. NET coder, working for a Usa-online shopping mall" c12> ";  });
Four. Run:
The previous sections even if the code is over, so we can open a happy heart click Index.html to see the effect. But deceptive we will encounter a cross-domain problem.
Five. Http-server
There is a cross-domain problem, the following small part introduces a lightweight open source node framework, Http-server. Https://github.com/indexzero/http-server. In a look is a turtle. PS: Once heard the company Daniel said. Generally, the open source stuff likes to use animals as cover.
Notes:--cors can solve cross-domain problems, so after installing Http-server, directly through Http-server filepath--cors, start our code on the line. Access to 127.0.0.1:8080 after launch will first go to the index.html page. Because Nodejs default is the current folder index.html. (after running the console may prompt the access URI is 0.0.0.0:8080, anyway my computer access this is not going to go.) The address given above is accessible.
-P Port to use (defaults to8080) -A Address to use (defaults to0.0.0.0) -D Show Directory listings (defaults to'True') -I Display autoindex (defaults to'True') -E or--ext Default file extensionifNone supplied (defaults to'HTML') -S or--silent suppress log messages fromOutput--cors Enable Cors via the access-control-allow-Origin Header-o Open Browser window after staring the server-C Set Cache time (inchSeconds forCache-control max-age header, e.g.-C10 for TenSeconds (defaults to'3600'). To disable caching, use-c-1.
Six extensions
  On the internet have seen some angular tutorials, found generator-angualrjs this framework is very good. Https://github.com/yeoman/generator-angular is a lot of things to rely on, but it's worth a try.
  Http://files.cnblogs.com/files/FourLeafCloverZc/AngualarJS_ngView.zip
ANGULARJS Notes---routing views