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 a bar chart directive based on D3

Besides simply showing a list of all the expenses entered, it would be a lot meaningful if we can also display a summary of the total expenses across the categories as a bar chart.

We will build our own custom bar chart directive that will generate graphs based on the inputs provided.

For this, we will use the D3 JavaScript library to create a SVG-based bar graph.

Note

Complete details on D3 and various examples of how to use it are available at http://d3js.org/.

An important thing to remember about the D3 library is that D3 is not a ready-to-use graphing library, where you pass the data values and define what type of graph you want.

D3 could be thought of as jQuery, but for data visualization. D3 simply provides a set of APIs to easily update and manage the DOM.

So, while bar graphs are amongst the most basic type of graphs, D3 can be used to build fairly complex and highly interactive data visualizations.

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