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
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
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
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
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
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
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
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
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.
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.
