AngularJS implementation routing instance

1. First we must introduce angular.js and angular-route.js file

Code The code is as follows:
2, then we have to create an anchor and container (Ng-view)

    3, injecting NGROUTE dependencies in the module   
Copy code
The code is as follows:
Angular.Module (‘myApp’, [‘ngroute’])

4, Configuring routing

Config ([‘$ ROUTEPROVIDER’, FUNCTION ($ ROUTEPROVIDER) {$ routeProvider.when (‘/ first “, {template:’ first
‘}) .when (‘ / second ‘, {template:’
‘}). Otherwise ({redirectto:’ / first ‘}]


Complete code:



second page
    Angular.Module (' MyApp ', [' NGROUTE ']) .config ([' $ ROUTEPROVIDER ', FUNCTION ($ routeProvider) {$ routeProvider.when (' / first ', {template:'  first }) .when ('/ second ", {template:'  second  '}). otherwise ({redirectto:' / first '})}])         Next we are a simulation project route   1, first we look at the documents we need 

All file display

2, then we look at the effect map
There are two pages, the first page is following Second Page, click two A button, switch different pages, showing different styles
3, ok. Let’s take a look at the code!

AngularJS实现路由实例 Document

First Page AngularJS实现路由实例
Second Page

   Code Explanation:   First we must introduce three files   1) Angular.min.js ---- Angularjs script  2) Angular-css.js ---- Used scripts used to translate CSS  3) Angular-route.js - - Routing script   Then we need two anchors      FIRST PAGE   Second Page   
Finally, we need a routing container Code code is as follows:
After we put the route configuration, service, controllers, respectively in app.js, service.js, controller.js file, easy to manage, maintenance.

4, let’s take a look at the part of the route

Angular.Module (‘myApp’, [‘ngroute’, ‘Angularcss’]). Config ([$ ROUTEPROVIDER ‘, FUNCTION ($ routeProvider) {$ routeProvider .when (‘ / first “,{TemplateUrl: ‘./view/first.html’, controller: ‘FirstCtrl as firstCtrl’}) .when ( ‘/ second’, {templateUrl: ‘./view/second.html’, controller: ‘SecondCtrl as secondCtrl’ }). otherwise ({redirectto: ‘/ first’})}])

Code explanation:

1) First, the first line, NGROUTE is injecting NGROUTE and AngularCSS dependence in the MyApp module.

2) The CONFIG function of the AngularJS module is then configured for configuring the routing rule for configuring the route:
AngularJS module. By using configapi, we request to inject $ ROUTEPROVIDER to our configuration function and use $ routeProvider.WhenApi to define our routing rules.
 $ ROUTEPROVIDER provides us with the When (Path, Object) & OtherWise (Object) function defines all routes in order, the function contains two parameters:   The first parameter is URL or URL Regular rules. The second parameter is a routing configuration object.  3) Controller   Function, string, or array type, the Controller function executed on the current template generates a new Scope.  4) ControlleraS 
String type, specify an alias for Controller.

5) RedirectTo

Redirected address

6) Resolve
Specifies other modules dependent on the current controller.

5, let’s take a look at the service part, service.js

Angular.Module (‘myapp’) .factory (‘firstservice’, [Function () {var list = [{name: ‘rose’, age: 10}, {name: ‘Tom’, AGE : 19}]; return {getList: function () {return list;}}}}}}}])
  Note: Angular.Module ('myApp') does not need to be injected dependence  6, look at the controller integration, Controller.js 
Angular.Module (‘myApp’) .controller (‘firstctrl’, [‘ $ CSS ‘,’ FirstService ‘, Function ($ CSS, $ Service) {var self = this; $ css.add (‘ css / first.css’); self.list = function () {RETURN $ service.getlist ( );}}]) .Controller (‘sEcondctrl ‘, [‘ $ CSS ‘,’ FirstService ‘, Function ($ CSS, $ Service) {var self = this; $ css.add (‘ css / second.css’); self.list = function () {Return $ service.getlist ();}}])

Code analysis:

1) Injecting service dependent and #CSS dependency in the controller


The code is as follows:

Controller (‘firstctrl’, [‘$ CSS’, ‘Firstservice’, Function ($ CSS, $ Service)

2) Add CSS dependency path

Copy code

code is as follows:

$ css.add (‘css / first.css ‘);

Note: Angular.Module (‘ myApp ‘) does not need to inject dependence

7, ok. The logical part has been completed, let’s show our style and structural part



{P.Name}} == {{P.AGE}}

Second Page

{p.Name}} == {{P.AGE}}

.first {background-color: Yellow;}. First * {color: red;}


. SECond {Background-Color: SkyBlue;}. Second * {color: green;}

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment