Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • AngularJS Web Application Development Blueprints
  • Toc
  • feedback
AngularJS Web Application Development Blueprints

AngularJS Web Application Development Blueprints

By : Vinci J Rufus
4.3 (7)
close
AngularJS Web Application Development Blueprints

AngularJS Web Application Development Blueprints

4.3 (7)
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.
Table of Contents (12 chapters)
close
close
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
chevron up
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

Building the Expense Manager App

Now that we have a better understanding of Web Storage, let's use it to build our Expense Manager Application.

Like in the previous chapters, we will use the forked angular-seed project, which is available at https://github.com/areai51/angular-seed.

Let's create a folder named exp-mgr, and extract the contents of the angular-seed ZIP file into the folder.

Run the following command in the terminal to install the dependencies:

npm install

Let's start by tweaking the base index file located at app/index.html. We will replace the default HTML markup with the following code:

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
    <title>Expense Manager</title>
    <link rel="stylesheet" href="css/app.css" />
</head>
<body&gt...

Unlock full access

Continue reading for free

A Packt free trial gives you instant online access to our library of over 7000 practical eBooks and videos, constantly updated with the latest in tech
Start a 7-day FREE trial
End of Section 3
Next Section
bookmark search playlist font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete