Материал AngularJS не отображается

Я пытаюсь научиться использовать AngularJS и AngularJS Material, используя следующие коды:

<!doctype html>
<html lang="en">
<head>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-animate/angular-animate.min.js"></script>
    <script src="bower_components/angular-route/angular-route.min.js"></script>
    <script src="bower_components/angular-aria/angular-aria.min.js"></script>
    <script src="bower_components/angular-material/angular-material.js"></script>

    <script>
    angular.module('F1FeederApp', [ 'ngMaterial' ]).controller('driversController',
            function($scope) {
            }).config(
            function($mdThemingProvider) {
                $mdThemingProvider.theme('default').primaryPalette('pink')
                        .accentPalette('orange');
            });
    ;
    </script>

    <!-- default themes and core styles -->
    <link rel="stylesheet"
        href="bower_components/angular-material/angular-material.css">
</head>
    <body ng-app="F1FeederApp">
        <md-content>
            <md-toolbar class="md-tall md-accent">
              <h2 class="md-toolbar-tools">
                <span>Toolbar: tall (md-accent)</span>
              </h2>
            </md-toolbar>

            <ng-view></ng-view>
        </md-content>

        <script src="js/app.js"></script>
        <script src="js/services.js"></script>
        <script src="js/controllers.js"></script>
    </body>
</html>

Однако Материал не отображается. Что может быть не так с моим кодом?

Консоль в браузере не дает мне никаких ошибок.


person Rendy    schedule 21.01.2016    source источник


Ответы (1)


Только что попробовал ваш код, и он отлично работает в Chrome, FireFox и Safari.

введите здесь описание изображения

Кстати, у вас есть дополнительный ; перед закрывающим тегом скрипта

<script>
angular.module('F1FeederApp', [ 'ngMaterial' ]).controller('driversController',
        function($scope) {
        }).config(
        function($mdThemingProvider) {
            $mdThemingProvider.theme('default').primaryPalette('pink')
                    .accentPalette('orange');
        });
;
</script>

Я рекомендую вам проверить свои версии материалов angular и angular или проверить, есть ли проблема в ваших файлах .js.

person Charlie Ng    schedule 26.01.2016
comment
Дополнительная точка с запятой не должна быть проблемой. Однако я могу попытаться создать новый проект, и он работает. - person Rendy; 26.01.2016