Learn MEAN Stack

Not unlike the way LAMP (Linux, Apache, MySQL, and PHP/Python/Perl) came about, MEAN bubbled up in developer camps as a logical, convenient way to build out a Javascript-based web application. 

We are looking at MEAN from the side, studying the 4 distinct layers of the stack. Once we have an understanding of each layer, we’ll then discover how the layers dovetail to produce efficiencies for us.

We need an understanding of how the MEAN layers all play nicely together.  From a high-level, let’s see how this all works.

A review of this sub-course's format and an explanation of how it's organized, then a walk thru of the course Learning Objectives

Let’s understand the hands-on course project and see a demo of the final product.

We can get a Cloud9 account set up if necessary and get our initial project set up in the cloud.

We now understand what to expect in the sections of this course and what we can expect to learn. Plus, we’ve got our online development environment all set up and ready to go!

What are Node & Express and how do we start using them? Let’s begin with the basics.

What are Node & Express and how do we start using them? Let’s begin with the basics.

Let’s see what we can do with Node from the command line.

At the command line, we’ll set up a Node.js project, write a simple app in the project, and run it.

Let’s make our Cloud 9 project point to a GITHub repo so we can preserve and version our work..

We have a better understanding now of what Node.js is and what it does and what Express is and how it works with Node.js to create Web Applications. We set up a project using the Node console and got our Cloud9 project pointed to a GIT repository for safe keeping.

In this section we will begin working directly with Express, We’ll get the Express packages downloaded & installed, get our app startup standardized, and define some basic routing.

Let’s use NPM to get the Express packages we need to begin coding our Express-based Web App.

We can configure our project with a standard start script so standards ready and able to deploy our app to any Node service provider.

We’ll define some routes with Express and make requests with different URL’s respond properly.

In this section we began working directly with Express, We got the Express packages downloaded & installed, got our app starting up appropriately, and defined some basic routing.

Using a Bootstrap.js template to base our app’s HTML page upon is a quick, easy way to get our app’s UI up and running, yet still allows us to modify the UI to meet our needs.

Let’s pull in a Bootstrap.js template and easily get our HTML output looking sharp!

Let’s setup a static directory for serving our resource files with Express.

We can use Bower to manage our UI components just like NPM does for our Node packages.

We downloaded a cool Bootstrap.js template & got it working in our project so it produces great HTML pages for us.  Then we got Bower set up to manage all of the Bootstrap dependencies that we now have.

Gulp is a task manager that can take care of all kinds of tedious, mundane tasks for us and make development so much easier. We’ll get Gulp working for us in our project.

Let’s use JSHint so Gulp can automatically check our JavaScript code quality and completeness.

Wire up Wiredep and get or CSS and Javascript files injected into our HTML files automatically!

We can have all of our custom JavaScript and CSS files injected for us automatically and make our lives so much easier!

Nodemon can monitor for changes to our Javascript files. If a file changes Nodemon process them, then restart our server with the changes loaded up. Let’s have this feature!

We’re now familiar with some of the great things Gulp can do for us as we build out our Node.js project.

Templating Engine: allows Express to build out HTML pages &/or components for us.

A quick review of 3 different Node.js Template Engines.

Let’s get EJS Templating Engine set up and working in our project.

We’ll add some EJS code to our project’s HTML page.

We’ve now familiarized ourselves with templating engines in Node & Express and have chosen EJS as the template engine for our course project.

Routing is a key part of any web app. Let’s get some more sophisticated routing going in our project.

Let’s get a Router into our code and create some new Routes.

We’ll create some new pages and wire them to our new Routes

Our app.js file is getting a bit cluttered. Let’s move all of our routing code into it’s own .js file.

Let’s wire up our new routes to our new templates and finish the EJS in our templates so our pages display what we want.

We’ve written routers for our app and moved them into separate, supporting .js files. Our routers and routes are now structured more effectively and our app quality has improved.

Let’s get MongoDB behind the project we’ve built. We can get MongoDB running, load our data into it, then query that data for display in our web page

Recommendation: Please check the Code Anywhere documentation at https://docs.codeanywhere.com/#installing-mean-stack

We can get MongoDB running and install the MongoDB package into our project.

Let’s use our routes knowledge to create a temporary route for inserting our hard-coded events data into MongoDB.

Using our new temporary route, we can write insert code to get our data into MongoDB.

We can query the database directly from our Node.js JavaScript code and display the query results in our web page.

We integrated MongoDB with our Node.js app, loaded our data into a new collection, queried Mongo for that data, and displayed the results in our app’s pages.

Congratulations, we’ve reached the end of our NOde & Express study! Let’s review the learning objectives we’ve met.

I’ll explain how this course is organized,including a quick review of the course’s sections & our learning objectives.

We’ll view a quick demo of the completed course project so we know what we’ll be building over the course. A list of the features we’ll build to complete our project will also be reviewed.

Let’s create a Cloud9 account and set up a MongoDB project by pulling a version from Github. Then, we can install all of the tools we’ll need to build our project.

We now know what we’ll be learning & how we’ll learn it all. Plus we’re all set up to begin coding our project.

Let’s begin building our our project with some of the Mongo tools. Our first step is to create a new database and import some data.Learning Objective:Setup & configure a MongoDB instance

Let’s create a new database and import some data.

We can use the Mongo Shell tool to check out our database, its collections, and data.

The Shell Tool is a Javascript editor as well and can execute Javascript on the fly. Let’s use some Javascript in the Shell.

We hit the ground running in this section! We’ve already set up a fully functioning project with data and have begun working with the Mongo Shell Tool.

Let’s start working with standard database queries and operations, including CRUD.

We can manipulate queries for retrieving data from our database. Let’s begin working with the ‘find’ command on our ‘Users’ data.

Let’s use the .insert() and .save() commands to Create data in a collection in two distinct ways.

We can Update existing data in a collection using the .update() command. We can also use $set:{} to add a field to an existing document.

Deleting data is very simple, as long as we know which document we want removed.

Now that our User Data is ready for display, let’s update our app so it will pass User Data from the database thru to the rendered web page.

We learned about the generality of CRUD operations & how simple they are to use. We then used these operations to shape up our User data and ready it for use in our app.

Let’s learn to Model data for use in our document-oriented MongoDB database.

What are the things we need to be thinking about when we Model our data for use in MongoDB?

We can work with models that are Simple or go for more Complex structures. Let’s consider speed and data types as we make modeling choices.

Let’s use our new knowledge to model the ‘Event’ document for our project.

Registry has some interesting characteristics. Let’s make good decisions when creating a model for our project and consider all scenarios.

We have learned MongoDB specific data modeling concepts and applied them in creating models for our project’s database.

Let’s look at how Indexing works in MongoDB and what kind of indices are available.

Indexes are an important part of a properly functioning MOngoDB database. Let’s find out what they do, how they do it, and how we can create them to optimize our database.

We can use Mongo commands to see which indices exist and how they’re used in a query.

Let’s go through the steps of Creating Indexes and optimize our project with faster queries.

We learned how indices work in MongoDB, why we need them, and how to optimize our existing database by adding indices where they are needed.

We can build some amazing queries with the Aggregation Framework. Let’s find out how it works.

We’ll discuss data aggregation from 10K ft and learn about pipeline processing & result sets.

Let’s walk thru Aggregation Pipeline Stages & see the significance of each. Then, let’s review the Pipeline Operators and see what each one does.

We can apply Aggregation Queries and Filters to create our project’s aggregated data. Let’s see how.

Now that we have Aggregated Data, we need to use it in our project. We will plug it right into our templates.

We learned how to create Aggregation Queries with the MongoDB Aggregation Framework. We then used Aggregation in our project to create new data from existing records and plugged that data into our HTML templates.

Replication and Sharding provide the availability and durability that makes MongoDB so great. We’ll look at these concepts from a Developer’s perspective.

Let’s find out what Replica sets are & how they work.

How do Replica Sets stay available? We’ll investigate.

Let’s find out what Sharding is and how it is configured.

What considerations are there when we are Sharding our data?

We reviewed the steps involved in Replication and Sharding of MongoDB databases and how instances work together when distributed. We can assume that availability and durability standards are provided with these techniques when we design apps for MongoDB.

Our app has come together nicely. Let’s examine the project as a whole and see how all of the pieces fit together.

Let’s review the current state of our project and how it got that way.

App.js is the heart of our app. Let’s look into how it drives our application.

We’ll look into how the aggregation functions work in our application.

We can now see how the ‘pieces’ of our app fit together and how JSON data is passed from MongoDB thru to the web pages.

Congratulations! We’ve reached the end of the course. Let’s review the great things we’ve learned.

A walk thru of completed checklists.

This course teaches you how to design and build components, how to use templates to create your application’s user interface, how to extend HTML with directives and data binding, and how routing is done.

What is Angular? Why should we use Angular? Why is there an Angular2?

Let’s understand what we’ll do over the life of this course and how we’ll do it.

We can get a Cloud9 account set up if necessary and get our initial project set up in the cloud.

We now understand what to expect in the sections of this course and what we can expect to learn.

Before we go head’s down with Angular2, we need to prepare ourselves with some significant background info and a functioning development environment.

TypeScript is the language of choice for Angular2. Let’s learn why.

We need to get our Cloud9 online IDE set up and ready for development.

We’ll code every concept that we learn in our course project. Let’s set it up and get it ready for our first lesson.

Modules are a foundational part of Angular2. Let’s be sure to understand what they are and how we’ll use them.

We are now primed and ready to dive into Angular2.

In this section we will take a close look at what Angular2 components are and learn the steps involved in creating one.

Let’s learn what components are and what they’re made of.

Components consist of 3 parts. Let’s learn what they are and what each part does.

Let’s learn the interactions of the 3 component parts and how to stitch them together to create a complete component.

The App Component is the heart of an Angular2 application. Let’s learn to create it.

With enough ammunition to get an app up and running, let’s learn how to do it.

We learned enough to get an app up and running. With a very app is simple and very high-level Angular2 knowledg, we’re ready to dive deep into the Angular2 depths.

We will learn to define the visible aspects of components as HTML within a template.

Our view is defined in HTML which can then be inserted into our component’s template.

We can create a template in a separate file.

There are 3 steps in using a component as a directive.

Binding data from our component’s class to it’s template is easy with interpolation.

Angular2 has tons of built-in directives that we need.

We learned to work with templates within components, to bind data in those components, and how to use components as directives.

We’ll learn to use Angular2’s property binding to set HTML element properties in the DOM.

When data changes in our class, we need to reflect the change in our HTML. Let’s learn how this works..

Certain user interactions with our web page need to update properties in our class. We can use Event Binding to have this happen automatically.

We can use both Property binding and Event binding at the same time to synchronize class properties and page elements.

Let’s learn to use Pipes to transform bound properties before they are displayed.

In this section we learned to use Property binding & Event binding and how to combine them for 2-Way binding. We also learned how Pipes help us control the display of our data.

We will learn several ways to improve upon our components.

Let’s see how to make the most of Angular2’s TypeScript benefits thru use of Interfaces.

There is a better way to do styling in Angular2 than simply referencing a CSS file. Let’s learn how!

Let’s learn to listen to an Angular2 application and react to it’s many events.

We can transform and apply logic to data before we display it in the browser. Let’s see how it works.

In this section we learned to leverage TypeScript strong typing with interfaces, saw how to encapsulate styling within a component, and how to tap into component lifecycle events to trigger operations.

We will discus how to build components designed to be nested within other components and have these components talk to one another.

Let’s see how components can work “inside” other components.

We can use a Nested Component as a Directive. Let’s discuss how this is done.

Let’s learn how a Nested Component can take input from its Parent Component.

A Nested Component can send data to its Parent Component. Let’s examine this functionality.

In this section we learned how Components can nest within one another and still maintain normal data binding.

We can use Services when we have data or logic that is not associated with a specific view or that we want to share across components.

Let’s learn how Dependency Injection can make Services most effective.

Services are created quite similarly to Components and Pipes. Let’s see how simple it really is.

Let’s learn to get Services into play by registering them as Providers.

We can leverage Dependency Injection to expose services where they’re needed.

In this section we learned to create Services, register them as Providers, and how to expose them most efficiently with Dependency Injection.

We will learn how to use HTTP with observables to retrieve data from the interwebs.

We can use Reactive Extensions (RxJS) to implement Angular2’s Observables instead of simply using Promises.

Let’s learn to get Reactive Extensions (RxJS) into play along with Angular2’s HTTP library.

We’ll learn to send HTTP requests in Angular2.

Let’s see how to use Observables to work with data requested via HTTP.

In this section we learned about using Reactive Extensions (RxJS) and it’s Observables instead of relying on Promises. We learned how Angular2’s HTTP library gets us HTTP requests and how to use Observables to handle data in an HTTP response.

We will learn to define routes for navigate between multiple views in an Angular2 application.

In Angular2 routing is component based. Let’s learn to configure routing targets and to define routes for components.

We will discuss the technique of tying routes to user actions for effective navigation within an application

Let’s learn to use the RouterOutlet directive to specify where we want a router component to display its view.

Oftentimes routes need to be passed a parameter. Let’s discover how this works in Angular2

Let’s find out how to do routing with code vs. user interactions. We can implement Angular2’s RouterService to make this happen.

In this section we walked through how to configure routes, tie routes to actions, and define where the routed component’s view should appear. We also uncovered some additional routing techniques, including passing parameters to a route and activating a route with code.

Let's look under the hood of Angular2’s main configuration files and see what they are, what information they contain, and how to use them.

Let’s see how tsconfig.json gets our TypeScript compiler working for us.

We will take a look at what NPM’s package.json file does for us (a whole lot) and how it’s organized.

Let’s pick apart the imports in our index.html file and see what all of those imports are doing for us.

We’ll pat ourselves on the back for completing this course.

Let's recap the concepts presented in this course

What's going on with 

What's going on with Express & Angular2?

Let's configure Express to perform for us with a new REST API.

Our project needs to be able to consume a REST API.

Express & Angular2 are now dovetailed.  Let's review how we did it.

MEAN.io & MEAN.JS are full-stack solutions that helps you build fast, robust, and maintainable production web applications

What are our options when considering other frameworks?

Yeoman is one of the greatest tools for scaffolding MEAN projects.

We've seen the differenct ways MEAN can be approached and taken.  We also are now aware of some of the great tools and optional solutions available for use. 

Where do we go from here now that all of the technologies are familiar?

Considerations, limitations, advantages, etc.

Thank you for viewing this course