AngularJS for the Real World - Learn by creating a WebApp

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.

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.

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.

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.

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.