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 Live24u.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!.

Also Read :   AngularJS SEO - Single Page App Crawling and Indexing

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;
}




Also Read :   Removing hashUrl with rewriting example in angular js

Example

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

   

Add a Comment

Your email address will not be published.