Testing Angular Material Design

Angular material design test single page application, hello world example, angular buttons, input fields, form validation ...

Framework 1 :

Framework 2 :

+ Js file(s) :	//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js //ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.min.js //ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-aria.min.js //ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-messages.min.js //cdnjs.cloudflare.com/ajax/libs/angular-material/0.9.0/angular-material.min.js

+ Css file(s) :	//cdnjs.cloudflare.com/ajax/libs/angular-material/0.9.0/angular-material.min.css
	Apply

	Link :
Direct http link :
	Fork button :

Html code :
	Embed preview :
	Copy the following html code to your page to embed the preview, To include many previews on a single page, just repeat the first line. You can change the width, height and border color (bcolor).

<div class="refork-widget" code="83b" style="width:100%;height:200px;" bcolor="#ccc"></div> <script type="text/javascript" src="//snippet.run/d/z.js"></script>

HTML

&lt;div layout="column" ng-app="StarterApp" ng-controller="AppCtrl" style="height:100%;"&gt;
  &lt;md-toolbar layout="row"&gt;
    &lt;button ng-click="toggleSidenav('left')" hide-gt-sm class="menuBtn"&gt;
      &lt;span class="visually-hidden"&gt;Menu&lt;/span&gt;
    &lt;/button&gt;
    &lt;h1 class="md-toolbar-tools" layout-align-gt-sm="center"&gt;Angular Material Design Test Page&lt;/h1&gt;
  &lt;/md-toolbar&gt;
  
  &lt;div layout="row" flex&gt;
    &lt;md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')"&gt;
      
      &lt;md-button&gt;Flat Button&lt;/md-button&gt;
      &lt;md-button class="md-raised"&gt;
        Raised Button
      &lt;/md-button&gt;
      &lt;md-button ng-disabled="true"&gt;
        Disabled Button
      &lt;/md-button&gt;
      
    &lt;/md-sidenav&gt;
    &lt;div flex id="content"&gt;
      &lt;md-content layout="column" flex class="md-padding"&gt;
        
        &lt;form name="thisForm"&gt;
          &lt;md-input-container&gt;
            &lt;label&gt;Name&lt;/label&gt;
            &lt;input name="userName" md-maxlength="15" ng-model="userName" type="text" required /&gt;
            
            &lt;div ng-messages="thisForm.userName.$error"&gt;
              &lt;div ng-message="required"&gt;This filed is required.&lt;/div&gt;
              &lt;div ng-message="md-maxlength"&gt;This filed is too long.&lt;/div&gt;
            &lt;/div&gt;
            
          &lt;/md-input-container&gt;
          &lt;div&gt;
            Typed name : {{ userName }}
          &lt;/div&gt;
          &lt;div&gt;
            &lt;md-button class="md-raised md-primary" ng-disabled="thisForm.$invalid"&gt;Valider&lt;/md-button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/md-content&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

CSS

Javascript

Testing Angular Material Design

Link :

Fork button :

Embed preview :