Angular Material Sample

Using the angular material library

by Yonathan Benitah

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-animate.js"></script>
<div ng-app='home'>
    <!-- App goes here -->
    <md-content layout-padding ng-controller="MainCtrl as mainCtrl">
    <div layout=row>
    
        <md-input-container class="no-padding">
        <label>Configuration name</label>
        <input ng-model="multiDeployment.setupName" >
            </md-input-container>
    <md-button class="md-primary md-raised btn-test" ng-click="saveConfig()"> Save
    </md-button>

    </div>
    </md-content>
</div>

CSS

.btn-test{
  margin-bottom: 0px
}
.no-padding{
  padding-bottom: 0px
}

JavaScript

angular.module('home', ['ngAria', 'ngAnimate', 'ngMaterial']);



angular.module('home').controller('MainCtrl', function ($scope) {
    $scope.multiDeployment = {};

 $scope.saveConfig = function () {
       console.log("saved");
    };


});