AngularJS tutorial for beginners with NodeJS ExpressJS and MongoDB (Part I)

  • In this tutorial we are going to focus on the most important ones, such as directives, modules, services, controllers and related concepts.
  • Data binding is an AngularJS feature that synchronizes your model data with your HTML.
  • They are the glue your javascript code (controllers) and the view (HTML).
  • Notice the in the example below

    See the Pen uFfqG by Adrian Mejia (@amejiarosario) on CodePen.

  • For that, we need to create a 2nd controller, template, and route that uses this service:

    See the Pen pGkhg by Adrian Mejia (@amejiarosario) on CodePen.

Adrian Mejia blog about programming and software engineering. Featuring MEAN stack (AngularJS, NodeJS, MongoDB and Express), BackboneJS, RESTful APIs, Algorithms and data structures.

@MittTechnology: #AngularJS tutorial for beginners with #NodeJS #ExpressJS and #MongoDB #javascript #tutorial

This tutorial is meant to be as clear as possible. At the same time, we are going to cover the concepts that you will need most of the time. All the good stuff without the fat 🙂

MEAN Stack tutorial series:

We are going to start building all the examples in a single HTML file! It embedded JavaScript and NO styles/CSS for simplicity. Don’t worry, in the next tutorials, we will learn how to split use Angular modules. We are going to break down the code, add testing to it and styles.

What is Angular.js?

Angular.js is a MVW (Model-View-Whatever) open-source JavaScript web framework that facilitates the creation of single-page applications (SPA) and data-driven apps.

AngularJS vs jQuery vs BackboneJS vs EmberJS

TL; DR: AngularJS is awesome for building testable single page applications (SPA). Also, excel with data-driven and CRUD apps. Show me the code!.

AngularJS motto is

It extends standard HTML tags and properties to bind events and data into it using JavaScript. It has a different approach to other libraries. jQuery, Backbone.Js, Ember.js and similar… they are more leaned towards “Unobtrusive JavaScript”.

Traditional JavaScript frameworks, use IDs and classes in the elements. That gives the advantage of separating structure (HTML) from behavior (Javascript). Yet, it does not do any better on code complexity and readability. Angular instead declares the event handlers right in the element that they act upon.

Times have changed since then. Let’s examine how AngularJS tries to ease code complexity and readability:

Without further ado, let’s dive in!

AngularJS has an extensive API and components. In this tutorial we are going to focus on the most important ones, such as directives, modules, services, controllers and related concepts.

The first concept you need to know about AngularJS is what are directives.

it’s compiled. The directives are bound to data, events, and DOM transformations.

Notice in the following example that there are two directives: ng-app and ng-model.

We going to learn about some of the main built-in directives as we go:

Data binding AngularJS example:

See the Pen KdLaq by Adrian Mejia (@amejiarosario) on CodePen.

You can create your own directives. Checkout the this tutorial for more: creating-custom-angularjs-directives-for-beginners. It will go deeper into directives.

Data binding is an AngularJS feature that synchronizes your model data with your HTML. That’s great because models are the “single source of truth”. You do not have to worry about updating them. Here’s a graph from docs.angularjs.org.

Whenever the HTML is changed, the model gets updated. Wherever the model gets updated it is reflected in HTML.

ed by AngularJS and updated.

and inherit from outer ones. More on this, in the controller’s section.

models with views. Let’s see an example to drive the concept home:

AngularJS controller interactive example:

See the Pen spuCm by Adrian Mejia (@amejiarosario) on CodePen.

Modules are a way to encapsulate different parts of your application. They allow reusing code in other places. Here’s an example of how to rewrite our controller using modules.

in the example below

See the Pen uFfqG by Adrian Mejia (@amejiarosario) on CodePen.

Using modules brings many advantages. They can be loaded in any order, and parallel dependency loading. Also, tests can only load the required modules and keep it fast, clear view of the dependencies.

Templates contain HTML and Angular elements (directives, markup, filters or form controls). They can be cached and referenced by an id.

Here’s an example:

Does the code inside looks familiar? 😉

ngRoutes module allows changing what we see in the app depending on the URL (route). It, usually, uses templates to inject the HTML into the app.

It does not come with AngularJS core module, so we have to list it as a dependency. We are going to get it from Google CDN:

NEW FEATURE: add notes to the todo tasks. Let’s start with the routes!

See the Pen CmnFH by Adrian Mejia (@amejiarosario) on CodePen.

Notice that if you want to create a 2nd controller and share $scope.todos it is not possible right now. That is when services become handy. Services are a way to inject data dependencies into controllers. They are created through factories. Let’s see it in action:

Let’s say we want to show the details of the task when we click on it. For that, we need to create a 2nd controller, template, and route that uses this service:

See the Pen pGkhg by Adrian Mejia (@amejiarosario) on CodePen.

(NOTE: Click on the links and it will take you to the todo details. Use backspace key to go back to the main menu)

This is what is happening:

NOTE: in codepen, you will not see the URL. If you want to see it changing, you can download the whole example an open it from here.

Filters allow you to format and transform data. They change the output of expressions inside the curly braces. AngularJS comes with a bunch of useful filters.

Built-in Filters:

Note you can also chain many filters and also define your own filters.

See the Pen tyuDK by Adrian Mejia (@amejiarosario) on CodePen.

would do then? Precisely! It searches in all the attributes. Fork the following example and try it out:

See the Pen ahwbz by Adrian Mejia (@amejiarosario) on CodePen.

What’s next?

Congrats! You have completed part 1 of this 3 part series. We are going to build upon the things learned in here, in the next post we are going to setup a backend in NodeJS and MongoDB and connect it to AngularJS to provide a full featured CRUD app. Continue with:

I also have created BackboneJS tutorials check it out:

ng-test

Congrats, you have reached this far! It is time to test what you have learned. Test-Driven Learning (TDL) ;). Here’s the challenge: open this file on your favorite code editor. Copy the boilerplate code and built the full app that we just build in the previous examples. Of course, you can take a peek from time to time if you get stuck 😉

Download this file as…:

index.html

-OR-

Fork and edit online:

See the Pen degzC by Adrian Mejia (@amejiarosario) on CodePen.

ng-solution

This is the full solution and you can see it live in here.

AngularJS tutorial for beginners with NodeJS ExpressJS and MongoDB (Part I)

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.