7. Building a CMS on the MEAN Stack | AngularJS Web Application Development Blueprints

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents
Feedback & Rating

AngularJS Web Application Development Blueprints

By : Vinci J Rufus

4.3 (7)

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.

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. 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. 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. 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. 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. 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. Building an Expense Manager Mobile App

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

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

Index

Index

Customer Reviews

4.3 (7)

5 star

71.4%

4 star

14.3%

3 star

0%

2 star

0%

1 star

14.3%

Integrating AngularJS with an ExpressJS project

Now that we have most of our server-side code working, we'll start working on our AngularJS code.

Let's download the angular-seed project as a ZIP download from https://github.com/areai51/angular-seed and extract the contents of the ZIP file.

Now, we will only take the content of the app folder along with the package.json and bower.json files and place it within the public folder of angcms.

In the terminal, navigate to the angcms/public folder and run the following two commands:

npm install
bower install

Note that we do not run npm start from within the public folder, as we will be using the Express server that runs at port 3000.

Your folder structure should look something like the following:

The next step is to define the routes in our ExpressJS app such that all routes are managed by AngularJS, except for those that start with a/api/.

For this, we will add the following catch-all route at the end of the angcms/routes/index.js file as follows:

router...

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.

AngularJS Web Application Development Blueprints

Search

Your notes and bookmarks