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

If you are a web application developer interested in using AngularJS for a real-life project, then this book is for you. As a prerequisite, knowledge of JavaScript and HTML is expected, and a working knowledge of AngularJS is preferred.

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 (12 chapters)
Preface
Preface
About JavaScript MVC frameworks
How AngularJS was born
The idea behind this book
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Free Chapter
1
1. Introduction to AngularJS and the Single Page Application
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
Styling the app
Adding contacts to the Address Book
Summary
2
2. Setting Up Your Rig
2. 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
3. Rapid Prototyping with AngularJS
3. 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
4. Using REST Web Services in Your AngularJS App
4. 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
5. Facebook Friends' Birthday Reminder App
5. 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
6. Building an Expense Manager Mobile App
6. 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
7. Building a CMS on the MEAN Stack
7. 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
8. Scalable Architecture for Deployments on AWS
8. 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
9. Building an E-Commerce Store
9. 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
10
A. AngularJS Resources
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
11
Index
Index

Unit testing our application

The angular-seed project comes with Unit testing baked in. In the terminal window, run the following command:

npm test

This will run the default tests and show the output in the terminal window. We will notice that the tests fail. The reason being our tests are looking for the myCtrl1 or myCtrl2 function within our controller, but it isn't there.

Let's open up our test/unit/controllersSpec.js file and remove those default tests. Save the file and immediately you will notice that our tests pass.

Let's write our Unit test to test the web services we wrote.

Previous Section
End of Chapter 4
Next Chapter