ngRouter

[CodingCarlos]

ngRouter

When aplications get a little bit complex, maybe a single view is not enough. So, here is the ngRouter Full information about $router in Oficial Angular Documentation

js/app.js

angular.module('app', ['ngRoute']);

angular.module('app').config(function($routeProvider) {

    $routeProvider
        .when("/", {
            templateUrl : "views/main.htm"
        })
        .when("/red", {
            templateUrl : "views/red.htm"
        })
        .when("/green", {
            templateUrl : "views/green.htm"
        });
});

index.html

<nav>
    <a href="#/">Main</a>
    <a href="#/red">Red</a>
    <a href="#/green">Green</a>
</nav>

<div ng-view></div>

<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>

$routeProvider

.when('route', {configs}) .otherwise({configs})

configs .templateUrl .template .controller .controllerAs

$routeProvider
    .when("/", {
        templateUrl : "views/main.htm"
    })
    .when("/red", {
        templateUrl : "views/red.htm"
    })
    .when("/green", {
        templateUrl : "views/green.htm"
    })
    .otherwise({
        templateUrl : "views/none.htm"
    });

$routeParams

We can pass parameters in the url, for example:

domain.com/myApp/#/color/red

js/app.js

$routeProvider
    .when("/color/:name", {
        templateUrl : "views/other.htm",
        controller: "DemoController",
        controllerAs: "demo"
    });
});

controller.js

angular.module('app').controller("DemoController", DemoController);

function DemoController($routeParams) {
    var self = this;
    self.name = $routeParams.name;
}

views/other.html

<p>
    Asked for color <strong>{{demo.name}}</strong>
</p>