AngularJS for the Real World - Learn by creating a WebApp
3.9 (183 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,654 students enrolled

AngularJS for the Real World - Learn by creating a WebApp

The Angular 1.x course that will teach you how to build real time applications with AngularJS and Firebase.
3.9 (183 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,654 students enrolled
Created by Alessandro Russo
Last updated 2/2018
English [Auto]
Current price: $79.99 Original price: $114.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 7 hours on-demand video
  • 1 article
  • 100 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Develop a Real Time MV* Web Application with AngularJS and Firebase
  • Build an AngularJS SPA (Single Page Application)
  • Get familiar with concepts like 2-Way DataBinding, Services, Views, Routing, Directives and much more..
  • Learn about the Angular built-in services, focusing on the $http service that will help you handling XHR
  • Learn how to secure your application by building Authentication and Authorization functionalities
  • Learn how to implement an AngularJS API in your application
  • Master all the built-in AngularJS directives such as ng-repeat, ng-if, ng-switch, ng-show & ng-hide, ng-model, ng-controller and so on
  • Write better code by implementing AngularJS best practices
Course content
Expand all 70 lectures 07:04:29
+ Course Overview
5 lectures 17:12

In this lesson we'll take a quick look at the topics covered in this AngularJS course.

Preview 00:59

Something about the guy that will keep you entertained during the rest of the course.

About your Instructor!

This lessons covers the main advantages offered by AngularJS.

Preview 04:24

Let's see what Model View Whatever means and why this is a great pattern in AngularJS

MVW: Model - View - Whatever

This lesson will guide you through the required system setup, in 5 minutes you'll be up and running and ready to start developing in AngularJS

Environment Setup
+ AngularJS - Let's see what this is all about
6 lectures 48:07

In this lesson you'll write your very first angular application, You'll learn how to use the ng-app directive in an html template and take a look at the ng-model directive to interact with the scope properties.

Preview 12:26

In This lesson you will declare a controller for our app by using the ng-controller directive. After creating our first controller you will use it to initialize our scope properties and create a function to display our input.

Controllers in AngularJS

Let's take a closer look at the $scope service. We'll talk a bit more about 2 very important directives: ng-model and ng-bind.

Application Data Model: The $scope service

ControllerAs syntax allows to alias your controllers so that they will be easily accessible in your template. Thanks to controller As we will solve a common issue that is presented when dealing with nested controllers.

Best Practice: ControllerAs Syntax

A common bad practice is to move the entire application business logic inside controllers. Let's see how you can organize better your AngularJS application by delegating the business logic to services.

Services, Factories and Providers

Global variables are 99% of the times pure evil. Let's move our module declaration outside of the global variable and use instead the NG native getter and setters to declare and access it. On a side note, we'll move our controller into a separated file to organize better our project.

Best Practice: Avoiding Globals when declaring a Module

Verify what you have learned in this Section!

AngularJS Basics
4 questions
+ Routing and Templating in AngularJS
5 lectures 37:19

In this lecture, we'll introduce the ngRoute AngularJS Module and the corresponding $route service. We'll see how to define routes (our application URLs) during the angular configuration phase and how is possible to navigate between routes with no refresh from the browser. We'll introduce NgView, the ngRoute matching directive to display a route content inside the template.

After taking this lesson, you'll have a basic Angular SPA (Single Page Application) .

Introduction to Routing: ng-route and ng-view

The $routeProvider offers an option to enable user friendly routes/URLs which do not contain a url fragment (#). Let's see how to enable it.

Enabling the HTML5 Mode for friendly URLs

Students FAQ #1: If you are planning to run your Angular Application from a subfolder, you need to make sure that your base HREF is configured properly in order to avoid issues. In this lecture you'll learn how to configure it the right way.

Note: This Lecture addresses a question asked from a few students, trying to set Html5 Mode when running the Angular Application from a subfolder (e.g. localhost/subfolder).

HTML5 Mode and Subfolders

Looking for a way to have parameterized routes? $routeParams can be used to pass and read Url parameters from our Angular Routes. Let's check out how to define a few Parms in our routes.

Route Controllers and the $routeParams service

When it comes to templating, AngularJS offers a rapid way to include partial html from external files in our main template. NgInclude allows to load and compile external HTML fragments in our app, as long as they are hosted on the same domain. We'll write a "partial" html file and then we'll load it by using this directive.

NgInclude: Templating in Angular

Verify your knowlegde on AngularJS Routes and Templates

AngularJS Routing and templating
4 questions
+ It's time to build our AngularJS Event App
4 lectures 23:53

In this lesson we'll take a first look at the main directives and services that AngularJS provides when dealing with input forms and applications in general.

NgForm: How to quickly "Angularize" a bootstrap form

In this lecture, you'll learn how the ngSubmit directive can be used to trigger an AngularJS function that will process the form data submitted by a user.

On a side note, we'll take a look at how to prevent, thanks to the angular.copy function, a common mistake that happens when dealing with 2-way data binding and passing objects by reference.

The NgSubmit Directive (and a quick look at angular.copy)

This lecture will teach you how to refactor your Business Logic inside a reusable NG Service (we'll create our first Factory) and, on a side note, we'll take a look at how to use annotations when injecting dependencies in our application.

Refactoring and Annotation: Moving our code from a controller to a Factory

Let's keep looking at Services, and a few words about Angular's uppermost scope, the $rootScope.

Retrieving Data from a Service
+ Loops in AngularJS: The ng-repeat directive
3 lectures 13:51

NgRepeat is a powerful AngularJS built-in directive that can be used to loop on a collection and instantiate a template for each element inside it. Let's uncover all its secrets.

NgRepeat: Loop on a Dataset and display the records

In this lecture, we'll learn more about the NgRepeat directive and its capabilities.

Repeat multiple DOM elements with ng-repeat-start and ng-repeat-end

A common error that can pop up when using NgRepeat is around duplicates, let's see how to avoid it thanks to the track by option.

Deal with duplicates in ng-repeat: track by explained
+ AngularJS Form Controls
6 lectures 33:43

A quick look at how to use the ng-options directive to generate a list of dynamic options for our categories list.

Preview 06:12

Track by is back. In this AngularJS lecture, we'll learn how to use it to set a default option in our select list.

Preview 05:13

In this AngularJS lecture, we'll talk about a few different things. We'll learn how to deal with radio buttons (with a particular attention to our application scope), how to set default values and how to load them dynamically by using the ng-value directive.

Preview 05:24

In this lecture we will talk about how to work with checkboxes in AngularJS: We'll see how to map true/false values and how to use the ng-value directive to set custom values. We will also see how the ng-click directive works

Preview 08:44

The ngIf directive is very useful when we want to remove and add elements from/to the DOM. In this lecture we will see how to use it to display our content dynamically based on conditions.

Preview 02:02

In this lecture we will discover the magic of the date directive and how to change the date format, thanks to one of the useful AngularJS built-in filters.

Preview 06:08
+ AngularJS Form Validations
7 lectures 40:14

Validating user data is one of the most important things in web development. Why? Keep in mind that malicious users often attack websites using injection techniques or a user can submit invalid data causing errors. Preventing these situations is mandatory if you want to build a robust and secure webapp (and validation should be performed both on frontend and backend sides).

In this lecture, you'll learn how to:

- switch on Angular validation (opposite to the native HTML one);

- track form's properties in a controller by giving the form a name;

Preview 01:21

How do you understand if a form field was filled in or not? Or if the user has already moved the focus on a field or not? Again, how do you understand if the form is valid? In this lesson we'll see what are the tools that Angular provides to answer to these questions.. In addition you'll be introduced to the AngularJS Batarang plugin.

Preview 05:42

In this lecture we will learn how to display help messages under certain particular conditions only: for example, in case of a required field, we can check the minimum and maximum length and decide to display or hide the message using the ngShow and ngHide directives.

Preview 05:51

In this lesson we will define a regular expression by using the ngPattern directive, in order to apply a validation on a date field in our form, so that the user will be forced to fill in the data in the format we are expecting.

Preview 04:07

Disallowing form submission in case of invalid data is an easy way to prevent processing and storing inconsistent data. in this lesson we will see 2 techniques to achieve this result. In the first example we will apply a $valid condition to the AngularJs ng-submit directive and in the second case we will disable the submit button.

Preview 03:57

In this lesson we will learn how to beautify our AngularJs form and at the same time how to improve the UX in order to make more evident to the user the different validation errors. We will add a red border to invalid fields using the built-in Angular CSS classes (for example ng-pristine, ng-touched) and we'll learn how to apply a conditional css class to a DOM element, thanks to the ng-class directive.

Preview 08:24

AngularJs offers an easy way to provide a specific error message to each failed validation. Think about a field with multple validation rules: we need a way to be as specific as possible to drive the user to the solution in the shortest time. Using ng-messages will solve the problem! Going further, we will group error messages together in order to create a template by using the ng-template directive and we'll take a look at how to override a specific error message in the template.

Preview 10:52
+ AngularJS Filters: Let's make our events searchable!
6 lectures 25:15

We'll talk about what AngularJS Filters are, and we'll take a look at some improvements in our codebase.

Introduction & App improvements

AngularJS offers a good set of built-in filters, let's talk about those.

Basic filtering in Angular

In this lecture we'll see how to enforce a strict match in our ng filters and how to sort our data with the OrderBy option.

Strict search and OrderBy

Did you know that AngularJS filters can be used inside controllers as well? Let's try that out.

Using filters inside controllers (and services, and directives)

The $filter service can be injected in our controllers (and Services) and allows us to pre-filter our data by invoking one of the built-in AngularJS filters. We'll see how to do that.

The $filter service

In this lecture you'll learn how to easily create a custom filter in AngularJS and use it inside an application.

Implementing Custom Filters in AngularJS
+ Services: Interacting with REST APIs and Promises
4 lectures 27:50
$http and AngularJS Promises: Fetching our events by using a GET request
Using the "resolve" property to initialize data
The $q Service: Process promises and chaining
+ BONUS: NgMock: How to simulate backend functionalities in Angular
2 lectures 16:53

In this lecture we will introduce a very useful AngularJS service used to mock up a backend: ng-mock.

NgMock: Introduction

This lecture explains how ng-mock service work in practice: we will see by example how this service intercepts and filters the request and how it provides answers when required.

NgMock in Action
  • Beginner/Intermediate in HTML and CSS
  • Basic Javascript knowledge is preferred

In this Course you'll learn how to build an Angular 1.x Real Time Application using Firebase and AngularJS while leveraging great Angular Development best practices.

Added a new Section (30+ mins of brand new content): Authentication and Authorization with AngularJS and Firebase.

AngularJS is famous Javascript framework developed by Google and an increasing number of companies are currently looking for expert AngularJS Developers. Mastering AngularJS is a great opportunity that will help you getting a new and better job in the web development industry.


"The best AngularJS course I have seen", "Great course, with clear explanation, easy to follow and a lot of content", "Teaching and Learning Angular at it's best", "This course is simply awesome ... , after taking this course, I became aware of what I'm doing and what I'm coding".

This AngularJS course will teach you how this framework can dramatically improve your efficiency, reduce your coding time and deliver your next project as a Single Page Application (SPA).

You'll learn how to create AngularJS directives, controllers, modules, how 2-way data binding works and, more important, how to build an AngularJS Web Application from scratch.

You'll learn some of the best practices and how to deal with common mistakes that a developer can face when dealing with AngularJS projects and you'll dig deeper into the built-in components of this technology.

AngularJS is a Javascript framework used to create Single Page Applications (SPAs) with a declarative approach. This means that Angular is completely extensible: you can define, for example, your own DSL (Domain Specific Language) and services.

The framework is developed and maintained by Google. At the minute it has more then 1.3K contributors on GitHub and is being used in more than 243.000 live websites (Youtube, IndieGoGo, Aerlingus, Virgin America, Forbes are only a few) and is backed by a wide community (more than 122k questions only on stackoverflow).

There are plenty between documentation, tutorials, examples and fiddles in additions to discussion groups, specialized sites and forums where you can find inspiration or solutions to common problems.


If you are new to AngularJS, no worries. I will drive you through the main topics and will not assume that you are already familiar with the framework.

On the other hand, If you already know AngularJS, you know that it can be as sweet as a rainbow unicorn or as bitter as your worst nightmare: this is why we will teach you a few best practices as well as examples of patterns and anti-patterns all over the course, so that you'll learn a more efficient and clear way of coding your NG apps.

Content and Overview

In this course you'll find 7+ hours of video content; source code is provided for each lesson and in general there will be 2 downloadable attachments per lesson: the start and final source code; this will let you double check that your changes are correct as long as you proceed throughout each chapter. Links to external resources are also provided where useful. Last but not least, I will support you with each question you might have.

The course is divided in 16 sections, each one consisting in several videos (more than 63in total) where we will cover the different components of the AngularJS framework.

By the end of course, you will:

  • Learn how to setup AngularJS and how its architecture is built; (Installation, MVW approach)
  • Acquire familiarity with the main AngularJS components: modules, controllers, routing, 2 way data binding, dependency injection, prototypical inheritance, scopes, filter, directives, services and templates;
  • We will talk a lot about forms, user data validation and filtering. You will learn how to implement a robust form with validation, thanks to Angular Forms and its built-in validator. In other words you will learn how to improve the user experience of your application;
  • Learn how to use $http to query a webserver and handle promises in a response;
  • Be able to build a full Backend Mock to test your application, by using the Angular $HttpBackend service in the NgMock module;.
  • We will dedicate some lessons to custom directives: first a simple implementation then we will unveil the secrets of the "link function", how to isolate the scope and how to make directives reusable with any application.
  • Transform your App into a Real Time application, and learn how to use Firebase and Angular to make updated content available in Real Time on any device.
  • Learn how to secure your application by building Authentication and Authorisation functionalities.

What you will obtain at the end of the course

At the end of the course you will have a deep understanding of the basic concepts of AngularJS, and you will be ready to start your next project by using this great framework.

Who this course is for:
  • This AngularJS (1.x) Course is meant for Web Developers looking to build a solid knowledge on AngularJS
  • Beginners will find a solid AngularJS foundation enriched with real world examples and best practices
  • Developers already familiar to AngularJS but looking to improve their skillset
  • People who are not yet familiar with HTML, CSS, Javascript should take this course after acquiring at least a basic knowledge on the topics