Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library 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
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
Lock 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

Making the app responsive

Responsive Web Design (RWD) is a design approach where the layout of an app adjusts automatically to provide the most optimum viewing experience on the device or screen size on which the app is being viewed.

Responsive designs are built by making use of the CSS3 media query feature, where one can apply different CSS properties for an element based on certain conditions that it satisfies.

In our current application, we would like the View Summary page to display the graph and expense details side by side when viewed on a large screen. However, when viewed on a mobile, we would like the graph to show up the preceding details table in a single column.

While doing so, we also need to make sure that the graph scales automatically, depending on the screen size.

Adding the CSS media query

As we want to alter the positions of the graph and details table depending on the screen size, let's first wrap each of them within individual divs for easier manipulation.

Please update the...

CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
AngularJS Web Application Development Blueprints
End of Section 6
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

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

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon