2017-12-14 1 views
0

Im Konfigurationsblock arbeiten, ich habe:Winkel Material Thema nicht

.config(['$urlRouterProvider', '$stateProvider', '$locationProvider', '$mdThemingProvider', function ($urlRouterProvider, $stateProvider, $locationProvider, $mdThemingProvider) { 


    $locationProvider.html5Mode(true); 

    $urlRouterProvider.otherwise('/'); 

    $mdThemingProvider.theme('altTheme') 
     .primaryPalette('pink', { 
     'default': '400', // by default use shade 400 from the pink palette for primary intentions 
     'hue-1': '100', // use shade 100 for the <code>md-hue-1</code> class 
     'hue-2': '600', // use shade 600 for the <code>md-hue-2</code> class 
     'hue-3': 'A100' // use shade A100 for the <code>md-hue-3</code> class 
     }) 
     .accentPalette('purple', { 
     'default': '200' // use shade 200 for default, and keep all other shades the same 
     }); 

    $mdThemingProvider.setDefaultTheme('altTheme'); 
    $mdThemingProvider.alwaysWatchTheme(true); 

In HTML:

<header> 
    <md-toolbar class="md-hue-1"> 
    <div layout="row" layout-align="center center" flex> 
     Beauty Plus Marketing 
    </div> 
    </md-toolbar> 
</header> 

jedoch Es gibt keinen Hintergrund angewendet.

Hier ist der Stil, den ich zu sehen bin im Browser:

md-toolbar.md-altTheme-theme.md-hue-1:not(.md-menu-toolbar) { 
    background-color: rgb(248,187,208); 
    color: rgba(0,0,0,0.87); 
} 

<style>…</style> 
md-toolbar.md-altTheme-theme:not(.md-menu-toolbar) { 
    background-color: rgb(236,64,122); 
    color: rgba(255,255,255,0.87); 
} 

Ich installierte Winkel Material Bower verwenden, aber ich habe nicht die CSS Teil für Theming siehe Arbeits here.Am ich hier etwas falsch gemacht?

Antwort

1

Ich glaube, Sie haben vergessen, den css-Dateipfad in Ihrer index.html-Datei zu verknüpfen.

<html> 
<head> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> 
    <link rel="stylesheet" href="/bower_components/angular-material/angular-material.css"> 
</head> 
    <body ng-app="YourApp"> 

    <div ng-controller="YourController"> 

    </div> 

    <script src="/bower_components/angular/angular.js"></script> 
    <script src="/bower_components/angular-aria/angular-aria.js"></script> 
    <script src="/bower_components/angular-animate/angular-animate.js"></script> 
    <script src="/bower_components/angular-material/angular-material.js"></script> 
    <script> 

     // Include app dependency on ngMaterial 

     angular.module('YourApp', [ 'ngMaterial' ]) 
      .controller("YourController", YourController); 

    </script> 

</body> 
</html> 

Sie können diesen Link verweisen auch: https://github.com/angular/bower-material

+0

My bad. Ich hatte hinzugefügt .scss Weg, die ich bin überrascht, hat nicht funktioniert –

+0

funktioniert es jetzt? –

+1

ja :) Danke! –