Book Image

AngularJS Web Application Development Blueprints

By : Vinci J Rufus
Book Image

AngularJS Web Application Development Blueprints

By: Vinci J Rufus

Overview of this book

Related Content you might be interested in

Current Title:

Small book image
AngularJS Web Application Development Blueprints
Vinci J Rufus
Aug, 2014 | 300 pages
No titles found
Table of Contents (17 chapters)
AngularJS Web Application Development Blueprints
AngularJS Web Application Development Blueprints
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Introduction to AngularJS and the Single Page Application
Introduction to AngularJS and the Single Page Application
Delving into Single Page Apps
Anatomy of a simple AngularJS app
Models and views
Building an Address Book App
Styling the app
Adding contacts to the Address Book
Summary
2
Setting Up Your Rig
Setting Up Your Rig
Setting up Node.js
Setting up Grunt
Yeoman – the workflow tool
Unit testing with Karma
Using Protractor for End-to-End tests
Summary
3
Rapid Prototyping with AngularJS
Rapid Prototyping with AngularJS
Understanding the application that we will Prototype
Introducing Grid Layouts and Bootstrap
Understanding the grid system
Introducing Angular UI
Prototyping the Healthy Living website
Summary
4
Using REST Web Services in Your AngularJS App
Using REST Web Services in Your AngularJS App
Understanding the response from a REST API
Jump starting your app development with Angular Seed
Mark-up our Layout
Creating the routes
Understanding AngularJS services
Writing your first factory service
Using promise for asynchronous calls
Displaying data from the JSON response
Unit testing our application
Mocking $http during Unit testing
Creating a Pinterest style layout
Adding actions to the buttons
Summary
5
Facebook Friends' Birthday Reminder App
Facebook Friends' Birthday Reminder App
Understanding the Facebook SDK
Setting up our project
Delving into AngularJS directives
Adding a Facebook login
Getting the user's friend list
Getting your friends' profile pictures and birthdays
Adding some CSS styles
Adding in the logout link
Writing automated tests
Summary
6
Building an Expense Manager Mobile App
Building an Expense Manager Mobile App
Understanding HTML5 Web Storage
Building the Expense Manager App
Building the Add Expense form
Building a bar chart directive based on D3
Summarizing the expenses by categories
Making the app responsive
Adding touch events
Adding page transitions using ngAnimate
Making the app feel like a native app
Adding additional features
Summary
7
Building a CMS on the MEAN Stack
Building a CMS on the MEAN Stack
Why the MEAN stack?
Getting started with the MEAN stack
Building the server-side app
Securing your admin section
Integrating AngularJS with an ExpressJS project
Generating SEO-friendly URLs using HTML5 mode
Building the admin section for CRUD operations
Building a custom module for global notification
Setting up an Interceptor to detect responses
Building the frontend of our CMS
Displaying the content of a page
Summary
8
Scalable Architecture for Deployments on AWS
Scalable Architecture for Deployments on AWS
Understanding the various services in Amazon AWS
Delving into AWS deployment architectures
Deploying our app in a Server-less Architecture on AWS
Getting your app ready for production deployment
Performance
Summary
9
Building an E-Commerce Store
Building an E-Commerce Store
Backend as a Service
Building a BaaS platform on AWS
Creating our e-commerce app
Prototyping our application
Creating our application-level controller
Integrating AWS JS SDK with our application
Building our Add Products page
Creating our product details page
Summary
AngularJS Resources
AngularJS Resources
Official resources
Recommended AngularJS modules
Boiler plates
Learning resources
Good friends with AngularJS (third-party tools and services)
Core team members and knowledgeable people to follow
Index
Index

Understanding the grid system

Of late, grid systems have been extensively used in web-development workflows. Grid systems aim to streamline the HTML markup process by providing a standard set of dimensions and display styles for the commonly used UI elements. The following screenshot shows a grid system:

Bootstrap has a default 12-column grid system that is available as a responsive, fluid, and fixed layout. It comes with a complete set of predefined classes that meets nearly all your UI styling needs.

Some of the most commonly used classes are mentioned in the following table:

Class

Description

.col-md-*

This is for column widths that are applied to a content block for medium screen devices such as desktops with resolutions greater than or equal to 992 px wide.

.col-xs-*

This is for small devices with a width of 768 px or less.

.col-sm-*

This is for tablet devices with a size of 768 px or more.

.col-lg-*

This is for large devices with sizes greater than or equal to 1200 px...

Previous Section
End of Section 4
Next Section