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.
  • Book Overview & Buying AngularJS Web Application Development Blueprints
  • Table Of Contents Toc
  • Feedback & Rating feedback
AngularJS Web Application Development Blueprints

AngularJS Web Application Development Blueprints

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

AngularJS Web Application Development Blueprints

4.3 (7)
By: Vinci J Rufus
Buy this Book

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
close
Preface
Icon
Preface
Icon
About JavaScript MVC frameworks
Icon
How AngularJS was born
Icon
The idea behind this book
Icon
What this book covers
Icon
What you need for this book
Icon
Who this book is for
Icon
Conventions
Icon
Reader feedback
Icon
Customer support
Free Chapter
1
1. Introduction to AngularJS and the Single Page Application
Icon
1. Introduction to AngularJS and the Single Page Application
Icon
Delving into Single Page Apps
Icon
Anatomy of a simple AngularJS app
Icon
Models and views
Icon
Building an Address Book App
Icon
Styling the app
Icon
Adding contacts to the Address Book
Icon
Summary
2
2. Setting Up Your Rig
Icon
2. Setting Up Your Rig
Icon
Setting up Node.js
Icon
Setting up Grunt
Icon
Yeoman – the workflow tool
Icon
Unit testing with Karma
Icon
Using Protractor for End-to-End tests
Icon
Summary
3
3. Rapid Prototyping with AngularJS
Icon
3. Rapid Prototyping with AngularJS
Icon
Understanding the application that we will Prototype
Icon
Introducing Grid Layouts and Bootstrap
Icon
Understanding the grid system
Icon
Introducing Angular UI
Icon
Prototyping the Healthy Living website
Icon
Summary
4
4. Using REST Web Services in Your AngularJS App
Icon
4. Using REST Web Services in Your AngularJS App
Icon
Understanding the response from a REST API
Icon
Jump starting your app development with Angular Seed
Icon
Mark-up our Layout
Icon
Creating the routes
Icon
Understanding AngularJS services
Icon
Writing your first factory service
Icon
Using promise for asynchronous calls
Icon
Displaying data from the JSON response
Icon
Unit testing our application
Icon
Mocking $http during Unit testing
Icon
Creating a Pinterest style layout
Icon
Adding actions to the buttons
Icon
Summary
5
5. Facebook Friends' Birthday Reminder App
Icon
5. Facebook Friends' Birthday Reminder App
Icon
Understanding the Facebook SDK
Icon
Setting up our project
Icon
Delving into AngularJS directives
Icon
Adding a Facebook login
Icon
Getting the user's friend list
Icon
Getting your friends' profile pictures and birthdays
Icon
Adding some CSS styles
Icon
Adding in the logout link
Icon
Writing automated tests
Icon
Summary
6
6. Building an Expense Manager Mobile App
chevron up
Icon
6. Building an Expense Manager Mobile App
Icon
Understanding HTML5 Web Storage
Icon
Building the Expense Manager App
Icon
Building the Add Expense form
Icon
Building a bar chart directive based on D3
Icon
Summarizing the expenses by categories
Icon
Making the app responsive
Icon
Adding touch events
Icon
Adding page transitions using ngAnimate
Icon
Making the app feel like a native app
Icon
Adding additional features
Icon
Summary
7
7. Building a CMS on the MEAN Stack
Icon
7. Building a CMS on the MEAN Stack
Icon
Why the MEAN stack?
Icon
Getting started with the MEAN stack
Icon
Building the server-side app
Icon
Securing your admin section
Icon
Integrating AngularJS with an ExpressJS project
Icon
Generating SEO-friendly URLs using HTML5 mode
Icon
Building the admin section for CRUD operations
Icon
Building a custom module for global notification
Icon
Setting up an Interceptor to detect responses
Icon
Building the frontend of our CMS
Icon
Displaying the content of a page
Icon
Summary
8
8. Scalable Architecture for Deployments on AWS
Icon
8. Scalable Architecture for Deployments on AWS
Icon
Understanding the various services in Amazon AWS
Icon
Delving into AWS deployment architectures
Icon
Deploying our app in a Server-less Architecture on AWS
Icon
Getting your app ready for production deployment
Icon
Performance
Icon
Summary
9
9. Building an E-Commerce Store
Icon
9. Building an E-Commerce Store
Icon
Backend as a Service
Icon
Building a BaaS platform on AWS
Icon
Creating our e-commerce app
Icon
Prototyping our application
Icon
Creating our application-level controller
Icon
Integrating AWS JS SDK with our application
Icon
Building our Add Products page
Icon
Creating our product details page
Icon
Summary
10
A. AngularJS Resources
Icon
A. AngularJS Resources
Icon
Official resources
Icon
Recommended AngularJS modules
Icon
Boiler plates
Icon
Learning resources
Icon
Good friends with AngularJS (third-party tools and services)
Icon
Core team members and knowledgeable people to follow
11
Index
Icon
Index

Building the Add Expense form

Now, let's create our Add Expense form. We will add the following code in the app/partials/add-expense.html file:

<h2>Add Expense</h2>
<form id="addForm" name="addForm" novalidate >
    <label>Category</label>
    <select ng-model="expense.category" ng-options="category for category in categories">
    </select>
    <label>Amount:</label>
    <input type="number" ng-model="expense.amount"></input>
    <label>Description:</label>
    <input type="text" ng-model="expense.description"></input>
    <button ng-click="submit()">Submit</button>
</form>

This is a rather straightforward form. The novalidate tag in HTML5 is used to disable the browser's default validations.

Notice that we are also making use of the built-in directive, ng-options, to dynamically load the category list into our select box.

We'll style the form by adding the following CSS to the app/css...

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 6
Next Section

Create a Note

Modal Close icon
You need to login to use this feature.
notes
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

Delete Note

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

Edit Note

Modal Close icon
Write a note (max 255 characters)
Cancel
Update Note

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY