Почему мой материал AngularJS (CSS) не работает, как в демонстрации?

Question

Я полный новичок в мире AngularJS. Тем не менее, я хочу реализовать material design version of AngularJS для создания формы.

Итак, я последовал инструкциям по началу работы и попытался что-то сделать, но он не похож на тот, который был на сайте. Итак, я скопировал a basic demo from Codepen

Я думаю, что я добавил все необходимые файлы. Но я все еще не могу заставить его выглядеть так, как на Кодепене. Я довольно уверен, что это проблема с CSS, но я не могу это сделать.

Ниже мой код:

angular 
 
    .module('MyApp') 
 
    .controller('DemoCtrl', function($scope) { 
 
    $scope.user = { 
 
     title: 'Developer', 
 
     email: 'ipsum@lorem.com', 
 
     firstName: '', 
 
     lastName: '', 
 
     company: 'Google', 
 
     address: '1600 Amphitheatre Pkwy', 
 
     city: 'Mountain View', 
 
     state: 'CA', 
 
     biography: 'Loves kittens, snowboarding, and can type at 130 WPM.\n\nAnd rumor has it she bouldered up Castle Craig!', 
 
     postalCode: '94043' 
 
    }; 
 
    }) 
 
    .config(function($mdThemingProvider) { 
 

 
    // Configure a dark theme with primary foreground yellow 
 

 
    $mdThemingProvider.theme('docs-dark', 'default') 
 
     .primaryPalette('yellow') 
 
     .dark(); 
 

 
    });

<link rel="stylesheet" href="https://cdn.rawgit.com/angular/bower-material/v0.9.7/angular-material.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.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-route.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/angularjs/1.3.15/angular-messages.min.js"></script> 
 

 

 
<script src="https://cdn.rawgit.com/angular/bower-material/v0.9.7/angular-material.js"></script> 
 

 
<div ng-controller="DemoCtrl" layout="column" class="inputdemoBasicUsage" ng-app="MyApp"> 
 

 
    <md-content md-theme="docs-dark" layout-padding="" layout="row" layout-sm="column"> 
 
    <md-input-container> 
 
     <label>Title</label> 
 
     <input ng-model="user.title"> 
 
    </md-input-container> 
 
    <md-input-container> 
 
     <label>Email</label> 
 
     <input ng-model="user.email" type="email"> 
 
    </md-input-container> 
 
    </md-content> 
 

 
    <md-content layout-padding=""> 
 
    <form name="userForm"> 
 

 
     <div layout="" layout-sm="column"> 
 
     <md-input-container style="width:80%"> 
 
      <label>Company (Disabled)</label> 
 
      <input ng-model="user.company" disabled=""> 
 
     </md-input-container> 
 

 
     <md-input-container flex=""> 
 
      <label>Submission Date</label> 
 
      <input type="date" ng-model="user.submissionDate"> 
 
     </md-input-container> 
 
     </div> 
 

 
     <div layout="" layout-sm="column"> 
 
     <md-input-container flex=""> 
 
      <label>First name</label> 
 
      <input ng-model="user.firstName"> 
 
     </md-input-container> 
 
     <md-input-container flex=""> 
 
      <label>Last Name</label> 
 
      <input ng-model="theMax"> 
 
     </md-input-container> 
 
     </div> 
 

 
     <md-input-container flex=""> 
 
     <label>Address</label> 
 
     <input ng-model="user.address"> 
 
     </md-input-container> 
 
     <md-input-container md-no-float=""> 
 
     <input ng-model="user.address2" placeholder="Address 2"> 
 
     </md-input-container> 
 

 
     <div layout="" layout-sm="column"> 
 
     <md-input-container flex=""> 
 
      <label>City</label> 
 
      <input ng-model="user.city"> 
 
     </md-input-container> 
 
     <md-input-container flex=""> 
 
      <label>State</label> 
 
      <input ng-model="user.state"> 
 
     </md-input-container> 
 
     <md-input-container flex=""> 
 
      <label>Postal Code</label> 
 
      <input ng-model="user.postalCode"> 
 
     </md-input-container> 
 
     </div> 
 

 
     <md-input-container flex=""> 
 
     <label>Biography</label> 
 
     <textarea ng-model="user.biography" columns="1" md-maxlength="150"></textarea> 
 
     </md-input-container> 
 

 

 
    </form> 
 
    </md-content> 
 

 
</div>

Любая помощь приветствуется. Благодаря!

Answer 1

Вам необходимо ввести зависимость в ваше приложение, например .module ('MyApp', ['ngMaterial']) и убедиться, что js для ngMaterial загружен в ваш index.html. Просто переписывание ".module ('MyApp', ['ngMaterial'])" в кодефене, похоже, делает трюк