Angular Material Home
Angular Material Tutorial : Angular Material is basically User interface(UI) component library which is built with AngularJs And Material Design Lite. Angular Material basically comes with combined feature of the Angular and Material design lite which enables developers to create beautiful, attractive and responsive web pages. Angular Material is one of the best suited UI component for both mobile devices & Desktop which is platform independent ie develop once and use it everywhere.
Angular Material Tutorial With Example & Demo
Angular Material Lite provides rich layouts, responsive animations, transitions,depth effects such as lighting, shadows, autocomplete, swipe and switches etc which makes it most powerful UI Component. We are sure once you use it, You will love it.
Audience
This tutorial is made for the developers(designers) who are willing to learn the latest Angular Material with example and demo.
What You Should Know?
Before Starting you might be aware of HTML, JavaScript, DOM and AngularJs.
Learn With Example And Demo
You can Learn Angular Material With our online editor to edit and run the code online.
Angular Material Tutorial : Learn with Online Editor
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
<body ng-app="DemoApp" ng-cloak>
<div ng-controller="myCtrl" class="md-padding" id="popupContainer" ng-cloak>
<md-button class="md-primary md-raised" ng-click="showConfirm($event)" >
Confirm Dialog
</md-button>
<div ng-if="status" id="status">
<b layout="row" layout-align="center center" class="md-padding">
{{status}}
</b>
</div>
</div>
<!-- Angular Material requires Angular.js Libraries -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
/**
* You must include the dependency on 'ngMaterial'
*/
angular.module('DemoApp', ['ngMaterial'])
.controller('myCtrl', function($scope, $mdDialog) {
$scope.status = ' ';
$scope.showConfirm = function(ev) {
var confirm = $mdDialog.confirm()
.title('Do You Want to delete this?')
.textContent("Everything will be deleted and can't be undone .")
.ariaLabel('Lucky day')
.targetEvent(ev)
.ok('Confirm!')
.cancel('Cancel');
$mdDialog.show(confirm).then(function() {
$scope.status = 'Deleted.';
}, function() {
$scope.status = 'Cancelled.';
});
};
});
</script>
</body>
</html>
|
We hope this tutorial will be helpful for you in understanding the Angular Material concept.
The output of the above example will be something like this –
Angular Material Advantages
Let us have a look over Angular Material benefits & features –
- Cross Platform– Angular material enables us to create apps which runs smoothly on each platform which makes it a perfect choice.
- Fast Development– Angular Material Framework provides inbult functionalities which are used in commonly in development.
- Superior User Experience– Angular Material delivers the superior user experience with Material Deisgn lite.
- Easy to Customize– You can easily customize the components of Angular Material.
- Moduler Approach– Angular Material is highly moduler which is integrated with other components very well.
Websites(Web Apps) Built with Angular Material
Here are some famous website that are built with Angular Material Framework-
Advertisements
