I am planning to use AngularJS 1.x version with Angular Material design.
While I was searching for articles I came up with below two URL. First one is what I am using for Angular 1.x. If I am not wrong then the second one is for Angular 2.x and higher version. Hope someone can put more light on this.
Yes you are right! In order to setup your app with angularjs use the first one
DEMO
// Code goes here
angular.module('webapp', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
$scope.todos = [];
for (var i = 0; i < 45; i++) {
$scope.todos.push({
face: 'https://avatars0.githubusercontent.com/u/598463?v=3&s=60',
what: "Brunch this weekend?",
who: "Markus Thiel",
notes: "I'll be in your neighborhood doing errands."
});
}
});<!DOCTYPE html>
<html ng-app="webapp">
<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.css">
<link rel="stylesheet" href="style.css" />
<script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.6 used here -->
<script src="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="AppCtrl" layout="column">
<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>
<md-content layout-fill>
<md-list>
<md-item ng-repeat="item in todos">
<md-item-content>
<div class="md-tile-left">
<img ng-src="{{item.face}}" alt="{{item.who}}" class="face">
</div>
<div class="md-tile-content">
<h3>{{item.what}}</h3>
<h4>{{item.who}}</h4>
<p>{{item.notes}}</p>
</div>
</md-item-content>
<md-divider inset></md-divider>
</md-item>
</md-list>
</md-content>
</body>
</html>While the 2nd url is for angular and angular4 you can install the necessary modules with the command npm install and import the modules in your angular application.
# install Angular Material 2 components
npm install --save @angular2-material/{core,button,card}