AngularJS Web Application Development Blueprints
By Vinci Rufus
()
About this ebook
Related to AngularJS Web Application Development Blueprints
Related ebooks
Mastering Web Application Development with Express Rating: 0 out of 5 stars0 ratingsNode Web Development, Second Edition Rating: 0 out of 5 stars0 ratingsWeb Application Development with MEAN Rating: 0 out of 5 stars0 ratingsLearning AngularJS Animations Rating: 4 out of 5 stars4/5Node.js Web Development - Third Edition Rating: 2 out of 5 stars2/5Node.js By Example Rating: 2 out of 5 stars2/5ReactJS for Jobseekers: The Only Guide You Need to Learn React and Crack Interviews (English Edition) Rating: 0 out of 5 stars0 ratingsLearning Node.js for Mobile Application Development Rating: 0 out of 5 stars0 ratingsModern JavaScript Applications Rating: 0 out of 5 stars0 ratingsLearning Node.js for .NET Developers Rating: 0 out of 5 stars0 ratingsAngularJS Deployment Essentials Rating: 0 out of 5 stars0 ratingsMongoose for Application Development Rating: 5 out of 5 stars5/5ASP.NET Core for Jobseekers: Build Career in Designing Cross-Platform Web Applications Using Razor and Entity Framework Core Rating: 0 out of 5 stars0 ratingsLearning Underscore.js Rating: 0 out of 5 stars0 ratingsWeb Development with MongoDB and NodeJS - Second Edition Rating: 0 out of 5 stars0 ratingsLearning Angular for .NET Developers Rating: 0 out of 5 stars0 ratingsGetting Started with Angular - Second Edition Rating: 0 out of 5 stars0 ratingsMEAN Web Development Rating: 5 out of 5 stars5/5MEAN Web Development - Second Edition Rating: 0 out of 5 stars0 ratingsASP.NET Web API Security Essentials Rating: 0 out of 5 stars0 ratingsWeb Development with MongoDB and Node.js Rating: 0 out of 5 stars0 ratingsVue.js for Jobseekers: A complete guide to learning Vue.js, building projects, and getting hired (English Edition) Rating: 0 out of 5 stars0 ratingsASP.NET Core 3 and React: Hands-On full stack web development using ASP.NET Core, React, and TypeScript 3 Rating: 0 out of 5 stars0 ratingsObject Oriented Programming with Angular: Build and Deploy Your Web Application Using Angular with Ease ( English Edition) Rating: 0 out of 5 stars0 ratingsNode.js Blueprints Rating: 0 out of 5 stars0 ratingsAngular JS for Beginners: Your Guide to Easily Learn Angular JS In 7 Days Rating: 2 out of 5 stars2/5Bootstrap for ASP.NET MVC - Second Edition Rating: 5 out of 5 stars5/5Node.js 6.x Blueprints Rating: 0 out of 5 stars0 ratingsAngular Essentials: The Essential Guide to Learn Angular Rating: 0 out of 5 stars0 ratings
Programming For You
Learn to Code. Get a Job. The Ultimate Guide to Learning and Getting Hired as a Developer. Rating: 5 out of 5 stars5/5Python Programming : How to Code Python Fast In Just 24 Hours With 7 Simple Steps Rating: 4 out of 5 stars4/5Coding All-in-One For Dummies Rating: 4 out of 5 stars4/5HTML & CSS: Learn the Fundaments in 7 Days Rating: 4 out of 5 stars4/5Grokking Algorithms: An illustrated guide for programmers and other curious people Rating: 4 out of 5 stars4/5SQL: For Beginners: Your Guide To Easily Learn SQL Programming in 7 Days Rating: 5 out of 5 stars5/5SQL QuickStart Guide: The Simplified Beginner's Guide to Managing, Analyzing, and Manipulating Data With SQL Rating: 4 out of 5 stars4/5Excel : The Ultimate Comprehensive Step-By-Step Guide to the Basics of Excel Programming: 1 Rating: 5 out of 5 stars5/5Python QuickStart Guide: The Simplified Beginner's Guide to Python Programming Using Hands-On Projects and Real-World Applications Rating: 0 out of 5 stars0 ratingsLearn PowerShell in a Month of Lunches, Fourth Edition: Covers Windows, Linux, and macOS Rating: 0 out of 5 stars0 ratingsPYTHON: Practical Python Programming For Beginners & Experts With Hands-on Project Rating: 5 out of 5 stars5/5Photoshop For Beginners: Learn Adobe Photoshop cs5 Basics With Tutorials Rating: 0 out of 5 stars0 ratingsMastering Windows PowerShell Scripting Rating: 4 out of 5 stars4/5The Absolute Beginner's Guide to Binary, Hex, Bits, and Bytes! How to Master Your Computer's Love Language Rating: 5 out of 5 stars5/5Learn JavaScript in 24 Hours Rating: 3 out of 5 stars3/5Hacking: Ultimate Beginner's Guide for Computer Hacking in 2018 and Beyond: Hacking in 2018, #1 Rating: 4 out of 5 stars4/5Python Machine Learning By Example Rating: 4 out of 5 stars4/5Problem Solving in C and Python: Programming Exercises and Solutions, Part 1 Rating: 5 out of 5 stars5/5Programming Arduino: Getting Started with Sketches Rating: 4 out of 5 stars4/5OneNote: The Ultimate Guide on How to Use Microsoft OneNote for Getting Things Done Rating: 1 out of 5 stars1/5SQL All-in-One For Dummies Rating: 3 out of 5 stars3/5Modern C++ for Absolute Beginners: A Friendly Introduction to C++ Programming Language and C++11 to C++20 Standards Rating: 0 out of 5 stars0 ratings
Reviews for AngularJS Web Application Development Blueprints
0 ratings0 reviews
Book preview
AngularJS Web Application Development Blueprints - Vinci Rufus
Table of Contents
AngularJS Web Application Development Blueprints
Credits
About the Author
About the Reviewers
www.PacktPub.com
Support files, eBooks, discount offers, and more
Why subscribe?
Free access for Packt account holders
Preface
About JavaScript MVC frameworks
How AngularJS was born
The idea behind this book
What this book covers
What you need for this book
Software versions
Copying the code files
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
1. 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
Understanding the scope in AngularJS
Styling the app
Sorting the contacts alphabetically
Adding contacts to the Address Book
The ng-show and ng-hide directives
Summary
2. Setting Up Your Rig
Setting up Node.js
Creating a simple Node.js web server with ExpressJS
Setting up Grunt
Installing Grunt-cli
Creating the package.json file
Creating your Grunt tasks
Grunt tasks to merge and concatenate files
Running shell commands via Grunt
Yeoman – the workflow tool
Installing Yeoman
Running your app
Unit testing with Karma
Using Protractor for End-to-End tests
Installing Selenium Server
Understanding the example_spec.js file
Understanding the conf.js file
Writing your own Protractor test cases
Summary
3. Rapid Prototyping with AngularJS
Understanding the application that we will Prototype
Introducing Grid Layouts and Bootstrap
Understanding the grid system
Introducing Angular UI
UI-Utils
UI-Modules
UI-Bootstrap
NG-Grid
UI-Router
IDE Plugins
Prototyping the Healthy Living website
Adding the ui.bootstrap dependency
Creating the navigation bar
Adding the carousel
Tweaking the hero unit
Adding the three content blocks
Creating a new view
Understanding routes
Building the articles view
Accordions using Angular Bootstrap
Building the image gallery
Gallery view using Bootstrap Thumbnail
Adding the star rating
Building data grids using NG-Grid
Adding the NG-Grid component
Grouping data in NG-Grid
Excel-style editing in NG-Grid
Creating a modal window to add subscribers
Real-time form validations
Summary
4. Using REST Web Services in Your AngularJS App
Understanding the response from a REST API
Testing a RESTful web service
Jump starting your app development with Angular Seed
Files and folders in Angular Seed
Adding Bootstrap libraries
Starting your Node web server
Mark-up our Layout
Creating the routes
Understanding AngularJS services
Writing your first factory service
Dependency Injection
Coding the partial
Calling the REST web service using $http
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
Understanding the Facebook SDK
The Social Graph
The Graph API
The Graph API Explorer
Creating your Facebook app
Setting up our project
Running your application
Delving into AngularJS directives
What is a directive?
Importance of naming conventions for directives
The anatomy of a directive
Writing our first directive
Adding a Facebook login
Adding the fb-root div element
Loading the Facebook SDK
Understanding $watch and $digest
When to use $apply
Getting the user's friend list
Getting your friends' profile pictures and birthdays
Requesting additional permission with FB.login
Understanding isolated scope
Adding some CSS styles
Changing the routes
Adding in the logout link
Writing automated tests
Writing Unit tests with Karma
Writing End-to-End tests using Protractor
Summary
6. Building an Expense Manager Mobile App
Understanding HTML5 Web Storage
localStorage
sessionStorage
Building the Expense Manager App
Building the Add Expense form
What is $rootScope?
Understanding the .run block
Creating a value service to store CategoryList
Validating the Add Expense form
Using localStorage to save data
Building a bar chart directive based on D3
Summarizing the expenses by categories
Creating our bar chart directive
Making the app responsive
Adding the CSS media query
Scaling the D3 chart based on window size
Adding touch events
Enabling swipe gestures using ngTouch
Adding page transitions using ngAnimate
Loading the ngAnimate module
Adding CSS3 transitions
Making the app feel like a native app
Adding touch icons
Running the app in fullscreen mode
Adding additional features
Summary
7. Building a CMS on the MEAN Stack
Why the MEAN stack?
Getting started with the MEAN stack
Setting up MongoDB
Setting up ExpressJS and MongooseJS
Building the server-side app
Creating the Mongoose schemas
Creating CRUD routes
Adding a new entry to the collection
Updating a collection
Deleting a collection item
Displaying a single record
Securing your admin section
Using bcrypt to encrypt passwords
Adding a new admin user
Creating the route for authenticating login
Creating the logout route
Writing the sessionCheck middleware
Integrating AngularJS with an ExpressJS project
Generating SEO-friendly URLs using HTML5 mode
Building the admin section for CRUD operations
Creating the routes for the admin section
Building the factory services
Building the controllers for the admin section
Setting up the admin page layout
Building the listing view for the admin section
Setting up authentication in AngularJS
Creating our login page
Building a custom module for global notification
Building and initializing the message.flash module
Building the message.flash factory service
Setting up $broadcasts
Building the directive for the message.flash module
Setting a flash message
Creating our Add-Edit page controller
Creating our Add-Edit view
Writing a custom filter to autogenerate the URL field
Adding the WYSIWYG editor
Setting up an Interceptor to detect responses
Building the frontend of our CMS
Building our navigation bar directive
Building the admin-login directive
Displaying the content of a page
Setting the default home page
Summary
8. Scalable Architecture for Deployments on AWS
Understanding the various services in Amazon AWS
Delving into AWS deployment architectures
The EC2 server-based architecture
The Server-less Architecture
Deploying our app in a Server-less Architecture on AWS
Mapping a domain to S3
Mapping the S3 bucket to a CloudFront distribution
Getting your app ready for production deployment
Improving the page-load time of your app
Setting Expires headers
Performance
Summary
9. Building an E-Commerce Store
Backend as a Service
Building a BaaS platform on AWS
Setting up an S3 Bucket with public read access
Setting up the CORS policy on your S3 bucket
Creating our DynamoDB tables
Creating the Identity and Access Management (IAM) role
Creating our e-commerce app
Building nested views using UI-Router
Mapping states to URL, views, and controllers
Prototyping our application
Setting up our index.html file
Creating the controllers
Creating the product partials
Adding animations to the view transitions
Adding in the CSS transition effects
Creating our application-level controller
Adding a Facebook login
Integrating AWS JS SDK with our application
Creating the AWS service provider
Building our Add Products page
Saving data in DynamoDB tables
Creating the view for the add product form
Building the controller for the add products view
Uploading images to S3
Fetching the products lists for a category
Using resolves to preload data
Creating our product details page
Adding products to cart
The checkout page
Saving the orders
Summary
A. 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
AngularJS Web Application Development Blueprints
AngularJS Web Application Development Blueprints
Copyright © 2014 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: August 2014
Production reference: 1180814
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78328-561-7
www.packtpub.com
Cover image by Faiz Fattohi (<faizfattohi@gmail.com>)
Credits
Author
Vinci Rufus
Reviewers
Jeff Cunningham
Ashutosh Das
AJ Kerrigan
Ciro Nunes
Yacine Rezgui
Commissioning Editor
Akram Hussain
Acquisition Editor
Richard Harvey
Content Development Editor
Vaibhav Pawar
Technical Editors
Shashank Desai
Menza Mathew
Copy Editors
Karuna Narayanan
Alfida Paiva
Laxmi Subramanian
Project Coordinators
Binny K. Babu
Kranti Berde
Proofreaders
Bridget Braund
Paul Hindle
Lucy Rowland
Indexers
Hemangini Bari
Mariammal Chettiyar
Rekha Nair
Priya Subramani
Graphics
Valentina D'silva
Production Coordinator
Aparna Bhagat
Cover Work
Aparna Bhagat
About the Author
Vinci Rufus has been working with frontend technologies for close to 14 years now. He started his career building games with Flash ActionScript and later moved on to JavaScript and HTML5. During his spare time, he enjoys conducting workshops and training people.
For a living, he mentors, guides, and helps grow the technology team at Razorfish Neev, primarily in the area of commerce, usability, and emerging technologies.
A sincere thanks to the awesome team at Razorfish Neev. I've learned so much working with you all.
My deepest regards to the technical reviewers, Jeff Cunningham, Ashutosh Das, AJ Kerrigan, Ciro Nunes, and Yacine Rezgui, and also to the content development editor, Vaibhav Pawar, whose insights and feedback greatly helped in adding the finishing touches for this book.
A big thank you to my family; my dad, Rufus, who learned computers only so that he could teach me; my mom, Anne, who has always encouraged me to take up challenges every time I thought it wasn't possible; my awesome kids, Shannon and Jaden, who sacrificed a lot of their play time so that I could write this book; my wife, Raina, for all the support that was instrumental in this book reaching its completion; and finally, my sister, Blaisy, who was always there to give feedback and critique my work, and with whom I could brainstorm and discuss ideas.
About the Reviewers
Jeff Cunningham is a mobile app developer at Comdata in Nashville, TN. After 15 years of working in the field of Java web development, he now enjoys the challenges of frontend and mobile development. He also reviewed the book, AngularJS Directives, Packt Publishing, and maintains the popular repo named AngularJS-Learning on GitHub (https://github.com/jmcunningham/AngularJS-Learning).
Ashutosh Das, who hails from Bangladesh, works mainly as a backend developer and his experience includes working with Django, Node.js, Laravel, and so on. He also likes to work with AngularJS. He spends his spare time writing for GitHub. He also works as a freelancer and is a part-time job holder. He is currently in the process of reviewing the book, AngularJS UI Development, Packt Publishing.
AJ Kerrigan is a systems analyst with a small IT department in New Jersey. His technical duties and interests include server and database administration, command-line scripting, and web development.
AngularJS Web Application Development Blueprints, Packt Publishing, represents AJ's first experience as a technical reviewer.
I would like to thank my wife, daughter, and dog for their love, support, and endless supply of hugs. Thanks to my father as well, who provided me with my first exposure to programming (BASIC on the family TI-99/4a computer). He has been a consistent source of encouragement and guidance.
Ciro Nunes is a 22-year old frontend engineer, test-first evangelist, and specialist in large-scale architectures for heavy client-side applications. At such a young age, he has been responsible for the development of the biggest e-commerce websites from Latin America. He's also the organizer of the AngularJS SP Meetup which has more than 400 members.
Nowadays, he's working on applications for the financial market that pushes the boundaries of AngularJS.
I want to thank my family and friends for their patience, with me being so absent lately. I promise that I'm going to walk more with the dog and spend more time with you whom I love.
Yacine Rezgui is a French-Tunisian web developer. He started web developing at the age of 12, and since then, has made his passion his job. He's specialized in web development and strongly believes that it is the best cross-platform environment. He's currently the organizer of the London Phonegap Meetup.
He worked in different companies such as Médiamétrie eStat, Tequila Rapido, and GovernorHub as a freelancer.
I would like to thank my friends, James Nocentini, James Sharp, Cédric Ferretti, and Xavier Kress for supporting me on my work, my family for all their encouragement, and Xuxu for helping me to focus.
www.PacktPub.com
Support files, eBooks, discount offers, and more
You might want to visit www.PacktPub.com for support files and downloads related to your book.
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
http://PacktLib.PacktPub.com
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books.
Why subscribe?
Fully searchable across every book published by Packt
Copy and paste, print and bookmark content
On demand and accessible via web browser
Free access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access.
Preface
The most annoying part of using any website or web application is the time we wait for pages to load. Sure, everybody is working on making the Web fast, but those 2-3 seconds that it takes for a round trip to the server does not stop you from opening multiple tabs and often forgetting which tab you originally were on.
The rapid popularity of JavaScript frameworks and technologies such as AJAX clearly show the desperate need to save those 1 or 2, second-round trips to the server, and provide the users with a more desktop-like user experience.
About JavaScript MVC frameworks
These JavaScript frameworks aren't some new revolutionary technology or a new discovery; they are all still using the same old faithful JavaScript. These JavaScript frameworks merely provide a layer of abstraction (if I may) or a more Model-View-Controller-like architecture, so that we can be more productive while building apps and don't really have to worry about mundane things.
The credit for the rising popularity of these JavaScript frameworks would go to this surge of JavaScript-based highly interactive and rich Internet applications that nowadays do so much more than just displaying data received from a backend server. All of this is possible thanks to the modern day browser and their JavaScript engines that have become faster and powerful.
There has nearly been an explosion of these JavaScript MVC frameworks, and every other day, we see a new framework being launched. While most people consider Backbone.js or SproutCore to be one of the first JavaScript frameworks, I would say Ext JS by Sencha has been among the first JavaScript frameworks and one that is still being extensively used in the corporate world mainly to build finance apps. While Backbone.js and SproutCore were launched in 2010, Version 2.0 of Ext JS was launched towards the end of 2007.
AngularJS too was launched somewhere in 2010. Around the same time, other JavaScript frameworks were sprouting up. However, it is probably the fastest growing framework in terms of user adoption, mainly due to the wow
factor and also the backing from the big G.
Each framework has its own pros and cons, and ideally the choice of the framework would depend on the nature of your project.
Note
http://www.todomvc.com/ is a very nice site to understand and compare the functioning of these JavaScript frameworks.
AngularJS is currently the most popular JavaScript MVC framework. Some of the reasons for this would be as follows:
It's among the simplest to learn
It follows some of the best software-engineering concepts, and is ideal to build large, scalable apps
It has a robust testing framework to run Unit tests and End-to-End tests, thus making it easy to write and run automated test cases
It also allows for teams to work in parallel on a single application without stepping over each other's work
It has the fastest growing community of adaptors, and the AngularJS Google Groups and IRC chats are a great place to interact with others
How AngularJS was born
AngularJS started as an internal Google project by Misko Hevery, sometime in 2009. As the story goes, Misko's team was working on a project called Google Feedback; even after six months of development and about 17,000 lines of code, they were still unhappy with the pace of development and the inability to write automated tests. That's when Misko decided to rewrite that. It took him about 3 weeks and he managed to write the whole thing in just about 1,500 lines of code.
That's when AngularJS got some serious attention internally at Google, and a team was put together to help further develop it. Around 2010, Google decided to declare it as open source under the MIT license.
The idea behind this book
The idea behind writing this book is to showcase the different types of applications that can be built on AngularJS. Besides explaining AngularJS and how to write modular and testable code, there is a fair amount of emphasis on making those apps look beautiful. So, be ready for some CSS stuff and design-related discussions.
I've tried to cover a variety of applications ranging from a simple address book, an HTML5 mobile app, an e-commerce store, a CMS framework, and also ideas on how to deploy apps on Amazon AWS.
What this book covers
This book is broken down into nine chapters.
Chapter 1, Introduction to AngularJS and the Single Page Application, talks about the concept of a Single Page App and how they are different from the regular web apps. We'll also learn about the basics of AngularJS by building a simple Address Book App.
Chapter 2, Setting Up Your Rig, talks about how having the right set of tools can be a huge productivity booster. It also makes you feel like a pro when building your AngularJS app. This chapter will talk about some of the tools such as Node.js, ExpressJS, Grunt, Yeoman, and Karma.
Chapter 3, Rapid Prototyping with AngularJS, talks about the ease with which one can create clickable prototypes to get a feel of how an application would look and feel before working on any backend code.
Chapter 4, Using REST Web Services in Your AngularJS App, will show you how to consume data from third-party REST web services using factories and the $http service.
Chapter 5, Facebook Friends' Birthday Reminder App, will explain directives and how we can create our Facebook login directive. We will also set up some automated tests to ensure everything is working fine.
Chapter 6, Building an Expense Manager Mobile App, will walk you through the process of building a responsive and touch-friendly mobile app using ngAnimate and HTML5 features such as localStorage.
Chapter 7, Building a CMS on the MEAN Stack, talks about how to set up an entire backend and frontend system and how AngularJS interacts with a node server and MongoDB database. We will also look at session management and interceptors.
Chapter 8, Scalable Architecture for Deployments on AWS, will teach you about AWS and its various services, and how we can deploy our app in a Server-less Architecture that can inherently scale.
Chapter 9, Building an E-Commerce Store, will show you how to directly read and write data from AWS's DynamoDB database, and upload images to S3 directly from our JavaScript app.
Appendix, AngularJS Resources. Well, you know what to expect here.
What you need for this book
You obviously don't need to read the entire book before you can start working on your first AngularJS project. I'm a firm believer of learning things the practical way, and that's why from the very first chapter, you will find yourself firing up your IDE/Text editor, and writing code and testing it on your browser.
While you will learn a couple of new features of AngularJS in each of the chapters, each chapter is still self-contained, and you can comfortably jump to any of the chapters that interest you or that you need to refer to for your project.
However, if you are just starting off with AngularJS, then I strongly recommend that you read through the first three chapters before you start jumping.
Software versions
The current stable version of AngularJS while writing this book is 1.2, and unless specified, we will be using the stable version of