Free Online Courses for Software Developers - MrBool

Click here to login

If you don't have a registration, click here to register

Mrbool Courses

Online course

Introduction to Angular JS

Angular JS is a JavaScript framework created and maintained by Google. It is based on the MVC (Model View Controller) framework. It helps developers create SPA (Single Page Applications). In this course, we will explore Angular JS in details. We will do so through examples and exercises to solidify our understanding. The tools that we need are a text editor and a browser. My choices are: Sublime Text 3 to write the code, and Google Chrome to preview the pages. There is so much to learn in this course, so let’s get started.

  • Introduction

    • 1


      In this video, we will start our Angular JS course. We will start with the introduction of Angular JS, and explore the tools that we need to create our examples. Watch this video
    • 2

      Getting Started

      In this video, we will start creating examples. We start with the reference to Angular. We need to make sure that we are referencing the angular file from the correct location. Watch this video
  • Structure

    • 4


      In this video, we will continue our discussion on filtering. We will look at the complete list by adding limitTo (limits the number of records shown), uppercase/lowercase, currency, number, date, and json (used mainly for debugging). Watch this video
    • 5


      In this video, we will start discussing controllers. We start our video with a quick design on how MVC is setup and how angular creates modules and controllers. Watch this video
    • 6

      Publisher Controller

      In this video, we will talk more about controllers, we will put both of them in the same file. We will create a script tag under the angular reference. We will create a publisher controller with simple properties, array, and a function. Watch this video
    • 7

      Custom Filter

      In this video we will dive deeper into filters by creating our own. We will use the module to build our own filter and create a filter called canDrive, which will use the age of a person to decide whether this person can or cannot drive. Watch this video
    • 8

      Data Binding

      In this lesson, we will discuss data binding. We will start with the publisher controller that contains information such as publisher name and books. Watch this video
    • 9


      In this lesson we will see how make the form validation before submit the user data to the server. We will use the form related to cars Watch this video
    • 10

      Copy and ForEach

      This lesson provides some helpful functions such as angular.element, angular.forEach, and angular.equals. See in this lesson some of these functions through examples. Watch this video
  • Directives

    • 11

      Directives Input

      In this lesson, we will discuss the input tag and the angular directives associated with it. For that, we will create a form that asks for the user’s name and favorite language. Watch this video
    • 12

      Working with Directives

      In this lesson, we will discuss the angular directives. Since the directives are a core part of Angular, we will start by creating a module and a controller that adds an array of books to the scope. Watch this video
    • 13

      Two-way Binding

      In this article we will talk about two-way binding. We will use the same controller (the books array). We will start by discussing what two-way binding mean and how important it is in our applications. Watch this video
    • 17


      In this lesson, we are going to talk about events.You will see our basic controller that we’ve been working with (book controller) and also how to use the ng-class-even and ng-class-odd to style the rows within the table. Watch this video
    • 18

      Custom Directives

      In this lesson, we are going to talk about custom directives. We will start with the usual suspects: ng-app, controller, and the scope. Watch this video
    • 19

      Custom Directive: Changing DOM

      In this lesson, we will discuss a custom directive in details. This example is already presented on the Angular website, but we will discuss it in this video to explain some of the details around custom directives. Watch this video
    • 20

      Custom Directive: Events

      In this lesson, we will wrap up our custom directives discussion. We will have two objects on the scope. Then, we will discuss the changes that need to happen inside the directive to account for the new element. Watch this video
  • Services

    • 22

      Service Factory

      In this lesson, we will see how to create a service using the factory approach. The plan is to create a simple logging service which we will create a new one to illustrate how that can be done. Watch this video
    • 24

      Built-In Services

      In this lesson, we will be discussing the built-in services. we will use the built-in services from Angular and specifically talk about exceptions, window, document, location, and log. Watch this video
    • 26

      Http Service

      In this lesson, we will continue our discussion on built-in services. We will talk about HTTP get and well briefly discuss the need to a web server to serve this file (using IIS express and Visual Studio). Then, we will start building the HTML Watch this video
    • 27

      Plnkr Editor

      In this videolesson, we will discuss a new editor: Plnkr. We will visit the page ( and see how simple it is to develop Angular examples using Plnkr. Watch this video
    • 28

      Retrieving JSON Data

      In this lesson we will see how to call a service and read JSON data. We will use a publicly available URL that returns JSON data and then use the $http service to get the data and display it in a table. Watch this video