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.
Added a new Section (30+ mins of brand new content): Authentication and Authorization with AngularJS and Firebase.
"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.
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 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:
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.
In this lesson we'll take a quick look at the topics covered in this AngularJS course.
Something about the guy that will keep you entertained during the rest of the course.
Let's see what Model View Whatever means and why this is a great pattern in AngularJS
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
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.
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.
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.
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.
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.
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.
Verify what you have learned in this Section!
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) .
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.
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).
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.
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.
Verify your knowlegde on AngularJS Routes and Templates
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.
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.
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.
Let's keep looking at Services, and a few words about Angular's uppermost scope, the $rootScope.
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.
In this lecture, we'll learn more about the NgRepeat directive and its capabilities.
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.
A quick look at how to use the ng-options directive to generate a list of dynamic options for our categories list.
Track by is back. In this AngularJS lecture, we'll learn how to use it to set a default option in our select list.
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.
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
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.
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;
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.
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.
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.
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.
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.
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.
We'll talk about what AngularJS Filters are, and we'll take a look at some improvements in our codebase.
AngularJS offers a good set of built-in filters, let's talk about those.
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.
Did you know that AngularJS filters can be used inside controllers as well? Let's try that out.
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.
In this lecture you'll learn how to easily create a custom filter in AngularJS and use it inside an application.
In this lecture we will introduce a very useful AngularJS service used to mock up a backend: ng-mock.
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.