AngularJS: Router

Router

• Depends on angular-route.js

• Rules are defined in $routeProvider

• Normally defined in  app.js

• $stateProvider is a better option

• Create an index.html
• Add the section <ng-view>  </ng-view>

• In app.js file

var app = angular.module( "githubViewer", [ngRoute] );

app. config ( function ($routeProvider) {

        $routeProvider

                   .when("/main" , {

                            templateURL: "mypage.html",

• The controller is optional, the other way is to include it in the html

                            controller: "MyController"              

                   })

• Receiving paramenters
• In the controller you have to use $routeParams to receive the parameters
• var controller = function ($routeParams ){  -.....
• param = routeParams.param1;

                      .when( "/user/:user", {

                                templateURL: "mypag2e.html",

                                controller: "MySecondController"

• To wait until the data is fetch

                                resolve: {

                                       event : function($route, even){

                                                return even.getData().$promise;

                                          }

                                  }

                        })

                     .otherwise({redirection : "main.html"});

});

$route

• Accesing paramenters through URL

URL:  index.html/4?paramenter=foo

$route.current.param.<parameter>   ( = foo)

$route.current.param.eventId   ( = 4)


$route.reload();

• The references in the pages should be:   #/otherpage.html

Location

Use to move in the a specific part of the html page

• In the controller you have to use $location to receive the parameters
• var controller = function ($location ){  -.....
• $location.path("/myPath/" + userName) ;

Move to another URL

$location..url('newURL')

Avoid the use of # in URL

• Needs 'ngRoute'

$locationProvider.html5Mode({

enabled : true

});

• Add in your main page

<base href="/index.html">

Get the string after #

• location.hash()
• Ex.- index.html/newEvent#quiz   (hash() = quiz)

Get Parameters

• $location.search()

Replace in the history with the new pages

• $location.replace()

• $location.path()
• $location.url()

ng-view

Section where the pages will be loaded