Search code examples
angularjsangularjs-material

Angular Material Error show

Can you help me the problem about Angular Material error show. I import the js file is success,but I don't know what happen about it.

https://i.sstatic.net/BnDoD.png


when i click button quickly,It will be bigger.

model.js

angular.module ('model', ['ui.router','ngMaterial'])
.config (['$mdThemingProvider','$urlRouterProvider', '$stateProvider',function ($mdThemingProvider,$urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise ('/login');
$stateProvider.state ('login', {
    url: '/login',
    templateUrl: 'login.html',
    controller: 'loginCtrl'
  });
}]);

index.html

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
Solution

  • You are missing the reference for the css of angular material 

    <link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css" />
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-aria.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.js"></script>
 <script src="//rawgit.com/angular/bower-material/master/angular-material.js"></script>