AngularJS Web Application,Development Blueprints电子书

AngularJS Web Application Development Blueprints

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