AngularJS Material Introduction and Hello World example

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

E-junkie: Sell digital downloads online

E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!

Also see:

  1. The Top 10+ Best Webinar Software Platforms For 2020-2021
  2. Build Your Future Godaddy Careers And Jobs
  3. Introduction To Web Hosting Services

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 :  Angularjs Dynamically Add Class Remove Class with Toggle Class

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.