3197891abd2c7abb0c8381c7f3b5de282a415e58

Building a Sample Profile Using Angular Material

angularjs material

  • In my previous post we have learnt how to configure and use Angular Material library.
  • In this demo, “We will build a sample profile using different UI elements in Angular Material”.
  • For demonstration we have used few free images from StockSnap.
  • The Angular Material library and its dependencies are installed using Bower command.In my previous post we have learn to install Angular material library.
  • The demo project structure looks like following screenshot.

image

  • The profileDemo.html file contains all the code for building a profile.We have used many elements like sidebar,toolbar,list and card element to build this profile.The content of the profileDemo.html file are as follows.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS Material Demo</title>
    <link rel="stylesheet" href="bower_components/angular-material/angular-material.css">
</head>
<body ng-controller="MyController" layout="column">
    <section layout="row" flex>
        <md-sidenav class="md-sidenav-left md-whiteframe-z2"
            md-component-id="left"
            md-is-locked-open="$mdMedia('gt-md')">
            <md-toolbar class="md-warn">
                <div class="md-toolbar-tools">
                <h1 class="md-display-4">Sandeep Kumar Patel</h1>
            </div>
            </md-toolbar>
            <md-card>
                <img alt="Sandeep Gravatar image"
                    src="http://www.gravatar.com/avatar/c6e6c57a2173fcbf2afdd5fe6786e92f.png?s=300">
                <md-card-content>
                    <h2 class="md-title">About Me</h2>
                    <p>
                        A passionate Blogger and Developer.
                        He has more then 5 years of experience on web application development.
                        He loves to work in javascript <a href="http://www.tutorialsavvy.com/angularjs-linky-filter-example" title="programming" alt="programming">programming</a> <a href="http://www.tutorialsavvy.com/angularjs-linky-filter-example" title="language" alt="language">language</a>.At present he is
                        exploring W3C Web Component specification.
                    </p>
                </md-card-content>
            <md-card>
        </md-sidenav>
        <md-content layout="row">
            <md-card flex>
               <img alt="Education"
                    src="image/table-chair.jpg">
               <md-card-content>
                   <h2 class="md-title">Education</h2>
                   <md-list>
                       <md-list-item class="md-1-line">
                           <p class="md-list-item-text">
                               He has done M.Tech in Computer Science subject from VIT University Vellore.
                               He has done B.Tech in Information Technology subject from BPUT University.
                           </p>
                       </md-list-item>
                    </md-list>
               </md-card-content>
           </md-card>
            <md-card flex>
                <img alt="Sandeep Gravatar image"
                     src="image/mac-on-table.jpg">
                <md-card-content>
                    <h2 class="md-title">Skills</h2>
                    <div layout>
                        <div flex="40" layout layout-align="center center">
                            <span class="md-body-1 md-primary">JavaScript</span>
                        </div>
                        <md-slider flex ng-model="80" min="1" max="100" class="md-primary">
                        </md-slider>
                    </div>
                    <div layout>
                        <div flex="40" layout layout-align="center center">
                            <span class="md-body-1 md-warn">AngularJS</span>
                        </div>
                        <md-slider flex ng-model="90" min="1" max="100" class="md-warn">
                        </md-slider>
                    </div>
                    <div layout>
                        <div flex="40" layout layout-align="center center">
                            <span class="md-body-1 md-primary">Jquery</span>
                        </div>
                        <md-slider flex ng-model="70" min="1" max="100" class="md-primary">
                        </md-slider>
                    </div>
                    <div layout>
                        <div flex="40" layout layout-align="center center">
                            <span class="md-body-1 md-warn">CSS</span>
                        </div>
                        <md-slider flex ng-model="60" min="1" max="100" class="md-warn">
                        </md-slider>
                    </div>
                    <div layout>
                        <div flex="40" layout layout-align="center center">
                            <span class="md-body-1 md-primary">Java</span>
                        </div>
                        <md-slider flex ng-model="50" min="1" max="100" class="md-primary">
                        </md-slider>
                    </div>
                </md-card-content>
            </md-card>
            <md-card flex>
                <img alt="Contact Me"
                     src="image/contact-me.jpg">
                <md-card-content>
                    <h2 class="md-title">Contact Me</h2>
                    <div layout>
                        <div flex="20" layout layout-align="left center">
                            <span class="md-body-1 md-primary">Email</span>
                        </div>
                        <span flex class="md-primary" layout-align="left center">
                            sandeeppateltech@gmail.com
                        </span>
                    </div>
                    <div layout>
                        <div flex="20" layout layout-align="left center">
                            <span class="md-body-1 md-primary">Blog</span>
                        </div>
                        <span flex class="md-primary" layout-align="left center">
                            www.tutorialsavvy.com
                        </span>
                    </div>
                </md-card-content>
            </md-card>
        </md-content>
    </section>
 
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-aria/angular-aria.js"></script>
    <script src="bower_components/angular-material/angular-material.js"></script>
    <script>
        var myApp = angular.module("myApp",[
            "ngMaterial"
        ]);
        myApp.controller("MyController",function($scope){
            $scope.buttonName= "Click Me"
        });
    </script>
</body>
</html>
  • The output of the profile demo looks like following screenshot:

image

  • The chrome developer toolbar inspection looks like following screenshot.

image

  • The demo code can be downloaded from the following link.

https://github.com/saan1984/AngularMaterialProfile

Angular Material Library DemoGetting Started with Browserify Part1
Sandeep

A passionate Blogger and Developer.Love to code for web application using JavaScript.At present I am exploring the Web Component Specification.

10 years ago angularjs27,533