Search code examples
angularjsangularjs-material

Got error failed to instantiate module gupaApp due to" after include include ng-material in AnguarJS?


I have created the website using angularjs and i have used angular-material in our website but i have properly included the script file properly but i got error after inlcude the ['ngMaterial'] as a depedency in our module i dont understand what the wrong in my code.

var app = angular.module("gupaApp", ['ngMaterial']);
app.controller("gupaContr", function($scope) {
  console.log('hii');
})
<html ng-app="gupaApp">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <link rel="stylesheet" href="https://gitcdn.xyz/repo/angular/bower-material/master/angular-material.css">
  <script src="https://gitcdn.xyz/repo/angular/bower-material/master/angular-material.js"></script>
  <script type="text/javascript" src="app/controller/gupaController.js"></script>

  <body ng-controller="gupaContr">
    <md-toolbar md-scroll-shrink>
      <div class="md-toolbar-tools">
        <div flex="50">
          <h3 class="title"><span>My Title</span></h3>
        </div>
        <div flex="50" layout layout-align="end center">

          <md-button class="md-fab" aria-label="Time">
            <md-icon icon="/img/icons/ic_access_time_24px.svg" style="width: 24px; height: 24px;"></md-icon>
          </md-button>
        </div>
      </div>
    </md-toolbar>
  </body>
</html>


Solution

  • You need to add references to the angular-animate.js and angular-aria.js aswell

    <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>
    

    Make sure to match the version you're using

    PLUNKER DEMO