3/17/25, 2:17 PM AngularJS tutorial for beginners with NodeJS ExpressJS and MongoDB (Part I) | Adrian Mejia Blog

 

Home Trending Popular About Blog

Coding > Web Development > Angular

AngularJS tutorial for beginners with

NodeJS ExpressJS and MongoDB
(Part I)
 Last updated August 6th 2016  659.7k 66 Comments
 angularjs nodejs tutorial_mean-stack

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 :)

“ Check out the updated version of this post in here: Create a CRUD App with Angular 9+
and TypeScript

MEAN Stack tutorial series:

1. AngularJS tutorial for beginners (Part I) 👈 you are here

2. Creating RESTful APIs with NodeJS and MongoDB Tutorial (Part II)

https://adrianmejia.com/angularjs-tutorial-for-beginners-with-nodejs-expressjs-and-mongodb/ 1/18
3/17/25, 2:17 PM AngularJS tutorial for beginners with NodeJS ExpressJS and MongoDB (Part I) | Adrian Mejia Blog

3. MEAN Stack Tutorial: MongoDB, ExpressJS, AngularJS and NodeJS (Part III)

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

“ HTML enhanced for web apps!

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:

Unit testing ready: JavaScript is, usually, hard to unit test. When you have DOM
manipulations and business logic together (e.g. jQuery based code). AngularJS
keeps DOM manipulation in the HTML and business logic separated. Data and
dependencies are $injected as needed.
DOM manipulation where they are used. It decouples DOM manipulation from
application logic.
AngularJS is also excellent for single-page applications (SPA).
https://adrianmejia.com/angularjs-tutorial-for-beginners-with-nodejs-expressjs-and-mongodb/ 2/18
3/17/25, 2:17 PM AngularJS tutorial for beginners with NodeJS ExpressJS and MongoDB (Part I) | Adrian Mejia Blog

Different browsers implement features differently, but fret not. Angular’s

directive (or HTML extensions) take care of the differences for you.
Global namespace expressions and methods definitions are scoped within
controllers. So, they do not pollute the global namespace.
Data models are plain old JavaScript objects (POJO).
Write less code: AngualarJS features save you from much boilerplate code.
AngularJS provides solutions for writing modular code and dependencies
management.

Without further ado, let’s dive in!

AngularJS Main Components

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.

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

Directives are extensions of HTML markups. They could take the form of attributes,
element names, CSS class and or even HTML comments. When the AngularJS
framework is loaded, everything inside ng-app 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.

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

Hello World in AngularJS link

https://adrianmejia.com/angularjs-tutorial-for-beginners-with-nodejs-expressjs-and-mongodb/ 3/18
3/17/25, 2:17 PM AngularJS tutorial for beginners with NodeJS ExpressJS and MongoDB (Part I) | Adrian Mejia Blog

1 <html ng-app>
2 <head>
3 <title>Hello World in AngularJS</title>
4 </head>
5 <body>
6
7 <input ng-model="name"> Hello {{ name }}
8
9 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angu
10 </body>
11 </html>

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

ng-app: is a directive that bootstraps AngularJS. It designates the caller element

as the root. It’s usually placed on <html> or <body> .

ng-model: is a directive that binds usually form elements. For instance, input ,
select , checkboxes , textarea . They keep data (model) and visual elements
(HTML) in sync.

{{ name }} {{ }} are a way of binding models to elements in HTML. In the

example above, the ng-model name is bound to the placeholder {{ name }} .
Play with the example below to see how the placeholder is updated real-time to
whatever you type in the textbox.

Data binding AngularJS example:

EDIT ON
HTML Result

Type world... Hello

Resources 1× 0.5× 0.25× Rerun

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

https://adrianmejia.com/angularjs-tutorial-for-beginners-with-nodejs-expressjs-and-mongodb/ 4/18
3/17/25, 2:17 PM AngularJS tutorial for beginners with NodeJS ExpressJS and MongoDB (Part I) | Adrian Mejia Blog

AngularJS Data Binding

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.

AngularJS Scope
$scope it is an object that contains all the data to which HTML is bound. They are the
glue your javascript code (controllers) and the view (HTML). Everything that is attached
to the $scope , it is $watch ed by AngularJS and updated.

Scopes can be bound to javascript functions. Also, you could have more than one
$scope and inherit from outer ones. More on this, in the controller’s section.

AngularJS Controllers
Angular.js controllers are code that “controls” certain sections containing DOM
elements. They encapsulate the behavior, callbacks and glue $scope models with
views. Let’s see an example to drive the concept home:

AngularJS Controller Example link

1 <body ng-controller="TodoController">
2 <ul>
3 <li ng-repeat="todo in todos">
4 <input type="checkbox" ng-model="todo.completed">
https://adrianmejia.com/angularjs-tutorial-for-beginners-with-nodejs-expressjs-and-mongodb/ 5/18
3/17/25, 2:17 PM AngularJS tutorial for beginners with NodeJS ExpressJS and MongoDB (Part I) | Adrian Mejia Blog

5 {% raw %}{{ todo.name }}{% endraw %}

6 </li>
7 </ul>
8
9 <script>
10 function TodoController($scope){
11 $scope.todos = [
12 { name: 'Master HTML/CSS/Javascript', completed: true },
13 { name: 'Learn AngularJS', completed: false },
14 { name: 'Build NodeJS backend', completed: false },
15 { name: 'Get started with ExpressJS', completed: false },
16 { name: 'Setup MongoDB database', completed: false },
17 { name: 'Be awesome!', completed: false },
18 ]
19 }
20 </script>
21 </body>

AngularJS controller interactive example:

EDIT ON
HTML Result

Resources 1× 0.5× 0.25× Rerun

As you might notice we have new friends: ng-controller , ng-repeat and $scope .

ng-controller is a directive that tells angular what function controller to use for a
particular view. Every time AngularJS loads, it reads the ng-controller argument
(in this case “TodoController”). Then, it will look for a function in plain old javascript
object (POJO) with the same name or for angular.controller matching name.

$scope As mentioned earlier $scope ‘s are the glue between the data models in
the controllers and the views. Take a look to our “TodoController” it has a parameter
named $scope . AngularJS is going to pass ( $inject ) that parameter, and
whatever you attach to it, it will be available in the view. In this example is the
particular is the todos array of objects.

https://adrianmejia.com/angularjs-tutorial-for-beginners-with-nodejs-expressjs-and-mongodb/ 6/18
3/17/25, 2:17 PM AngularJS tutorial for beginners with NodeJS ExpressJS and MongoDB (Part I) | Adrian Mejia Blog

ng-repeat as its name implies, it is going to “repeat” the element and sub-
elements where this directive is declared. It is going to iterate for each element in
the $scope.todos array.

ng-model notice that the checkbox is bound to the todo.completed . If

todo.completed is true, then the checkbox is going to be checked and vice versa.

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

AngularJS Module Example link

1 angular.module('app', [])
2 .controller('TodoController', ['$scope', function ($scope) {
3 $scope.todos = [
4 { title: 'Learn Javascript', completed: true },
5 { title: 'Learn Angular.js', completed: false },
6 { title: 'Love this tutorial', completed: true },
7 { title: 'Learn Javascript design patterns', completed: false },
8 { title: 'Build Node.js backend', completed: false },
9 ];
10 }]);

Notice the <html ng-app="app"> in the example below

EDIT ON
HTML JS Result

Resources 1× 0.5× 0.25× Rerun

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.

https://adrianmejia.com/angularjs-tutorial-for-beginners-with-nodejs-expressjs-and-mongodb/ 7/18
3/17/25, 2:17 PM AngularJS tutorial for beginners with NodeJS ExpressJS and MongoDB (Part I) | Adrian Mejia Blog

AngularJS Templates
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:

AngularJS Template Example download

1 <script type="text/ng-template" id="/todos.html">

2 <ul>
3 <li ng-repeat="todo in todos">
4 <input type="checkbox" ng-model="todo.completed">
5 {{ todo.name }}
6 </li>
7 </ul>
8 </script>

Does the code inside looks familiar? ;)

Notice they are inside the script and has a type of text/ng-template .

AngularJS Routes (ngRoutes)

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:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-
route.min.js"></script>

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

1 angular.module('app', ['ngRoute'])
2 .config(['$routeProvider', function ($routeProvider) {
3 $routeProvider
4 .when('/', {
5 templateUrl: '/todos.html',
6 controller: 'TodoController'
7 });
8 }]);

https://adrianmejia.com/angularjs-tutorial-for-beginners-with-nodejs-expressjs-and-mongodb/ 8/18
3/17/25, 2:17 PM AngularJS tutorial for beginners with NodeJS ExpressJS and MongoDB (Part I) | Adrian Mejia Blog

EDIT ON
HTML JS Result

Resources 1× 0.5× 0.25× Rerun

First notice that we removed ng-controller="TodoController" from the body

tag. The controllers are now called based on the route.

ngView is a directive used by $routeProvider to render HTML into it. Every time
the URL changes, it will inject a new HTML template and controller into ngView.

AngularJS Services (Factories)

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:

AngularJS Service Factory Example

1 angular.module('app', ['ngRoute'])
2
3 .factory('Todos', function(){
4 return [
5 { name: 'AngularJS Directives', completed: true },
6 { name: 'Data binding', completed: true },
7 { name: '$scope', completed: true },
8 { name: 'Controllers and Modules', completed: true },
9 { name: 'Templates and routes', completed: true },
10 { name: 'Filters and Services', completed: false },
11 { name: 'Get started with Node/ExpressJS', completed: false },
12 { name: 'Setup MongoDB database', completed: false },
13 { name: 'Be awesome!', completed: false },
14 ];
15 })
16
17 .controller('TodoController', ['$scope', 'Todos', function ($scope, To

https://adrianmejia.com/angularjs-tutorial-for-beginners-with-nodejs-expressjs-and-mongodb/ 9/18
3/17/25, 2:17 PM AngularJS tutorial for beginners with NodeJS ExpressJS and MongoDB (Part I) | Adrian Mejia Blog

18 $scope.todos = Todos;
19 }])

We are now injecting the data dependency Todo into the controllers. This way we could
reuse the data to any controller or module that we need to. This is not only used for
static data like the array. But we could also do server calls using $http or even
RESTful $resource .

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:

(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:

1. In the HTML tab, we created a second template /todoDetails.html which

contains the todo details we want to show.
2. Also, in our previous template /todos.html we want to have a link that points to
the todo detail. We are using the $index which is the corresponding order
number in a ng-repeat .
3. In the JS tab, we created a new $routeProvider . It points to a new controller
TodoDetailCtrl and the template that we created on #1. The :id parameter it is
accessible in the controllers through $routeParams .
4. We Created the new controller TodoDetailCtrl . Also, we injected the
dependencies which are $scope , Todos (factory), and $routeParams which will
have the id param.
5. Set the $scope in the new controller. Instead of using the whole array, we are
going to select only the one that we need using the id that we set in step #2.

https://adrianmejia.com/angularjs-tutorial-for-beginners-with-nodejs-expressjs-and-mongodb/ 10/18
3/17/25, 2:17 PM AngularJS tutorial for beginners with NodeJS ExpressJS and MongoDB (Part I) | Adrian Mejia Blog

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.

AngularJS Filters
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:

filter: search for a given string in an array and return matches.

Number: adds comma-separated 1000’s and two decimal places.
Currency: the same as Number and adds a $ in front.
Date: takes a Unix timestamp (e.g. 1288323623006) or date string and output it in
the format that you specify (e.g. ‘longDate’ or fragments ‘yyyy’ for a four-digit year).
For a full list see here.
JSON: converts javascript objects to JSON strings.
lowercase/uppercase: converts strings to lowercase/uppercase.
limitTo: number of elements from an array to show.
orderBy: order array of objects by a key that you specify.

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

“ NEW FEATURE: Search todo tasks by name. Let’s use a filter to solve that problem.

1 <script type="text/ng-template" id="/todos.html">

2 Search: <input type="text" ng-model="search.name">
3 <ul>
4 <li ng-repeat="todo in todos | filter: search">
https://adrianmejia.com/angularjs-tutorial-for-beginners-with-nodejs-expressjs-and-mongodb/ 11/18
3/17/25, 2:17 PM AngularJS tutorial for beginners with NodeJS ExpressJS and MongoDB (Part I) | Adrian Mejia Blog

5 <input type="checkbox" ng-model="todo.completed">

6 <a href="#/{{$index}}">{{todo.name}}</a>
7 </li>
8 </ul>
9 </script>

Notice that we are using search.name in the ng-model for search. That will limit the
search to the name attribute and search.notes will look inside the notes only. Guest
what search would do then? Precisely! It searches in all the attributes. Fork the
following example and try it out:

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:

Part II - NodeJS/ExpressJS and MongoDB/Mongoose

Part III - MEAN Stack: Wiring all together

I also have created BackboneJS tutorials check it out:

BackboneJS Tutorials

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

https://adrianmejia.com/angularjs-tutorial-for-beginners-with-nodejs-expressjs-and-mongodb/ 12/18
3/17/25, 2:17 PM AngularJS tutorial for beginners with NodeJS ExpressJS and MongoDB (Part I) | Adrian Mejia Blog

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:

ng-solution

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

1 <html ng-app="app">
2 <head>
3 <title>ngTodo</title>
4 </head>
5 <body>
6
7 <ng-view></ng-view>
8
9 <!-- Libraries -->
10 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
11 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"></script>
12
13 <!-- Template -->
14 <script type="text/ng-template" id="/todos.html">
15 Search: <input type="text" ng-model="search.name">
16 <ul>
17 <li ng-repeat="todo in todos | filter: search">
18 <input type="checkbox" ng-model="todo.completed">
19 <a href="#/{{$index}}">{{todo.name}}</a>

https://adrianmejia.com/angularjs-tutorial-for-beginners-with-nodejs-expressjs-and-mongodb/ 13/18
3/17/25, 2:17 PM AngularJS tutorial for beginners with NodeJS ExpressJS and MongoDB (Part I) | Adrian Mejia Blog

20 </li>
21 </ul>
22 </script>
23
24 <script type="text/ng-template" id="/todoDetails.html">
25 <h1>{{ todo.name }}</h1>
26 completed: <input type="checkbox" ng-model="todo.completed">
27 note: <textarea>{{ todo.note }}</textarea>
28 </script>
29
30 <script>
31 angular.module('app', ['ngRoute'])
32
33 //---------------
34 // Services
35 //---------------
36
37 .factory('Todos', function(){
38 return [
39 { name: 'AngularJS Directives', completed: true, note: 'add notes...' },
40 { name: 'Data binding', completed: true, note: 'add notes...' },
41 { name: '$scope', completed: true, note: 'add notes...' },
42 { name: 'Controllers and Modules', completed: true, note: 'add notes...' },
43 { name: 'Templates and routes', completed: true, note: 'add notes...' },
44 { name: 'Filters and Services', completed: false, note: 'add notes...' },
45 { name: 'Get started with Node/ExpressJS', completed: false, note: 'add notes...' },
46 { name: 'Setup MongoDB database', completed: false, note: 'add notes...' },
47 { name: 'Be awesome!', completed: false, note: 'add notes...' },
48 ];
49 })
50
51 //---------------
52 // Controllers
53 //---------------
54
55 .controller('TodoController', ['$scope', 'Todos', function ($scope, Todos) {
56 $scope.todos = Todos;
57 }])
58
59 .controller('TodoDetailCtrl', ['$scope', '$routeParams', 'Todos', function ($scope, $routeParams, To
60 $scope.todo = Todos[$routeParams.id];
61 }])
62
63 //---------------
64 // Routes
65 //---------------
66
67 .config(['$routeProvider', function ($routeProvider) {
68 $routeProvider

https://adrianmejia.com/angularjs-tutorial-for-beginners-with-nodejs-expressjs-and-mongodb/ 14/18
3/17/25, 2:17 PM AngularJS tutorial for beginners with NodeJS ExpressJS and MongoDB (Part I) | Adrian Mejia Blog

69 .when('/', {
70 templateUrl: '/todos.html',
71 controller: 'TodoController'
72 })
73
74 .when('/:id', {
75 templateUrl: '/todoDetails.html',
76 controller: 'TodoDetailCtrl'
77 });
78 }]);
79 </script>
80
81 </body>
82 </html>

ngTodo.html hosted with ❤ by GitHub view raw

 NEWER OLDER 
Creating RESTful APIs with NodeJS and MongoDB Cheap Airplay receiver with
Tutorial (Part II) Raspberry Pi

Subscribe & stay up to date!

email address

https://adrianmejia.com/angularjs-tutorial-for-beginners-with-nodejs-expressjs-and-mongodb/ 15/18
3/17/25, 2:17 PM AngularJS tutorial for beginners with NodeJS ExpressJS and MongoDB (Part I) | Adrian Mejia Blog

Subscribe

About the author

Adrian Mejia is a Software Engineer located in Boston, MA. Currently

working at Google. Adrian enjoys writing posts about Algorithms,
programming, JavaScript, and Web Dev. Also, he likes to travel ✈️ and
biking 🚴‍.

Follow @iAmAdrianMejia

Tutorial Mean Stack Series

AngularJS tutorial for

beginners with NodeJS
ExpressJS and
MongoDB (Part I)

https://adrianmejia.com/angularjs-tutorial-for-beginners-with-nodejs-expressjs-and-mongodb/ 16/18
3/17/25, 2:17 PM AngularJS tutorial for beginners with NodeJS ExpressJS and MongoDB (Part I) | Adrian Mejia Blog

Creating RESTful APIs

with NodeJS and
MongoDB Tutorial
(Part II)

MEAN Stack Tutorial

MongoDB ExpressJS
AngularJS NodeJS
(Part III)

 Top  Edit this post

Contents

https://adrianmejia.com/angularjs-tutorial-for-beginners-with-nodejs-expressjs-and-mongodb/ 17/18
3/17/25, 2:17 PM AngularJS tutorial for beginners with NodeJS ExpressJS and MongoDB (Part I) | Adrian Mejia Blog

1. What is Angular.js?
2. AngularJS Main Components
3. What’s next?

ALSO ON ADRIAN MEJIA'S BLOG

45 Security Tips to Building a Node.js static Self-balanced Binary Tree Data Str
Avoid Hacking file server … Search Trees with … JavaScript fo

6 years ago • 2 comments 6 years ago • 5 comments 6 years ago • 2 comments 6 years ago • 9 c

JavaScript tutorials and web JavaScript tutorials and web JavaScript tutorials and web JavaScript tuto
development articles development articles development articles development a
including topics like … including topics like … including topics like … including topics

66 Comments 
1 Login

G Join the discussion…

LOG IN WITH OR SIGN UP WITH DISQUS ?

Name

 11 Share Best Newest Oldest

Aadi Nickels − ⚑
10 years ago

Thank you, this is the most practical tutorial I have found that incorporates the full mean stack step by
step without asking you to incorporate scaffolding like MEAN.js - THANK YOU! I have been specifically
having issues with routing and just this first third helped a bunch!

74 0 Reply ⥅

Adrian Mejia Mod > Aadi Nickels − ⚑

© 2022 Adrian Mejia v.rk61qc

https://adrianmejia.com/angularjs-tutorial-for-beginners-with-nodejs-expressjs-and-mongodb/ 18/18