Routing in angularjs material design

I am trying to figure out how to do routing between pages in angularjs material design.

In this example I would like to change the page when I click the sidebar link


// script.js

// create the module and name it scotchApp
    // also include ngRoute for all our routing needs
var starterApp = angular.module('starterApp', ['ngRoute']);

// configure our routes
starterApp.config(function($routeProvider) {

        // route for the home page
        .when('/', {
            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'

// create the controller and inject Angular $scope
starterApp.controller('mainController', function($scope) {
    // create a message to display in our view
    $scope.message = 'Everyone come and see how good I look!';

starterApp.controller('aboutController', function($scope) {
    $scope.message = 'Look! I am an about page.';

starterApp.controller('contactController', function($scope) {
    $scope.message = 'Contact us! JK. This is just a demo.';



<div class="jumbotron text-center">
    <h1>About Page</h1>

    <p>{{ message }}</p>



source to share

1 answer

Have you tried putting the href attribute on the tag <a>


<a href="#/">Home</a>
<a href="#/about">About</a>
<a href="#/contact">Contact</a>


This way, whenever AngularJS sees a url change, it will force the router to find the specified path.



All Articles