7. Introduction to AngularJS | MEAN Web Development

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents
Feedback & Rating

MEAN Web Development

By : Haviv

4.5 (58)

MEAN Web Development

4.5 (58)

By: Haviv

Overview of this book

The MEAN stack is a collection of the most popular modern tools for web development; it comprises MongoDB, Express, AngularJS, and Node.js. Starting with MEAN core frameworks, this project-based guide will explain the key concepts of each framework, how to set them up properly, and how to use popular modules to connect it all together. By following the real-world examples shown in this tutorial, you will scaffold your MEAN application architecture, add an authentication layer, and develop an MVC structure to support your project development. Finally, you will walk through the different tools and frameworks that will help expedite your daily development cycles. Watch how your application development grows by learning from the only guide that is solely orientated towards building a full, end-to-end, real-time application using the MEAN stack!

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Introduction to MEAN

1. Introduction to MEAN

Three-tier web application development

The evolution of JavaScript

Introducing MEAN

Installing MongoDB

Installing Node.js

Introducing NPM

Summary

2. Getting Started with Node.js

2. Getting Started with Node.js

Introduction to Node.js

JavaScript closures

Node modules

Developing Node.js web applications

Summary

3. Building an Express Web Application

3. Building an Express Web Application

Introduction to Express

Installing Express

Creating your first Express application

The application, request, and response objects

External middleware

Implementing the MVC pattern

Configuring an Express application

Rendering views

Serving static files

Configuring sessions

Summary

4. Introduction to MongoDB

4. Introduction to MongoDB

Introduction to NoSQL

Introducing MongoDB

Key features of MongoDB

MongoDB shell

MongoDB databases

MongoDB collections

MongoDB CRUD operations

Summary

5. Introduction to Mongoose

5. Introduction to Mongoose

Introducing Mongoose

Understanding Mongoose schemas

Extending your Mongoose schema

Defining custom model methods

Model validation

Using Mongoose middleware

Using Mongoose DBRef

Summary

6. Managing User Authentication Using Passport

6. Managing User Authentication Using Passport

Introducing Passport

Understanding Passport strategies

Understanding Passport OAuth strategies

Summary

7. Introduction to AngularJS

7. Introduction to AngularJS

Introducing AngularJS

Key concepts of AngularJS

Installing AngularJS

Structuring an AngularJS application

Bootstrapping your AngularJS application

AngularJS MVC entities

AngularJS routing

AngularJS services

Managing AngularJS authentication

Summary

8. Creating a MEAN CRUD Module

8. Creating a MEAN CRUD Module

Introducing CRUD modules

Setting up the Express components

Introducing the ngResource module

Implementing the AngularJS MVC module

Finalizing your module implementation

Summary

9. Adding Real-time Functionality Using Socket.io

9. Adding Real-time Functionality Using Socket.io

Introducing WebSockets

Introducing Socket.io

Installing Socket.io

Building a Socket.io chat

Summary

10. Testing MEAN Applications

10. Testing MEAN Applications

Introducing JavaScript testing

Testing your Express application

Testing your AngularJS application

Summary

11. Automating and Debugging MEAN Applications

11. Automating and Debugging MEAN Applications

Introducing the Grunt task runner

Debugging Express with node-inspector

Debugging AngularJS with Batarang

Summary

Index

Index

Customer Reviews

4.5 (58)

5 star

72.4%

4 star

12.1%

3 star

10.3%

2 star

5.2%

1 star

0%

Bootstrapping your AngularJS application

To bootstrap your application and start using AngularJS, we will use the manual bootstrapping mechanism. This will allow you to better control the initialization process of your application. To do so, clear the contents of the public folder except for the Bower lib folder. Then, create a file named application.js inside the public folder, and paste the following code in it:

var mainApplicationModuleName = 'mean';

var mainApplicationModule = angular.module(mainApplicationModuleName, []);

angular.element(document).ready(function() {
  angular.bootstrap(document, [mainApplicationModuleName]);
});

As you can notice, first you created a variable containing the main application's module name, which you then used to create a the main application module following the angular.module() method. Then, you used the angular object jqLite functionality to bind a function to the document-ready event. In that function, you used the angular.bootstrap() method to initiate...

Visually different images

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

MEAN Web Development

Search

Your notes and bookmarks