AngularJS Material Introduction and Hello World example

AngularJS Material Introduction and Hello World example

In this Post We Will Explain About is AngularJS Material Introduction and Hello World example With Example and Demo.Welcome on infinityknow.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to AngularJS Material Introduction and AngularJS Material Hello WorldExample

In this post we will show you Best way to implement Hello World in angular material step by step, hear for Simple Hello World Applicationwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Angular Material Dependencies

<!-- Simple all Angular Material Dependencies -->
<link rel="stylesheet" href="angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/">
<script src="angular.min.js"></script>
<script src="angular-animate.min.js"></script>
<script src="angular-aria.min.js"></script>
<script src="angular-material.min.js"></script>

index.html

<html lang="en" ng-app="liveApp">
  <head>
    <meta name="viewport" content="initial-scale=1" />
  </head>
  <body layout="column" ng-controller="liveCtrl">
  <h1>Simple Angular Material Basic Application Examples </h1>
    <md-toolbar layout="row">
      <div class="md-toolbar-tools">
        <md-button ng-click="mysimpleFuinc('left')" hide-gt-sm class="md-icon-button">
          <md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon>
        </md-button>
        <h1>Hello World</h1>
      </div>
    </md-toolbar>
	<!-- Simple all The Data Content Examples -->
    <div layout="row" flex>
        <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">       
        </md-sidenav>
        <div layout="column" flex id="content">
            <md-content layout="column" flex class="md-padding">    
            </md-content>
        </div>
    </div>
  </body>
</html>

index.js

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

liveApp.controller('liveCtrl', ['$scope', '$mdSidenav', function($scope, $mdSidenav){
  $scope.mysimpleFuinc = function(menuId) {
    $mdSidenav(menuId).toggle();
  };
 
}]);

css

.md-toolbar-tools h1 {
  font-size: inherit;
  font-weight: inherit;
  margin: inherit;
}

Example

READ :  vuejs dynamic components - Dynamically add-remove row using vuejs

I hope you have Got What is angular material Tutorial- Hello World in angular material And how it works.I would Like to have Feedback From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments about This Article(infinityknow.com) Are Most Always Welcome.

Add a Comment

Your email address will not be published. Required fields are marked *