Eckiges Material

Also habe ich Winkel-, Winkelmaterial-, Winkelarien-, Winkel-Animations-Abhängigkeiten zu meinem System installiert. Ich möchte nur diese aufstrebende Styling-Methode testen. Es scheint, ich bin am Anfang stecken. Kannst du mir sagen, was mit dem Code falsch ist?Eckiges Material

Das sind meine 3 Dateien.

app.js
styles.css
index.html

Meine Ausgabe ist {{}} title1 in der Mitte-oben auf der Webseite.

angular.module('MyApp', ['ngMaterial']) 
 
    .controller("MyController", function($scope) { 
 
    $scope.title1 = 'Lol'; 
 
    });

.buttondemoBasicUsage section { 
 
    background: #f7f7f7; 
 
    border-radius: 3px; 
 
    text-align: center; 
 
    margin: 1em; 
 
    position: relative !important; 
 
    padding-bottom: 10px; 
 
} 
 
.buttondemoBasicUsage md-content { 
 
    margin-right: 7px; 
 
} 
 
.buttondemoBasicUsage section .md-button { 
 
    margin-top: 16px; 
 
    margin-bottom: 16px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
 
    <link rel="stylesheet" type="text/css" href="angular-material.css"> 
 
    <title>AngularJS</title> 
 
</head> 
 

 
<body ng-app="MyApp"> 
 
    <div ng-controller="MyController"> 
 
    <md-content> 
 
     <section layout="row" layout-sm="column" layout-align="center center"> 
 
     <md-button>{{title1}}</md-button> 
 
     </section> 
 
    </md-content> 
 
    </div> 
 
    <script src="app.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script> 
 

 
</body> 
 

 
</html>

Quelle

2015-07-20 Varun Verma

Ich habe Ihre Importe repariert (siehe meine Bearbeitung) und es funktioniert. – Christoph

Ich sehe keine Änderungen. : O –

Hmm ok. Siehe meine Antwort – Christoph

ich Ihre Importe festgelegt.

angular.module('MyApp', ['ngMaterial']) 
 
    .controller("MyController", function($scope) { 
 
    $scope.title1 = 'Lol'; 
 
    });

.buttondemoBasicUsage section { 
 
    background: #f7f7f7; 
 
    border-radius: 3px; 
 
    text-align: center; 
 
    margin: 1em; 
 
    position: relative !important; 
 
    padding-bottom: 10px; 
 
} 
 
.buttondemoBasicUsage md-content { 
 
    margin-right: 7px; 
 
} 
 
.buttondemoBasicUsage section .md-button { 
 
    margin-top: 16px; 
 
    margin-bottom: 16px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
 
    <link rel="stylesheet" type="text/css" href="angular-material.css"> 
 
    <title>AngularJS</title> 
 
</head> 
 

 
<body ng-app="MyApp"> 
 
    <div ng-controller="MyController"> 
 
    <md-content> 
 
     <section layout="row" layout-sm="column" layout-align="center center"> 
 
     <md-button>{{title1}}</md-button> 
 
     </section> 
 
    </md-content> 
 
    </div> 
 
    <script src="app.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script> 
 

 
</body> 
 

 
</html>

Quelle

2015-07-20 11:39:40 Christoph

Okay, ich habe es gefunden. Das tut mir leid. Wenn ich das Code-Snippet hier auf SOF ausführe, funktioniert es, aber wenn ich dasselbe in meine Dateien kopiere, zeigt es mir immer noch das gleiche Ergebnis, sowohl auf Chrom als auch auf IE8 –

@Christoph, du hast vergessen die angular-material.css zu ändern zu einem CDN-gehosteten Ort.Andererseits reflektiert diese Antwort nicht wirklich, warum Varun seine Dateien nicht referenzieren kann. –

Das ist wirklich nur eine Frage der die Dateien an die richtigen Stellen in Ihrem Projekt verweisen.

Ersetzen alle lokalen Verweise auf CDN, Ihr Code funktioniert einwandfrei: http://codepen.io/qvazzler/pen/vOaqXW

<!DOCTYPE html> 
<html> 
<head> 
<!-- <link rel="stylesheet" type="text/css" href="CSS.css">--> 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.css"> 
    <title>AngularJS</title> 
</head> 
<body ng-app="MyApp"> 
    <div ng-controller="MyController"> 
     <md-content> 
      <section layout="row" layout-sm="column" layout-align="center center"> 
       <md-button>{{title1}}</md-button> 
      </section> 
     </md-content> 
    </div> 
<!-- <script src="MyApp.js"></script>--> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-animate.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-aria.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.js"></script> 
</body> 
</html>

Eine hilfreiche Sache in diesen Fällen zu tun ist, die Chrome-Entwickler-Tools (CTRL + SHIFT + I) zu öffnen, erhalten in den Konsolenbereich und sehen Sie sich die Fehlermeldungen an.

-Link auf der Verwendung von DevTools zu führen: https://developer.chrome.com/devtools

Wenn ich tatsächlich war auf Ihre Frage zu beantworten, warum es nicht funktioniert hat, würden wir Ihre Dateistruktur sehen müssen, aber wie es üblich ist, dass js-Dateien befinden In einem Ordner getrennt von Ihren HTML-Dateien müssen Sie "../" am Anfang Ihrer hrefs hinzufügen, um auf einen übergeordneten Ordner zuzugreifen.

Beispiel:

[My Project] 
jsfolder 
- angular.js 
- angular-material.js 
cssfolder 
- angular-material.css 
- styles.css 
html 
- index.html

Um Angularjs von Ihrem index.html zuzugreifen, würden Sie href schreiben = "../ jsfolder/Angularjs"

Quelle

2015-07-20 11:40:52

Danke an alle. Es stellte sich heraus, dass ich zuerst meine Abhängigkeiten und dann meine .js und .css Datei importieren musste. –

@VarunVerma, lassen Sie mich wissen, gibt es etwas in meiner Antwort, die nicht ausreichte? –

Nein, es war alles gut. Danke :) –

Ich schlage vor, Um Typoskripte oder eine Art dieser Option zu verwenden, sind die ersten Schritte schwierig, aber später werden Sie in einer besseren Lösung sein.

Bitte machen Sie nicht schriftlich Code Schmerzen und gewinnen.

happy codings.

Quelle

2016-04-24 14:46:17 Mkan

Eckiges Material

Antwort

Verwandte Themen