2017-10-24 2 views
0
laden

Ich habe Angular installiert (1) Material (v.1.1.5) über NuGet in meinem Visual Studio-Projekt und referenzierten folgenden es ihren Führer:Kann nicht Themen mit AngularJS Werkstoff

<script src="scripts/angular.min.js"></script> 
<script src="scripts/angular-route.min.js"></script> 
<script src="scripts/angular-animate.min.js"></script> 
<script src="scripts/angular-aria.min.js"></script> 
<script src="scripts/angular-messages.min.js"></script> 
<script src="scripts/angular-sanitize.min.js"></script> 
<script src="scripts/angular-material.min.js"></script> 
<link href="content/bootstrap.min.css" rel="stylesheet" /> 
<link href="content/angular-material.min.css" rel="stylesheet" /> 

Von ihrem Führer:

Wenn Sie die Winkel CLI verwenden, können Sie diese zu Ihrem styles.css hinzufügen:

@import "[email protected]/material/prebuilt-themes/indigo-pink.css"; 

Alternativ können Sie auch direkt auf die Datei verweisen. Dies würde in etwa so aussehen:

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet"> 

NuGet wird die vorkompilierte Themen CSS-Dateien nicht installieren und ich kann sie nicht im Netz finden. Oder mache ich einfach etwas falsch? Fehle ich etwas? Sollten die vorgefertigten Designs Teil der Datei angular-material.min.css sein?

EDIT: @Edric: Ich habe bereits meine mdThemeProvider definiert:

<body ng-app="myApp" ng-controller="MainCtrl" md-theme="ccc" md-theme-watch="true"> 

&

var myApp = angular.module("MyApp", ['ngAnimate', 'ngAria', 'ngMessages', 'ngMaterial', 'ngRoute', 'ngSanitize']); 

rcaApp.config(function ($mdThemingProvider) { 
    $mdThemingProvider.theme('ccc') 
     .primaryPalette('pink') 
     .accentPalette('orange') 
     .dark(); 
}); 

Antwort

0

Sie befinden sich in der Dokumentation zu Angular Material suchen. Sie sollten stattdessen die Dokumentation für AngularJS Material betrachten.

Anyways, hier ist der richtige Weg, um ein Thema mit $mdThemeProvider zu definieren:

angular.module('myApp', ['ngMaterial']) 
    .config(function($mdThemingProvider) { 
     $mdThemingProvider.theme('default') 
      .primaryPalette('pink') 
      .accentPalette('orange'); 
}); 

More info on theming

+0

bitte, meine bearbeitet Code überprüfen. Vielen Dank. – Tomo

+0

@Tomo Funktioniert es jetzt? Wenn dies der Fall ist, markieren Sie diese Antwort als akzeptiert. Vielen Dank. – Edric

+0

Ich habe versucht, meine $ mdThemeProvider-Code in diesem CodePen https://codepen.io/kyleledbetter/pen/gbQOaV einfügen und es funktioniert wie es sollte, also habe ich versucht, die Referenzen aus dem CodePen zu verwenden, aber immer noch kein Glück. – Tomo