Responsive Web Design With AngularJS Sample Chapter
Uploaded by
Packt PublishingResponsive Web Design With AngularJS Sample Chapter
Uploaded by
Packt PublishingFr
AngularJS is an open source JavaScript framework, built to
create dynamic web applications using HTML, JavaScript,
and CSS. AngularJS has many advanced features that can
be used to leverage responsive application development.
Responsive Web Design with AngularJS follows a detailed
step-by-step approach to explain each key concept, with
sufficient code and examples. This book will teach you
how to implement dynamic routing, responsive custom
directives, and breakpoints for your web page, followed by a
section on debugging and testing.
By the end of the book, you will be able to develop and
design exciting single page applications with AngularJS
and make the applications responsive on different devices.
With ample screenshots and code offering you a detailed
insight, this book will ensure your success in developing
responsive applications.
Who this book is written for
Develop client-side dynamic routing
using AngularJS
Create a custom directive and use it for
responsive page development
Explore the usability of AngularJS routing for
responsive web application development
Get to grips with the basic functionality of
using AngularJS to build a web application
Build AngularJS breakpoint listeners and
arrange the page content to implement
responsiveness
Debug AngularJS single page applications
$ 29.99 US
18.99 UK
community experience distilled
P U B L I S H I N G
E x p e r i e n c e
D i s t i l l e d
Responsive Web Design
with AngularJS
Leverage the core functionalities of AngularJS, to build responsive
single page applications
Prices do not include
local sales tax or VAT
where applicable
Visit www.PacktPub.com for books, eBooks,
code, downloads, and PacktLib.
Sa
m
pl
C o m m u n i t y
Understand two-way data binding
implemented in AngularJS using
the digest cycle
Sandeep Kumar Patel
If you are an AngularJS developer who wants to learn
about responsive web application development, this book
is ideal for you. Responsive Web Design with AngularJS
is intended for web developers or designers with a basic
knowledge of HTML, CSS, and JavaScript.
What you will learn from this book
Responsive Web Design with AngularJS
Responsive Web Design
with AngularJS
ee
Sandeep Kumar Patel
In this package, you will find:
The author biography
A preview chapter from the book, Chapter 2 "The AngularJS Dynamic
Routing-based Approach"
A synopsis of the books content
More information on Responsive Web Design with AngularJS
About the Author
Sandeep Kumar Patel is a senior web developer and founder of
www.tutorialsavvy.com, a widely read programming blog created in 2012. He
has more than 5 years of experience in object-oriented JavaScript and JSON-based web
applications development. He is GATE-2005 Information Technology (IT) qualified
and has a Master's degree from VIT University, Vellore. At present, he works as a web
developer at SAP Labs India. You can learn more about him from his LinkedIn profile at
http:// www.linkedin.com/in/techblogger. He has received the Dzone Most
Valuable Blogger (MVB) award for technical publications related to web technologies.
His articles can be viewed at http://www.dzone.com/users/sandeepgiet. He
has also received the Java Code Geek (JCG) badge for a technical article published in
JCG. His article can be viewed at
http://www.javacodegeeks.com/author/sandeep-kumar-patel/.
He has also worked on: Instant GSON and Developing Responsive Web Applications with
AJAX and jQuery, both by Packt Publishing.
I would like to thank the three most important people in my life, my parents,
Dilip Kumar Patel and Sanjukta Patel, for their love and my wife, Surabhi
Patel, for her support and the joy that she has brought to my life.
A special thanks to the team at Packt Publishing without whom this book
wouldn't have been possible.
Responsive Web Design
with AngularJS
Welcome to Responsive Web Design with AngularJS. If you want to learn and understand
responsive web application development using AngularJS, then this book is for you. It
covers a systematic approach to build a responsive web application.
All the key features of AngularJS that can help in building a responsive application
are explained with the detailed code. This book also explains how to debug and test an
AngularJS-based web application during development.
What This Book Covers
Chapter 1, Introduction to Responsive Single Page Application and AngularJS,
introduces you to responsive design, single page application, and the AngularJS library.
This chapter also gives a kick start of the single page responsive application that we are
going to build to demonstrate the AngularJS role in application development.
Chapter 2, The AngularJS Dynamic Routing-based Approach, explores the power of
AngularJS-based routing of templates. It also explores the use of AngularJS routing for
responsive web application development.
Chapter 3, The AngularJS Directive-based Approach, introduces the custom directive
development in Angular JS. It also demonstrates the building of custom directives to
address responsive web application development.
Chapter 4, The AngularJS-based Breakpoints for Layout Manipulation, introduces the
CSS3 breakpoint concept for responsive layout development. It also provides coded
examples in AngularJS to present the breakpoint concept in the context of web design.
Chapter 5, Debugging and Testing Responsive Applications, provides a list of debugging
tools for AngularJS-based applications.
The AngularJS Dynamic
Routing-based Approach
In this chapter, you will learn about dynamic routing using user agent detection
controlled by AngularJS. The key concepts of AngularJS that we will cover in
this chapter are ngRoute and provider module. To learn these features you will
configure a new project. This chapter deals with setting up a code base to explore
these features.
Setting up an AngularJS project
In this section, we will set up a new project and configure the development
environment to develop a dynamic routing module using the AngularJS library.
The following tools are required to build a development environment:
Code editor: This editor is used to develop applications in WebStorm IDE
from JetBrains for development purposes. However, you can use your own
preferred editors such as Sublime Text, Notepad ++, and so on.
Web server: A simple HTTP server such as WAMP stack can be used to host
the project.
The AngularJS Dynamic Routing-based Approach
Building a project's structure
We need to create multiple directories to have related styles, fonts, markup and
script files in the group. The following screenshot shows the directory structure of
the project:
In the previous screenshot each directory has a specific type of files to be used by the
application. The details of these directories are as follows:
assets: This directory contains sass, css, font, lib, and script
subdirectories and Ruby configuration files for SASS-based COMPASS
watcher. The details of these directories are as follows:
sass: This subdirectory contains all the SASS-based SCSS files to
generate styling in CSS files. These SCSS files are desktop.scss,
mobile.scss, tablet.scss, and icon-font.scss files containing
CSS for desktop, mobile, and tablet-specific styles. The _icon-font.
scss file contains Mono Social Icons Font for various social media
web pages.
css: This subdirectory is the target for all the CSS files generated by
the SCSS file compilation. It contains the desktop.css, mobile.css,
and tablet.css files generated from their respective SASS files.
font: This subdirectory contains the MonoSocialIconsFont-1.10.
ttf file for social media icons.
[ 26 ]
Chapter 2
You can find more details of these icons at http://drinchev.
github.io/monosocialiconsfont.
lib: This subdirectory contains all the library-related AngularJS frameworks.
These files are angular.min.js, angular-resource.min.js, and angularroute.min.js containing code for AngularJS core, resource, and routing
modules. This book has used AngularJS 1.3 version to demonstrate the coded
examples. The AngularJS library file can be downloaded from https://
angularjs.org.
We can also use the AngularJS library from Google's CDN. For more
information about Google's CDN refer to the following link: http://
angularjs.blogspot.in/2012/07/angularjs-now-hostedon-google-cdn.html.
script: This subdirectory contains user defined script files related to
the application. One of the important script files inside this directory
is app.js, which contains the entry point to the AngularJS-based
application. We will explore this file in the coming sections.
config.rb: This file contains the COMPASS watcher configuration
for the SCSS file compilation.
data: This directory contains all the related JSON data that we will use
in our application development. It contains personalDetail.json and
professionalDetail.json files containing profile-related data. Content
of these files are as follows:
personalDetail.json: This JSON file contains personal details in
key-value pairs. The following code shows the content of this file:
{
"name":"Sandeep Kumar Patel",
"spouse":"Surabhi Patel",
"father":"Dilip Kumar Patel",
"mother":"Sanjukta Patel",
"bloodGroup":"O+ve",
"height":"5.7 feet",
"weight":"68 kg",
"chest":"40 inch",
"address":"House no 8 Marathalli bangalore 69"
}
[ 27 ]
The AngularJS Dynamic Routing-based Approach
professionalDetail.json: This JSON file contains professional
details in key-value pair. The following code shows the content of
this file:
{
"aboutme":"I, Sandeep Kumar Patel, am a web developer
and blogger living in Bangalore India. I have many years
of experience in creating web applications both using
custom and popular JavaScript libraries and frameworks
such as AngularJS and YUI.",
"years":4,
"roles":[
"Web Developer",
"JavaScript Developer",
"Front End Lead"
],
"languages":[
"JavaScript",
"Java"
],
"webdevelopment":[
"HTML5",
"CSS3",
"AngularJS",
"Jquery",
"BootStrap",
"YUI"
],
"tools":[
"SASS",
"COMPASS",
"GRUNT",
"GIT"
],
"ides":[
"WebStorm",
"Intelij Idea",
"Eclipse"
],
"social":{
"linkedin":"http://www.linkedin.com/in/
techblogger",
"facebook":"http://www.facebook.com/
SandeepTechTutorials",
"twitter":"http://twitter.com/MySmallTutorial",
"googleplus":"https://plus.google.com/
u/0/+SandeepKumarPatel/"
},
"contact":{
"email":"sandeeppateltech@gmail.com",
[ 28 ]
Chapter 2
"mobile":"+91-8105469950",
"address":"Whitefield Bangalore 560087"
}
}
view: This directory is the parent of three different subdirectories containing
all the HTML templates. The details of these subdirectories are as follows:
desktop: This subdirectory contains the profileTemplate.html file
that has all the HTML code for desktop type devices
tablet: This subdirectory contains the profileTemplate.html file
that has all the HTML code for tablet type devices
mobile: This subdirectory contains the profileTemplate.html file
that has all the HTML code for desktop type devices
The following screenshot shows the full project structure including subdirectories
and code files:
[ 29 ]
The AngularJS Dynamic Routing-based Approach
The SASS configuration
SASS (Syntactically Awesome Style Sheets) is a CSS authoring language. It provides
more control over writing CSS. SASS provides many features such as variables, mixins,
and others, which help in the organization of large code style sheets.
To know more about SASS framework refer to http://sasslang.com/documentation/file.SASS_REFERENCE.html.
To author CSS style sheets we have used a SASS-based COMPASS file watcher to
convert SCSS files to CSS files. To install COMPASS, we need to have Ruby installed
in our system. A configuration file named config.rb needs to be added inside
the assets folder before starting the COMPASS watcher. This configuration file
provides the source and target of the SASS files from where COMPASS watcher will
read the SCSS code and convert them into CSS files. The content of the config.rb
file is as follows:
require 'compass/import-once/activate'
#root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
To know more about the installation of COMPASS refer to
http://compass-style.org/install.
After a successful installation, COMPASS watcher can be used to monitor the assets
directory. The watcher looks for any changes in SCSS files and moves the changes
to their respective files inside the CSS directory. The following screenshot shows the
command issued to start the COMPASS watcher:
[ 30 ]
Chapter 2
Profile application demo
We are going to build a profile page application. This application will show two
different sections of personal and professional data. The following diagram shows
the architectural structure of this application:
The previous diagram shows the SPA architecture for our demo profile application.
Router is the main module that chooses the device type using deviceTypeProvider.
Once the device type is identified, Router chooses the HTML template file and gives
control to ProfileController, which loads the JSON data. ProfileController
links these JSON data with the HTML template and renders it in the browser.
Building data services
To build our profile application, we have maintained two different JSON files,
personalDetail.json and professionalDetail.json, in the data directory.
An AngularJS-based service is created using the ngResource module. The name
of the data service is ProfileServices and is maintained in the profileService.
js script file. This service is packaged inside the profileApp.profileServices
namespace and injected into the application module. The content of
ProfileServices is as follows:
angular.module('profileApp.profileServices', [])
.service('ProfileServices',["$resource", function($resource){
return{
/*Method for getting personal detail JSON file*/
getPersonalDetail : function(){
return $resource("data/personalDetail.json")
},
/*Method for getting professional detail JSON file*/
getProfessionalDetail : function(){
[ 31 ]
The AngularJS Dynamic Routing-based Approach
return $resource("data/professionalDetail.json")
}`
}
}]);
In the previous code, ProfileServices has two methods to access the profile data.
The details of these methods are as follows:
getPersonalDetail(): This method returns personal details in the JSON
format. It uses the $resource function with the data URL pointing to the
personalDetail.json file.
getProfessionalDetail(): This method returns professional details in the
JSON format.
While the application is loading, these two services get called by the controller.
The following screenshot shows the firebug console loading these resources
through an AJAX call:
Device-based routing
In the device-based routing approach, the requesting devices are identified by
the application and client is redirected to the appropriate HTML template. In
this approach, different HTML templates are maintained by the application and
served to the client. To identify a device the user agent string can be used to detect
deviceType. In this chapter, we have used the approach present at http://
detectmobilebrowsers.com. It maintains a set of user agent strings for various
mobile devices and checks the incoming request against these strings through
JavaScript's regular expression.
[ 32 ]
Chapter 2
AngularJS routing
AngularJS provides a routing module to cater to an incoming request for an
appropriate template and controller pair. The AngularJS routing module code can
be found in the angular-routr.min.js file and named as ngRoute package. Like
an SPA, the routing logic is present entirely in the browser's side. To create dynamic
routing, an AngularJS application module needs to perform the following steps:
1. Set up an AngularJS application.
2. Configure a routing module.
Setting up an AngularJS application
An AngularJS application module can be initialized using the ng-app built-in
directive in the HTML markup. In our demo application, we have used this attribute
in the index page. The following code shows the content of index.html file:
<!DOCTYPE html>
<html lang="en" ng-app="profileApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1, maximum-scale=1, user-scalable=YES">
<title>
Responsive Profile Web Application
</title>
<link href='http://fonts.googleapis.com/css?family=Robo
to:400,100,300,500,700' rel='stylesheet' type='text/css'>
<link ng-if="styleType.length > 0"
ng-href='assets/css/{{styleType}}.css'
rel='stylesheet' type='text/css' >
</head>
<body>
<!--AngularJS view -->
<div ng-view="">
</div>
<!--external scripts start -->
<script src="assets/lib/angular.min.js"></script>
<script src="assets/lib/angular-route.min.js"></script>
<script src="assets/lib/angular-resource.min.js"></script>
<script src="assets/script/deviceTypeProvider.js"></script>
<script src="assets/script/profileController.js"></script>
<script src="assets/script/profileService.js"></script>
<script src="assets/script/app.js"></script>
[ 33 ]
The AngularJS Dynamic Routing-based Approach
<!--external scripts end -->
</body>
</html>
In the previous code, the AngularJS application is initialized with the module
name profileApp using the ng-app directive. This directive is the root element
of the AngularJS application and is normally used in the body or HTML root element.
A few key points about the ng-app directive are as follows:
This directive is used to autobootstrap the AngularJS application.
This directive runs with priority 0, which means it runs with the
lowest priority.
Multiple ng-app directives with autobootstrap is not possible. To use
multiple bootstrapping, the angular.bootstrp() method can be used.
Nested ng-app directive declaration is not permissible.
To know more about AngularJS application bootstrapping refer to
https://docs.angularjs.org/api/ng/directive/ngApp.
Configuring a routing module
After the application is set up, a routing module can be configured using
$routeProvider present inside the ngRoute module. This ngRoute module can
be used by including the angular-route.min.js file. The following code shows
the content of routing logic for the profile application:
'use strict';
angular.module('profileApp',[
'ngRoute',
'ngResource',
'profileApp.profileController',
'profileApp.profileServices',
'profileApp.deviceTypeProvider'
])
.config(['$routeProvider','deviceTypeProvider',
function($routeProvider,deviceTypeProvider) {
var deviceTypeProvider = deviceTypeProvider.$get(),
deviceType = deviceTypeProvider.getDeviceType();
/*Route to Desktop view*/
[ 34 ]
Chapter 2
$routeProvider.when('/',{
templateUrl:
'view/'+deviceType+'/profileTemplate.html',
controller: 'ProfileController',
styleType:deviceType
});
}]);
In the previous code, the routing module is injected with a device type provider.
The routing module calls the getDeviceType() method to retrieve the type of device
in string format. We will have a look at the detailed implementation of this provider
in the following section. The $routeProvider module uses the when clause to route
the request to the appropriate template view. Different values of device type and
template path are listed in the following table:
Device type
Template path
Detail
Desktop
desktop/profileTemplate.html
When deviceType is
detected as desktop, the
profile template present
inside the desktop directory is
served to the client
Mobile
mobile/profileTemplate.html
When deviceType is
detected as mobile, the profile
template present inside the
mobile directory is served to
the client
Tablet
tablet/profileTemplate.html
When deviceType is
detected as tablet, the profile
template present inside the
tablet directory is served to
the client
The controller inside the routing module then sets a global scope variable named
styleType with the device type string. This styleType controller is shared in
the root scope of the application and is used in the index.html file to load the
appropriate style sheet in the CSS format. Different possible style sheets desktop.
css, mobile.css, and tablet.css can be loaded based on the device type string.
The following code shows the external style sheet pointing to different CSS files:
<link ng-if="styleType.length > 0"
ng-href='assets/css/{{styleType}}.css'
rel='stylesheet' type='text/css'>
[ 35 ]
The AngularJS Dynamic Routing-based Approach
Configuring a profile controller
Each template is under the scope of ProfileContoller. This controller is injected with
ProfileServices. Using these services, it loads the personal and professional data to
its scope variables $scope.personal and $scope.professional. This controller calls
the get() method on the resource instance of personal and professional data service.
The code for this controller is as follows:
'use strict';
angular.module("profileApp.profileController", [])
.controller('ProfileController',
function ($scope, $rootScope, $route, ProfileServices,$log) {
var professionalDetail =
ProfileServices.getProfessionalDetail(),
personalDetail = ProfileServices.getPersonalDetail();
$rootScope.styleType = $route.current.styleType;
$scope.professional = {};
$scope.personal = {};
//Default menu button selected to true
$scope.selected = true;
/*Calls the Angular service to load professional JSON data*/
professionalDetail.get(function(jsonData){
$scope.professional = jsonData;
});
/*Calls the Angular service to load personal JSON data*/
personalDetail.get(function(jsonData){
$scope.personal = jsonData;
});
/*Method to change the user selection*/
$scope.getDetail=function(event){
$scope.selected = !$scope.selected;
};
})
To hide and show the personal and professional data the $scope.selected variable
is used. The $scope.getDetail() method is used to change the value of this
variable by altering its true value.
[ 36 ]
Chapter 2
Developing a device type provider
A device type detector is developed as a provider to inject to the routing
configuration. The getDeviceType() method is used to return the type of
device. This methods reads and uses the window object provided by AngularJS
$windowProvider.
This provider reads the user agent string and runs a JavaScript pattern to match
it with the list of smart device names. For our profile application, we have created
a small list of smart device types such as iPhone, iPad, Android, and so on. You
can add more device names to this list. Also, we have considered desktop, mobile,
and tablet device types. The default device is taken as desktop. The code for the
deviceType provider is as follows:
'use strict';
angular.module("profileApp.deviceTypeProvider",[])
.provider('deviceType', ['$windowProvider', function($windowProvider)
{
var $window = $windowProvider.$get();
this.$get = function() {
return{
/*Returns the device type desktop, mobile and tablet,
default device type is desktop*/
getDeviceType:function(){
//Let, default device type
var deviceType='desktop',
userAgentString = $window['navigator']['userAgent']
||$window['navigator']['vendor'] ||$window['opera'],
width = $window['outerWidth'],isSmart = (/iPhone|iPod|iPad|Silk|Androi
d|BlackBerry|Opera Mini|IEMobile/).test(userAgentString);
if(isSmart&& width >= 768){
deviceType = "tablet";
}else if(isSmart&& width <= 767){
deviceType = "mobile";
}
return deviceType;
}
}
};
}])
[ 37 ]
The AngularJS Dynamic Routing-based Approach
The method of detecting deviceType is not a foolproof solution. For demonstration
purposes, we have categorized the devices by considering the following points:
Smart device: If the specified user agent string passes the JavaScript pattern
match against the list of device names, then it is considered as a smart device.
The pattern match is performed using the test() method provided by the
JavaScript regular expression object. This method returns a Boolean value.
For a successful match, it returns the isSmart variable as true. Again, the
smart device can be either a tablet or a mobile. The following list shows the
categorization among the smart devices:
Tablet: A device is identified as a tablet if it is smart and its width
is more than 768 px. The screen width can be calculated using the
outerWidth property of the $window object. In the previous code,
$window['outerWidth'] determines the screen width.
Mobile: A device is identified as mobile if it is smart and its width
is less than 767 px.
Desktop: If the device is not smart, that is, the Smart flag is false, then it is a
desktop device.
Developing a desktop view
To implement the redirection approach, we need to create three different HTML
files for desktop, mobile, and tablet. In all three HTML templates, the elements are
all similar except for their placement and width, which will be different for desktop,
mobile, and tablet devices. The HTML template for desktop type devices are divided
into four rows:
Name and profile image row
Category selection row
Category content
Social buttons row
Name and profile image row
This portion of the HTML markup contains the name and image of the candidate
wrapped by the .row class. The h1 element is used to represent the name and an img
element points to the Gravatar profile image URL. The following code shows the
HTML markup for this section:
[ 38 ]
Chapter 2
<div class="row">
<div class="pic">
<h1 class="name">Sandeep Kumar Patel</h1>
<img class="profile-image"
src="http://www.gravatar.com/avatar/4205261332ff1
31e971b48db31dcb528.png"
alt="profile image"/>
</div>
</div>
Category selection row
This section of the HTML markup contains two buttons for category selection. For
our profile application, we have personal and professional categories. Each of these
buttons are attached to angular attribute directives; details of these are as follows:
ng-click: This attribute is attached with a callback function and is triggered
on click event.
ng-class: This attribute is used for styling the selected button. A selected
class is attached when the selected scope property is set to true.
ng-disabled: This attribute is for the disabling and enabling button. This
attribute also takes the Boolean value from the selected scope property.
The following code shows these buttons for category selection with the attribute
directive attached to it:
<div class="row">
<div class="about">
<button class="btn" ng-model="professional"
ng-click="getDetail($event)"
ng-class="{'selected':selected}"
ng-disabled="selected">
Professional
</button>
<button class="btn" ng-model="personal"
ng-click="getDetail($event)"
ng-disabled="!selected"
ng-class="{'selected':!selected}">
Personal
</button>
</div>
</div>
[ 39 ]
The AngularJS Dynamic Routing-based Approach
Category content
This section contains the HTML markup for the personal and professional categories.
The category content is wrapped around the display class element. The following
code shows the HTML content for the professional category:
<div class="detailProfessional" ng-show="selected">
<p class="aboutme">
{{professional.aboutme}}
</p>
<div class="section">
<div class="divider">
<h4>No of Year Experience</h4>
{{professional.years}}
<h4>Job Roles</h4>
<ol>
<li ng-repeat="role in
professional.roles">{{role}}</li>
</ol>
<h4>Languages Known</h4>
<ol>
<li ng-repeat="language in
professional.languages">{{language}}</li>
</ol>
<h4> Tools</h4>
<ol>
<li ng-repeat="tool in
professional.tools">{{tool}}</li>
</ol>
</div>
<div class="divider">
<h4>Web Technologies</h4>
<ol>
<li ng-repeat="webdev in
professional.webdevelopment">{{webdev}}</li>
</ol>
</div>
</div>
</div>
The HTML content of the personal category is rendered in the browser when the
personal category button is selected by the user. The following code shows the
HTML content of the personal category:
<div class="detailPersonal" ng-show="!selected">
<div class="section">
<div class="divider">
<h4>Full Name </h4> {{personal.name}}
[ 40 ]
Chapter 2
<h4>Spouse Name </h4> {{personal.spouse}}
<h4>Father Name </h4> {{personal.father}}
<h4>Mother Name </h4> {{personal.mother}}
<h4>Blood Group </h4> {{personal.bloodGroup}}
<h4>Height </h4> {{personal.height}}
</div>
<div class="divider">
<h4>Weight </h4> {{personal.weight}}
<h4>Chest </h4> {{personal.chest}}
<h4>Address </h4> {{personal.address}}
</div>
</div>
</div>
Social buttons row
This section has the HTML markup to show social links. When the user selects these
links, the application navigates to the targeted social page of the mentioned link.
The following code has the HTML markup for these social links:
<div class="footer">
<a ng-href='{{professional.social.twitter}}' class='symbol'
title=''></a>
<a ng-href='{{professional.social.facebook}}' class='symbol'
title=''></a>
<a ng-href='{{professional.social.linkedin}}' class='symbol'
title=''></a>
<a ng-href='{{professional.social.googleplus}}' class='symbol'
title=''></a>
</div>
The complete HTML code is present inside the profileTemplate.html file and can
be downloaded from the Packt Publishing support website.
We have created different SCSS files for each device. For social media icons, we have
used the icon-font.scss file that is used by all three types of devices. The code for
this icon-font.scss file is as follows:
@font-face {
font-family: 'Mono Social Icons Font';
src: url('../font/MonoSocialIconsFont-1.10.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.symbol, a.symbol:before {
font-family: 'Mono Social Icons Font';
-webkit-text-rendering: optimizeLegibility;
[ 41 ]
The AngularJS Dynamic Routing-based Approach
-moz-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
-o-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}
a.symbol:before {
content: attr(title);
margin-right: 0.3em;
font-size: 130%;
}
.symbol, a.symbol:before {
font-family: 'Mono Social Icons Font';
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
-o-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}
a.symbol:before {
content: attr(title);
margin-right: 0.3em;
font-size: 130%;
}
The preceding social media font file is imported using the @import statement inside
the SCSS file. The SCSS file for the desktop device is created inside the desktop.scss
file. The following code shows the desktop.scss file for desktop type devices:
@import "icon-font";
body {
background: #eee;
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 300;
.my-profile-container {
[ 42 ]
Chapter 2
background: white;
width: 1024px;
margin: auto;
box-shadow: 2px 2px 2px 2px lightgrey;
.row {
.pic {
height: 300px;
text-align: center;
.name {
font-weight: 100;
text-align: center;
background: #eee;
color: green;
}
.profile-image {
border-radius: 100%;
margin: 70px 0px 50px;
}
}
.about {
display: flex;
.btn {
border: 0 none;
color: green;
height: 60px;
width: 50%;
margin: 5px 0px;
font-weight: 100;
font-size: 16px;
cursor: pointer;
&:hover {
background: green;
color: #eee;
}
&.selected {
background: green;
color: #eee;
cursor: text;
}
}
}
.display {
height: 100%;
padding: 0px 30px;
[ 43 ]
The AngularJS Dynamic Routing-based Approach
.detailProfessional, .detailPersonal {
.section {
display: flex;
.divider {
width: 500px;
h4 {
font-weight: 300;
color: green;
}
}
}
position: relative;
.aboutme {
&:first-letter {
font-size: 25px;
color: green;
}
}
}
}
.footer {
background: #eee;
text-align: center;
a {
color: green;
text-decoration: none;
font-weight: 300%;
}
}
}
}
}
Developing a mobile view
For mobile type devices, we have created a different version of the
profileTemplate.html file. The HTML template code for mobile view is almost the
same; the only difference is the order of these sections. The HTML template code has
four rows similar to the desktop view with a given order. The order of these sections
is as follows:
Name and profile image row
Social buttons row
[ 44 ]
Chapter 2
Category content
Category selection row
You can download the complete code for the mobile view from the Packt Publishing
support website.
For mobile devices the SCSS file is created under the mobile.scss file. The following
code shows the content of the mobile.scss file:
@import "icon-font";
body {
background: #eee;
font-family: 'Roboto', sans-serif;
font-size: 15px;
font-weight: 400;
overflow:hidden;
.my-profile-container {
background: white;
width: 300px;
box-shadow: 2px 2px 2px 2px lightgrey;
margin: auto;
.row {
height: 100%;
.pic {
height: 120px;
text-align: center;
.name {
font-weight: 300;
text-align: center;
background: #eee;
color: green;
}
.profile-image {
border-radius: 100%;
}
}
.about {
display: flex;
.btn {
border: 0 none;
color: green;
height: 60px;
width: 50%;
font-weight: 100;
[ 45 ]
The AngularJS Dynamic Routing-based Approach
font-size: 16px;
cursor: pointer;
&:hover {
background: green;
color: #eee;
}
&.selected {
background: green;
color: #eee;
cursor: text;
}
}
}
.display {
height: 100%;
padding: 0px 15px;
.detailProfessional, .detailPersonal {
.section {
display: flex;
.divider {
width: 50%;
.text{
font-size: 15px;
}
h4 {
font-weight: 300;
color: green;
margin: 10px 10px 2px 0;
}
}
}
position: relative;
.aboutme {
&:first-letter {
font-size: 25px;
color: green;
}
}
}
}
.footer {
background: #eee;
text-align: center;
a {
[ 46 ]
Chapter 2
color: green;
text-decoration: none;
font-weight: 200%;
}
}
}
}
}
Developing a tablet view
For tablet type devices, a different version of the HTML template, which is a
profileTemplate.html file, is created inside the tablet directory. The HTML
markup for the desktop template is as follows:
<div class="my-profile-container">
<div class="row">
<div class="pic">
<h3 class="name">Sandeep Kumar Patel</h3>
<div class="row">
<div class="about">
<button class="btn" ng-model="professional"
ng-click="getDetail($event)"
ng-class="{'selected':selected}"
ng-disabled="selected">
Professional
</button>
<button class="btn" ng-model="personal"
ng-click="getDetail($event)"
ng-disabled="!selected"
ng-class="{'selected':!selected}">
Personal
</button>
</div>
</div>
<img class="profile-image"
src="http://www.gravatar.com/avatar/4205261332ff131e9
71b48db31dcb528.png" alt="profile image"/>
</div>
</div>
<div class="row">
<div class="footer">
<a ng-href='{{professional.social.twitter}}'
class='symbol' title=''></a>
[ 47 ]
The AngularJS Dynamic Routing-based Approach
<a ng-href='{{professional.social.facebook}}'
class='symbol' title=''></a>
<a ng-href='{{professional.social.linkedin}}'
class='symbol' title=''></a>
<a ng-href='{{professional.social.googleplus}}'
class='symbol' title=''></a>
</div>
</div>
<div class="row">
<div class="display">
<div class="detailProfessional" ng-show="selected">
<p class="aboutme text">
{{professional.aboutme}}
</p>
<div class="section">
<div class="divider">
<h4>Years of Experience</h4>
<span class="text">{{professional.years}}</
span>
<h4>Job Roles</h4>
<span class="text" ng-repeat="role in
professional.roles">
<em ng-if="!first"> </em> {{role}}
</span>
<h4>Languages Known</h4>
<span class="text" ng-repeat="language in
professional.languages">
<em ng-if="!first"> </em>{{language}}
</span>
</div>
<div class="divider">
<h4>Web Technologies</h4>
<span class="text" ng-repeat="webdev in
professional.webdevelopment">
<em ng-if="!first"> </em>{{webdev}}
</span>
<h4> Tools</h4>
<span class="text" ng-repeat="tool in
professional.tools">
<em ng-if="!first"> </em>{{tool}}
</span>
</div>
</div>
</div>
<div class="detailPersonal" ng-show="!selected">
<div class="section">
<div class="divider">
<h4>Full Name </h4>
<span class="text">{{personal.name}}</span>
<h4>Spouse Name </h4>
[ 48 ]
Chapter 2
<span class="text">{{personal.spouse}}</span>
<h4>Father Name </h4>
<span class="text">{{personal.father}}</span>
<h4>Mother Name </h4>
<span class="text">{{personal.mother}}</span>
<h4>Blood Group </h4>
<span class="text">{{personal.bloodGroup}}</
span>
<h4>Height </h4>
<span class="text">{{personal.height}}</span>
</div>
<div class="divider">
<h4>Weight </h4>
<span class="text">{{personal.weight}}</span>
<h4>Chest </h4>
<span class="text">{{personal.chest}}</span>
<h4>Address </h4>
<span class="text">{{personal.address}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
For tablet type devices, the tablet.scss file is created. The following code shows
the content of the tablet.scss file:
@import "icon-font";
body {
background: #eee;
font-family: 'Roboto', sans-serif;
font-size: 15px;
font-weight: 400;
overflow:hidden;
.my-profile-container {
background: white;
width: 768px;
box-shadow: 2px 2px 2px 2px lightgrey;
margin: auto;
.row {
height: 100%;
.pic {
text-align: center;
.name {
font-weight: 300;
text-align: center;
background: #eee;
color: green;
margin-bottom: 0px;
[ 49 ]
The AngularJS Dynamic Routing-based Approach
}
.profile-image {
border-radius: 100%;
}
}
.about {
display: flex;
.btn {
border: 0 none;
color: green;
height: 60px;
width: 50%;
font-weight: 100;
font-size: 16px;
cursor: pointer;
&:hover {
background: green;
color: #eee;
}
&.selected {
background: green;
color: #eee;
cursor: text;
}
}
}
.display {
height: 100%;
padding: 0px 15px;
.detailProfessional, .detailPersonal {
.section {
display: flex;
.divider {
width: 50%;
.text{
font-size: 15px;
}
h4 {
font-weight: 300;
color: green;
margin: 10px 10px 2px 0;
}
}
}
position: relative;
.aboutme {
&:first-letter {
font-size: 25px;
[ 50 ]
Chapter 2
color: green;
}
}
}
}
.footer {
background: #eee;
text-align: center;
a {
color: green;
text-decoration: none;
font-weight: 200%;
}
}
}
}
}
Verifying responsiveness
In this section, we have used the Chrome browser and the developer console to
simulate different device user agent strings for desktop, mobile, and tablet devices.
The following screenshot shows the Chrome console emulator for different devices:
[ 51 ]
The AngularJS Dynamic Routing-based Approach
You can change the model dropdown to different devices that have been emulated
such as Samsung Galaxy, Apple iPhone, and so on. The following screenshot shows
the desktop view of the profile page for general notebooks:
[ 52 ]
Chapter 2
The following screenshot shows the mobile view of the application, where the model
name is chosen as Apple iPhone 5:
[ 53 ]
The AngularJS Dynamic Routing-based Approach
The following screenshot shows the tablet view of the profile; the model name is
iPad mini device:
Limitations of dynamic routing
Using a dynamically based routing approach is a straightforward solution for
responsive application development. However, this approach leads to various
limitations and challenges for application maintenance. These limitations are
as follows:
Maintaining the user agent string list
Maintaining the device type list
Maintaining the template list
Summary
In this chapter, you learned how to set up an AngularJS project, a routing module,
and a device detection provider followed by building three different HTML
template versions for desktop, tablet, and mobile devices. Towards the end of the
chapter, you learned the limitations of the dynamic routing approach. In the next
chapter, you will learn about the directive-based approach for responsive web
application development.
[ 54 ]
Get more information Responsive Web Design with Angular JS
Where to buy this book
You can buy Responsive Web Design with AngularJS from the Packt Publishing website.
Alternatively, you can buy the book from Amazon, BN.com, Computer Manuals and most internet
book retailers.
Click here for ordering and shipping details.
www.PacktPub.com
Stay Connected:
