Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:

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?

share|improve this question

This question has an open bounty worth +50 reputation from Sender ending in 20 minutes.

Looking for an answer drawing from credible and/or official sources.

    
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 P A Nov 20 at 4:00

1 Answer 1

up vote 5 down vote accepted

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.

If something isn't clear, just let me know.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.