AngularJS module routing with material design CSS issue

Question

I will try to integrate material design with routing in angular js, but CSS design is not working. If I will check using bootstrap CSS, it's working.

Plnker Demo

If I will try this way it has given me error like

var scotchApp = angular.module('scotchApp', ['ngMaterial']);

Error

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=scotchApp&p1=Error…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A18%3A170)

App.JS

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

// configure our routes
scotchApp.config(function ($routeProvider) {
    $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's $scope
scotchApp.controller('mainController', function ($scope) {
    // create a message to display in our view
    $scope.message = 'Everyone come and see how good I look!';
});

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

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

I try many way I don't know why CSS is not working.

The Even console does not give any error.

Why CSS is not working?

your error says that, injector can't find any module with name `ngMaterial`. Did you add the script file for this module to your page? — Abhilash Augustine, Nov 20 '15 at 04:00

score 6 · Accepted Answer · edited May 11 '16 at 17:31

Start with:

var scotchApp = angular.module('scotchApp', ['ngRoute', 'ngMaterial']);

Then use the newer version of angular and other dependencies (they should be the same).

Compare it with: http://plnkr.co/edit/rma0UFOGbtg1WMW6BbvV?p=preview, it works.

I've also moved your js references to the end of body, and injected 'ngMaterial' into your app module.

As you can see, md-button directive works.

AngularJS module routing with material design CSS issue

1 Answers1