AngularJs вход и DatePicker CSS не работает

Question

Im создания приложения планшета, и мне нужно поместить DatePicker как AngularJS Демос (https://material.angularjs.org/latest/demo/input), но он не работает, увидеть картину:

им поставить CSS от углового Материал:

<link href="resource/css/angular-material.min.css" rel="stylesheet"> 

Существует другая проблема, директива раскладка не работает, я думаю, что это та же самая проблема.

Благодаря Argate

Answer 1

Я приложил ссылку на рабочую версию Углового выбора даты here.

Приложение включает в себя следующий зависимости: ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']

Эти зависимости вы должны загружать извне с CDN-й или с внутренней стороной bower, node и т.д.

<!-- Angular Material requires Angular.js Libraries --> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script> 

Вот это HTML кода, который вы хотите включить сборщик данных:

<div ng-controller="AppCtrl" ng-cloak="" class="datepickerdemoBasicUsage" ng-app="MyApp"> 
    <md-content layout-padding=""> 

     <div layout-gt-xs="row"> 
      <div flex-gt-xs=""> 
       <h4>Standard date-picker</h4> 
       <md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker> 
      </div> 
    </md-content> 
</div> 

Убедитесь, что вы загрузили зависимости в вашем приложении в правильном порядке, например: ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'], а также в вашем development.js или production.js файл в зависимости от какой среды вы работаете в

Вот как будет включать в себя персональную CSS тему:. (Если вы не включаете тема как конфиг приложения, то ваши HTML ссылки на темы не будут работать)

angular.module('myApp', ['ngMaterial']) 
.config(function($mdThemingProvider) { 

    $mdThemingProvider.theme('default') 
    .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 
    }) 
    // If you specify less than all of the keys, it will inherit from the 
    // default shades 
    .accentPalette('purple', { 
     'default': '200' // use shade 200 for default, and keep all other shades the same 
    }); 

}); 

Answer 2

Может быть целый ряд вещей, это макет, который работает:

<md-content flex layout-padding> 
    <div layout="row" layout-align=" start center"> 
    <md-datepicker ng-model="App" md-placeholder="date" flex></md-datepicker> 
    </div> 
</md-content> 

Пример:

Angular Material App Layout

Вы можете сделать ручку или переделать выше, и попытаться воссоздать свою проблему.