AngularJS Web Application Development Blueprints

Vinci Rufus

• Publisher: Packt Publishing
• Year: 2014
• ISBN:
  9781783285617
• Edition: 1
• Topic: Ciencia de la computación
• Subtopic: Programación en JavaScript

This book is a practical guide that aims to help you learn how to utilize AngularJS and experience the joy of building full-fledged applications with minimal code in no time at all.

The book starts by explaining the basics of AngularJS and helps you get comfortable with the terms and concepts surrounding it. It then walks you through the various tools, frameworks, and workflows that will help you be more productive. As you go through the book, you will learn how to build applications spanning various realms. You will build social apps using publically available APIs and responsive, mobile- and tablet-friendly personal finance applications. You will see how to build a full-stack content management system, and build an e-commerce application on the cloud platform. Finally, this book will teach you the intricacies of what it takes to get your application deployed on a production server.

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

Table of contents

• AngularJS Web Application Development Blueprints