AngularJS for the Real World - Learn by creating a WebApp

The AngularJS course that will teach you a valuable skill that can make you earn up to $100k/year.
4.3 (93 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
1,188 students enrolled
$115
Take This Course
  • Lectures 69
  • Contents Video: 7 hours
    Other: 1 min
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 9/2015 English

Course Description

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


UPDATED: JAN '16

01-2016: 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.

Reviews

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

Audience

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

What are the requirements?

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

What am I going to get from this course?

  • 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

What is the target audience?

  • This AngularJS Course is meant for Web Developers looking to build a solid knowledge on AngularJs
  • Beginners will find a solid Angular foundation enriched with real world examples and best practices
  • Developers already familiar to Angular 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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Course Overview
00:59

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

02:09

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

04:24

This lessons covers the main advantages offered by AngularJS.

04:35

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

05:05

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

Section 2: AngularJS - Let's see what this is all about
12:26

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.

09:07

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.

04:43

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.

07:21

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.

10:44

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.

03:46

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.

4 questions

Verify what you have learned in this Section!

Section 3: Routing and Templating in AngularJS
13:10

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

03:49

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.

05:23

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


07:00

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.

07:57

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.

4 questions

Verify your knowlegde on AngularJS Routes and Templates

Section 4: It's time to build our AngularJS Event App
05: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.

05:39

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.

05:32

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.

06:49

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

Section 5: Loops in AngularJS: The ng-repeat directive
05:07

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.

03:37

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

05:07

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.

Section 6: AngularJS Form Controls
06:12

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

05:13

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

05:24

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.

08:44

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

02:02

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.

06:08

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.

Section 7: AngularJS Form Validations
01:21

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;

05:42

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.

05:51

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.

04:07

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.

03:57

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.

08:24

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.

10:52

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.

Section 8: AngularJS Filters: Let's make our events searchable!
02:36

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

07:22

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

04:23

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.

03:34

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

02:05

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.

05:15

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

Section 9: Services: Interacting with REST APIs and Promises
Introduction
01:09
$http and AngularJS Promises: Fetching our events by using a GET request
10:40
Using the "resolve" property to initialize data
03:27
The $q Service: Process promises and chaining
12:34
Section 10: BONUS: NgMock: How to simulate backend functionalities in Angular
10:36

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

06:17

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.

Section 11: Building our AngularJS API with the $http service and ngMock
Introduction and App improvements
02:45
Create Events via $http.post
06:55
Inline Editing and UpdateEvents
11:19
Deleting Events: $Index or Object?
06:53
Section 12: Custom Directives: Let's teach some new tricks to our DOM
06:51

How does an angularjs directive look like? what do you need to do? Let's see how to create our first custom directive!

07:53

Now that we know the basics, let's create an AngularJS directive for our event app. We'll take a closer look at the link function.

06:54

We'll see what isolated scope means, and we'll take a step forward in creating a reusable AngularJS directive.

02:59

Time to make our AngularJS custom directive reusable in any application, and not just in our own. Let's learn the best approach to achieve that goal.

14:58

Yes, AngularJS directives can have their own controller. You'll learn how to create a directive for the event app homepage, and how to attach a controller to it.

05:12

In this lecture you will learn about transclusion in AngularJS, why it is useful and how to implement a directive which makes us of ngTransclude to include a specific DOM element inside your directive template.

Section 13: Organize our code by feature - A best practice approach to our folder structure
AngularJS Best Practices: Folder-by-feature application structure
03:47
Section 14: Transform our AngularJS App into a Real Time Application, with Firebase
04:44

Firebase is a powerful service which provides Real Time Data Storage, (in JSON format, therefore NOSQL) as well as a powerful Authentication API and Hosting.

You'll learn how to setup your own Firebase Account and you'll be ready to add superpowers to your Angular App!

03:31

AngularFire is the officially supported AngularJS Binding library for Firebase.


In this lesson you'll learn how to include Firebase and AngularFire in your Ng-App!

06:16

AngularFire (and Firebase) provides a powerful feature to bind our scope to the Real Time Firebase Data Storage.

In this lecture you'll refactor your APIs to use AngularFire, and learn how to synchronize your events collection to a remote database.

You'll be introduced to the amazing 3-way data binding Firebase feature.

Whenever the data changes either in the database, or your model and view, everything will be automatically updated in Real Time and the data will be kept in sync on any device!

08:32

In this lecture you will complete the AngularJS App APIs refactoring, and see how concurrent users of your app will be notified immediately of any change to the events, whether we are adding, removing or updating the data. Specifically, you'll see how powerful can be a Real Time Angular application and how a user on a different device (and session) will see instantly the updated data.

AngularJS and Firebase
6 questions
Section 15: JAN '16: Authentication and Authorization with AngularJS and Firebase
13:22

In this lecture you'll learn how to use the native Firebase createUser function to register a new user into our application.

[Activity] Validation and AuthFactory
1 page
04:30

Let's make our SignUp function AngularJS compliant, by using the $firebaseAuth Service.

06:02

You will learn how to Login registered users to your Angular Event application, and the power of the $authWithPassword AngularFire API.

14:24

There is only one thing left. Secure your application so that only authenticated users can access it. You'll learn how easy is to secure your application areas, thanks to AngularJS and Firebase.

Section 16: Conclusion and what's next
01:09

In this final lesson you will find:

  1. Wrap-Up: A quick recap of what we have done during the course;
  2. What's Next: The course will be extended with new lessons, as a student you'll benefit from extra tools and resources to keep learning AngularJS. find out which topics we will be covering in the future;
  3. Get in touch with the instructor: Where you can find me on Social Media and how to get in touch in case you need any further help;

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Alessandro Russo, Senior Software Engineer, Founder at WebYourMind.com

I am a Software Engineer with almost 13 years' experience across multiple sectors, ranging from Fashion Industry to TLC, Financial, Media companies and Supply chains. I have a strong expertise in Oracle PL/SQL Database Analysis/Development. My skills encompass Database Design, Analysis and Development. Driven from a continuous improvement attitude, I am always keen to learn everything that concerns new technologies, and I have built a strong expertise and interest in MVC/MVVM/MV* Web Design/Development using HTML4/5 & CSS3, Javascript/Jquery, PHP (OOP) and a range of frontend and backend frameworks (AngularJS, Laravel, CodeIgniter, NodeJS, React). Lastly, I am interested in Web Marketing, SEO and Online Teaching. I am the founder of WebYourMind, a Web Agency specialized in highly scalable applications as well as Web Marketing, Online Education and Social Media.

Ready to start learning?
Take This Course