Learning Angular Material Library

Angular Material is an Angular-native, UI component framework from Google. It is a reference implementation of Google's Material Design and provides >30 UI components and services essential for mobile and desktop AngularJS applications.
In this course, we will quickly build a real-work application Angular UI application, take a tour of Angular Material, and learn how ngMaterial can be used in your projects.
Installing angular material:

npm install angular angular-material --save
Add style sheet link and script for all the libaries

Step 1:

Create the wireframe for the application. 
The layout and the flex directive are used to set up the orientation.

<body ng-app="BlankApp" ng-cloak layout="column">
<div class="container" layout="row" flex>

Layout instructs it's children to layout in a row.

Flex takes up the remaining screen space.

Step 2:

Choose the UI components to be used from Angular Material demos and add them to the project.
https://material.angularjs.org/latest/demo/whiteframe

Icons can be looked up from:
https://klarsys.github.io/angular-material-icons/



  • For production, use minified version directly from CDN:
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.7.1/angular-material-icons.min.js"></script>

    For other purposes, project files are available via bower / npm or can be cloned directly from github.
  • Inject ngMdIcons to your angularjs application:
    angular.module('demoapp', ['ngMdIcons']);
  • Use ng-md-icon directive in your html, specifying fill-color through css:
    <ng-md-icon icon="..." style="fill: ..." size="..."></ng-md-icon>

    • Step 3:

    Work with dynamic data - add ng-repeat, ng-click, other directives.

    Step 4: Use a BottomSheet for interactivity - a section that flies in from the bottom

    Step 5: Use $mdmedia('gt-sm') to specify how elements on the screen (eg. sidenav) react to the different screen sizes (device size or resizing of windows)

    Comments

    Post a Comment