Learning Single-page Web Application Development

Fernando Monteiro

• Publisher: Packt Publishing
• Year: 2014
• eBook ISBN: 9781783552092
• Edition: 1
• Topic: Computer Science
• Subtopic: Application Development
• Index: Computer Science

Learning Single-page Web Application Development is a journey through application development using the MEAN stack with JavaScript  on the server side and client side, covering concepts such as RESTful, authentication and session on SPA. You will build large-scale applications. You will use a JavaScript environment with Node.js on the server, MongoDB as the database, and AngularJS on the frontend.

Everything is integrated with the Bower dependency manager, Yeoman, and other modern tools to speed up your development process. You will deploy your application to the cloud and learn how to prepare your directory structure to scale and grow.

Learning Single-page Web Application Development will give you an overview of AngularJS and RESTful APIs, and guide you in learning how to leverage single page development tools to create efficient and effective applications.

Learning Single-page Web Application Development

---

Table of Contents

Learning Single-page Web Application Development

Credits

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Understanding Single Page Application

Getting acquainted with SPA

Understanding the work of SPAs

Understanding the MVC/MVVM/MV* pattern

Peculiarities between SPA and traditional web development

Choosing a library or framework

Introducing the MEAN stack

Tools to develop web applications

Text editor

AngularJS

Debugging tools

Generators and the task manager

Yeoman

Bower

Grunt

The SPA directory structure

It's all about JavaScript

HTML, CSS, and the responsive way

Pure CSS

Summary

2. Taking a Deep Dive into Node.js and MongoDB

Node server, NPM, and middleware

Event-driven development and the event loop

The event loop

Working with require() and modules

The require() function

The Node modules

Express – a web framework on a server

MongoDB and the terminal

Comparing a relational database with the NoSQL database

The mongo shell

MongoDB connection with Mongoose

Mongoose schemas and models

Summary

3. API with MongoDB and Node.js

The working of an API

Boilerplates and generators

Hackathon starter

MEAN.io or MEAN.JS

The Passport module

Generators

The Express generator

The speakers API concept

The user history

Creating the package.json file

Initiating the JSON file

Node server with server.js

Model with the Mongoose schema

Defining the API routes

Using MongoDB in the cloud

Inserting data with Postman

Summary

4. Creating a Conference Web Application

Rebuilding the API

Getting the baseline structure

Changing the initialization process

Changing the directory structure

Inserting new folders and files

Creating the configuration file

Adding the Passport middleware

Adding session control and password encryption

Setting password encryption to a user model

Reviewing the changes in the server.js file

Dealing with routes

Templates with Embedded JavaScript

Bower leading frontend dependencies

Pure CSS and Responsive Boilerplate for frontend views

Creating the index, profile, login, and signup pages

Summary

5. Starting with AngularJS

Starting the baseline application

The AngularJS MVC pattern implementation

Model

View

Controller

Detailing directives, expressions, and scope

Two-way data binding and templates

Reusing templates

Understanding dependency injection

Services

Modules in AngularJS

Project organization

Summary

6. Understanding Angular Views and Models

Dissecting and understanding the MEAN.JS generator

Differentiating MEAN.JS and MEAN.io

Scaffolding the application

The application anatomy

Refactoring the API

The angular-gravatar image directive

Testing the speakers' API routes

Summary

7. Testing Angular SPA with Karma and Protractor

Testing concepts

Introducing Jasmine

Configuring Karma (unit testing)

Reviewing the speaker controller test

Running a Karma test

Reviewing the speaker model test

Karma testing with WebStorm

Configuring Protractor (e2e testing)

Configuring the e2e testing folder

Starting the Selenium server

Summary

8. Deploying the Application to the Cloud

Hosting the project on GitHub

Continuous application development

Automatic deployment from GitHub

Setting up a Shippable account

Setting up a Heroku account

Additional notes on Heroku deployment

Hands-on deployment

Checking the build process

Checking the application in production

Final notes on SPA

Summary

Index

Learning Single-page Web Application Development

Copyright © 2014 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: December 2014

Production reference: 1191214

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-78355-209-2

www.packtpub.com

Credits

Author

Fernando Monteiro

Reviewers

Shivang Agarwal

Giacomo Zinetti

Commissioning Editor

Edward Gordon

Acquisition Editor

James Jones

Content Development Editor

Athira Laji

Technical Editor

Vivek Arora

Copy Editors

Simran Bhogal

Ameesha Green

Relin Hedly

Deepa Nambiar

Project Coordinator

Harshal Ved

Proofreaders

Maria Gould

Linda Morris

Jonathan Todd

Indexer

Priya Sane

Graphics

Abhinash Sahu

Production Coordinator

Shantanu N. Zagade

Cover Work

Shantanu N. Zagade

About the Author

Fernando Monteiro is a frontend engineer, speaker, open source contributor, and the mind behind the Responsive Boilerplate, a CSS library built with Less.js for responsive layouts.

He contributes several articles and materials on design, development, and user experience on his bl...

Table of contents

• Learning Single-page Web Application Development