Material Design in Angular won't work

Question

I have a problem with Angular Material including. I've installed angular-material with bower in my angular project and included scripts and stylesheet. Angular is v1.4.1 and Angular Material 0.10.0. Is there any wrong dependency?

var app = angular.module('startApp', ['ngMaterial'
  ]);

app.controller('MainController', ['$scope',
  function($scope) {
    $scope.title = 'Web page';
    $scope.array = [{
        name: 'data 1',
        duration: '01:42',
        creationdate: new Date('2014', '03', '08')
      },
      {
        name: 'data 2',
        duration: '00:58',
        creationdate: new Date('2014', '03', '08')
      },
      {
        name: 'data 3',
        duration: '02:45',
        creationdate: new Date('2014', '03', '08')
      }];
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <title>web page</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <link rel="stylesheet" href="bower_components/angular-material/angular-material.css">
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
    
  </head>
  <body ng-app="startApp">
  <md-button>asd</md-button>
    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Main Content -->
    <div class="main" ng-controller="MainController">
      <div class="container">
        <h1> {{title}} </h1>

        <div ng-repeat="data in array" class="col-md-6">
            <p class="title">{{data.name}}</p>
            <p class="title">{{data.duration}}</p>
            <p class="title">{{data.creationdate | date}}</p>
        </div>

      </div>
    </div><!-- end Main Content -->

    <!-- Include Angular Material -->
        <script src="bower_components/angular-material/angular-material.js"></script>
    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-touch/angular-touch.js"></script>
    <script src="bower_components/angular-aria/angular-aria.js"></script>
    <!-- endbower -->
    <!-- endbuild -->
        
        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        

        <!-- Controllers -->
        <script src="scripts/controllers/main.js"></script>
        <script src="scripts/controllers/about.js"></script>
        <!-- Modules -->
        <script src="scripts/app.js"></script>
        <!-- endbuild -->
        
</body>
</html>

Michael · Accepted Answer · 2015-06-19 09:12:04Z

Clean up your javascript libraries, the order is important!

jQuery.js
angular.js
all angular sub modules
your application scripts

var app = angular.module('startApp', ['ngMaterial'
  ]);

app.controller('MainController', ['$scope',
  function($scope) {
    $scope.title = 'Web page';
    $scope.array = [{
        name: 'data 1',
        duration: '01:42',
        creationdate: new Date('2014', '03', '08')
      },
      {
        name: 'data 2',
        duration: '00:58',
        creationdate: new Date('2014', '03', '08')
      },
      {
        name: 'data 3',
        duration: '02:45',
        creationdate: new Date('2014', '03', '08')
      }];
  }]);

<!doctype html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <title>web page</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css">
    
  </head>
  <body ng-app="startApp">
  <md-button>asd</md-button>
    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Main Content -->
    <div class="main" ng-controller="MainController">
      <div class="container">
        <h1> {{title}} </h1>

        <div ng-repeat="data in array" class="col-md-6">
            <p class="title">{{data.name}}</p>
            <p class="title">{{data.duration}}</p>
            <p class="title">{{data.creationdate | date}}</p>
        </div>

      </div>
    </div><!-- end Main Content -->

    <!-- Include Angular Material -->
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script src="https://code.angularjs.org/1.4.1/angular.js"></script>
    <script src="https://code.angularjs.org/1.4.1/angular-animate.js"></script>
    <script src="https://code.angularjs.org/1.4.1/angular-aria.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
    <!-- build:js(.) scripts/vendor.js -->
    <!-- endbuild -->
        
</body>
</html>

Collectives™ on Stack Overflow

Material Design in Angular won't work

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related