AngularJS模块路由与材料设计CSS问题

Question

我将尝试将材料设计与角度js中的路由集成,但CSS设计不起作用.如果我将使用bootstrap CSS检查它,它正在工作.

Plnker演示

如果我会尝试这种方式,它会给我一些错误

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

错误

未捕获的错误:[$注射器:modulerr] http://errors.angularjs.org/1.2.25/ $喷油器/ modulerr P0 = scotchApp&P1 =错误... 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.';
});

我尝试了许多方法,我不知道为什么CSS不起作用.

Even控制台不会出现任何错误.

为什么CSS不起作用？

Answer 1

从...开始:

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

然后使用更新版本的角度和其他依赖项(它们应该是相同的).

将其与以下内容进行比较:http://plnkr.co/edit/rma0UFOGbtg1WMW6BbvV？p = preview,它有效.

我还将你的js引用移到了body的末尾,并将'ngMaterial'注入到你的app模块中.

如您所见,md-button指令有效.