Angular 1: From Zero to Hero
4.4 (1,063 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.
9,172 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Angular 1: From Zero to Hero to your Wishlist.

Add to Wishlist

Angular 1: From Zero to Hero

Learn Real-World AngularJS with Practical knowledge that you can apply from day ONE.
4.4 (1,063 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.
9,172 students enrolled
Created by Asim Hussain
Last updated 12/2016
Current price: $10 Original price: $180 Discount: 94% off
1 day left at this price!
30-Day Money-Back Guarantee
  • 5.5 hours on-demand video
  • 2 Articles
  • 11 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build Single Page Applications (SPA) in AngularJS using the uiRouter module
  • Combine HTML and JS into re-usable components called Directives
  • Know how to perform http operations using the basic $http service and the more advanced ngResource module.
  • Learn how to use some of the most popular 3rd party modules available for AngularJS to add complex functionality in a fraction of the time.
View Curriculum
  • Some knowledge of javascript, html and css, don't need much but we won't be covering those topics on this course.

IMPORTANT: This course is for Angular v1 ONLY

UPDATE: 01/2016

  • Added a lecture to give a quick discussion about Angular 2.0.
  • Added a lecture to give an overview of how to use the developer tools in Chrome.
  • Added a lecture to explain the IDE I use and it’s key features.
  • Added an introductory lecture for each section.


AngularJS was built to make you a better, more productive and happier developer. It's the framework enabling a new era in rich client side web experiences. It's the future.

This is a hands-on course taught by an experienced AngularJS developer who's built dozens of angular apps for a variety of clients including Google.

Every lecture in this course ties into real world benefits or applications, after only the first chapter you'll have the knowledge to add amazing AngularJS features to your current project.

Through a series of real-world examples you will learn the skills needed to build fully functional single page applications in AngularJS.

Learn battle proven techniques in AngularJS to solve common problems every web developer faces on a daily basis, such as:-

  • Performing form validation with zero lines of code using a third party AngularJS package.
  • Showing a beautiful datepicker control using a third party AngularJS package.
  • Creating and interacting with bootstrap modals in AngularJS.
  • When it comes to Single Page Applications we teach the far more popular and powerful AngularJS uiRouter module instead of the basic core angular routing module.
  • Tools, tips and tricks to debugging your AngularJS applications.

This course is taught hands-on, you learn by doing. Follow along as we go through two example AngularJS applications the first a simple lowly form which we give super powers the second a complex single page contacts application where you will learn:-

  • How to build easily re-usable bits of html & javascript using custom AngularJS directives.
  • How to interact with a REST API using ngResource in 5 lines of code.
  • Implementing infinite scroll, user feedback with spinners and toast messages.
  • As well as much much more….

You'll learn how to implement functionality that's expected in todays applications in a fraction of the time using AngularJS compared to other frameworks.


I envy you I really do. I remember the first time I discovered AngularJS, everything just clicked, I got a warm fuzzy feeling inside and my eyes glazed over. I know because every developer I've introduced AngularJS to since has had the same look in their eyes.

It's perfect for the kinds of problems we have with the web today, everything is moving client side and the javascript portion of our websites are getting more and more complex.

You are here because you know you need something that can handle that complexity, you know that the future is moving to an even more client side experience and you suspect AngularJS might be the solution, and do you know what? You're right…

Who is the target audience?
  • This course is for existing web developers who want to add AngularJS to their skill set.
  • This course is not for people beginning web development from scratch
Students Who Viewed This Course Also Viewed
Curriculum For This Course
98 Lectures
5 Lectures 27:16

Who am I, why do you want to learn AngularJS from me and what you will learn on this course.

Preview 02:17

IMPORTANT: Course structure, sample and completed code
3 pages
How to submit and validate a form in AngularJS
9 Lectures 53:26
Section 2 - Introduction

  • After this lesson you will be able to perform data binding as well as have an understanding of your first two AngularJS directives, ng-init and ng-model.

DIRECTIVES: ng-init, ng-model

Preview 02:04

  • After this lesson you will know what controllers are in AngularJS.
  • You'll understand how AngularJS structures code into modules and how to define an AngularJS module.
  • You will create your first AngularJS controller and attach it to a html element with the directive ng-controller.
  • You'll understand how to listen to click events on html elements and call functions on your controller with the ng-click directive.
  • You'll also be introduced to AngularJS filters and how to use them to adjust bound data before display.

DIRECTIVES: ng-controller, ng-click

Preview 08:02

  • After this lesson you will know how to perform HTTP requests in AngularJS using the $http service.
  • You will learn how to "inject" the $http service into a controller and perform a POST request submitting the data in a form.
Preview 03:25

  • After this lesson you will know how to perform trigger standard client side HTML5 form validation by using the ng-submit directive instead of the ng-click directive to submit a form.

DIRECTIVES: ng-submit

Preview 04:10

  • After this lesson you will know how to perform client side validation using core AngularJS components.
  • You will learn how the built in AngularJS variables associated with a form to style the form and form controls according to their state (valid, pristine etc..).
  • You will know how to add classes dynamically to elements using the ng-class directive and you will lean how to dynamically show or hide elements using the ng-show/ng-hide directives.
  • You will also know how to show error messages to the user if the form fails validation.

DIRECTIVES: ng-class, ng-show, ng-hide
Preview 14:23

  • In this lesson you will learn how to perform client side validation in AngularJS using the 3rd party module angular-auto-validate with almost no lines of code required.
  • You will learn how to create custom validation error messages for specific controls to customise the user experience of your application.
Preview 13:24

  • User feedback in dynamic app is really important since it's usually the only way an end user knows there request is completed, we'll be adding user feedback in the form of ladda buttons via the 3rd party angularLadda package.


Preview 04:58
Creating a list application with searching and sorting
8 Lectures 36:00
Section 3 - Introduction

Example code for Section 3
1 page

  • Learn how to use the AngularJS ng-repeat directive to render a list of items in a table and also get the index your are looping through with the special $index angular variable.
  • You'll also learn how to format dates correctly in AngularJS using the date filter.

DIRECTIVES: ng-repeat

Looping in AngularJS

In this lesson we will take you through how to select rows in our table in our example application and then style the row light grey as a visual feedback that it is selected.

  • You'll learn how to handle clicks on table rows with the ng-click directive.
  • You'll learn how to style the selected table row by leveraging the ng-style directive.

DIRECTIVES: ng-sltyle, ng-click

Handling clicks

In this lesson we will extend our contacts application so when you click on a person in the list we will display details about that person in a panel on the right hand side.

  • You'll learn how to pass in objects to an ng-click handler.
  • You'll learn that when using angular the same piece of data can be bound in two places in a html document.
Showing details when clicking on a row

In this lesson we will add client side searching and filtering in our contacts application so an end user can type in a string into in input control and the list will be filtered accordingly.

  • You'll learn how to perform filtering of a list by using a simple AngularJS trick of using the "filter" AngularJS filter with a bound search variable.
  • You'll learn how to perform searches matching specific fields on a list of objects and also how to perform a search across all fields using the special ' property.
  • You'll also learn how to perform searching using a custom comparator function.
How to implement client side searching

In this lesson we will add client side ordering in our contacts application so an end user can choose how they want the results ordered, they will be able to choose via a drop down select box and also by clicking on arrow buttons in the column headers.

  • You'll learn how to perform ordering of a list by using a simple AngularJS trick of using the "oderBy" angular filter with a bound order variable.
How to implement client side ordering

In this lesson we will add a message box to our contacts application so if an end user searches by a string that isn't found we can tell them, otherwise they won't know if the application is broken and not working or if the search hasn't returned any results.

  • You'll learn how to capture the result of an array passed through a set of filters into a variable and how to use that variable outside of an ng-repeat loop to render some nice feedback messages.
User feedback
Debugging Tools, Tips and Tricks
2 Lectures 04:30
CORRECTION: How to debug your Angular applications?
1 page

In this lesson we will cover how to debug your AngularJS application using the two most popular debugging plugins for Chrome.

  • We'll first cover how to use the angular-batarang plugin and one of the most useful hidden features of that plugin.
  • You'll then learn how to use the much lighter weight ng-inspector chrome plugin to perform very fast inspections of your angularjs application.
Preview 04:30
Deep dive into scope
6 Lectures 17:17
Section 5 - Introduction

Example code for Section 5
1 page

Controllers, and therefore scope, can nest, that is to say that child scopes can inherit properties and functions from parent scopes.

  • In this lesson you will learn how child controllers can bind to scope variables on parent controllers as well as call functions on parent controllers.
  • You will also learn when the parent child relationship breaks and data-binding stops working.
Understanding Scope: Child Scope

The top level scope is called rootScope and all other scopes in all other controllers and directives inherit from rootScope.

  • You will learn how to bind to rootScope variables in templates.
  • You will learn how to inject rootScope into angular controllers and set variables directly onto it.
  • You will also learn when to use rootScope and when not to use rootScope.
Understanding Scope: Root Scope

An incredibly common problem new AngularJS developers face is when binding doesn't work as expected, almost always the cause of this frustration is a lack of understanding of prototypal inheritance in javascript.

  • You will learn why binding sometimes breaks in angular and how to determine if this has happened using the ng-inspector chrome plugin.
  • You will learn how to resolve these issues by always using the dot notation.
Understanding Scope: The Dot Notation

Quick Question
Communicating between controllers using Services
6 Lectures 13:23
Example code for Section 6
1 page

Breaking out the list application into two controllers

Sharing data between controllers using rootScope

Sharing data between controllers using Services

Creating our first service

Consuming our service in our controllers
Connect our application to a REST API using ngResource
25 Lectures 01:29:50
Section 7 - Introduction

Example code for Section 7
1 page

What are resources?

CodeCraft Token

Configuring AngularJS resources

Creating our first resource

Setting up ngInfinateScroll

Implementing pagination

Removing client side searching & sorting

Watch scope variables for changes

Server side sorting & ordering

Adding a loading spinner

Showing a warning when no results are returned

Convert the detail panel to a form

Update a contact using our resource

Delete a contact using our resource

Create a bootstrap modal using angularStrap

Reusing snippets of HTML with ng-include

Creating a contact using our resource

Promises in AngularJS with the $q service

Display images with ng-src

Adding a datepicker using angularStrap

Adding toaster messages with angularjsToaster

Adding font awesome

Adding a material design bootstrap theme
Create template functions with Filters
2 Lectures 08:23
Example code for Section 8
1 page

Creating custom filters
Convert the application into an SPA using uiRouter
18 Lectures 52:30
Section 9 - Introduction

Example code for Section 9
1 page

Setup and install uiRouter

Deciding on our URL routes

Creating our List route


Defining a controller for a route

Creating our Edit route

Exposing the routes parameters in the controller

Implementing the Edit route

Redirecting to another url using $state.go

Controllers vs Services

Implementing the Create route

Highlighting menu items using ui-sref-active

Multiple named views using uiRouter

A better search with ng-model-options
Creating reusable components with Directives
14 Lectures 35:44
Section 10 - Introduction

Example code for Section 10
1 page

Creating a directive for our spinner

Restrict and the 3 ways to define directives

Everything is just a directive

Understanding Transclude

Isolate Scope

Understanding Isolate Scope =

A way to think about directives

Understanding Isolate Scope @

Creating a business card directive

Understanding Isolate Scope &

Defining a controller for our directive
2 More Sections
About the Instructor
Asim Hussain
4.6 Average rating
3,875 Reviews
21,404 Students
5 Courses
Speaker • Trainer • Author • Developer

Over 15 years experience working for clients such as the European Space Agency and Google, regular conference speaker and published author.

Wrote my first program in 1988, my first website in 1996, earned a 1st Class Degree in Computer Science in 2000 and now 15 years later I own a digital agency in London called Bubblegum specialising in building complex web & mobile applications in AngularJS/Node/Django and IonicFramework.

As well as building applications for awesome clients word-wide, through Udemy i'm now following my dream of teaching other passionate developers like myself what I know through my company CodeCraft.

# What do I believe?

- I believe as a developer at it's heart, your job is to make the lives of other people more productive, that's what computing is all about.

- So if you yourself are not 100% focussed on making your own development as productive as possible then it doesn't bode well for your clients.

# What are my values?

- I'm 100% focused on practical development skills.

- I don't waste peoples time.

- I value my time and I value yours.

- I'm driven to be the most productive developer I can possibly be. I don't get caught up in philosophical debates.

- I value shipping “correct" functionality as fast as possible for myself and my clients.

If those are your values as well them you will love my courses.

If you want to sip your skinny decaf soya latte whilst discussing the pros and cons of different naming conventions for 3 hours then look somewhere else, if you want to learn how to ship functionality as fast as possible for yourself and your clients, these courses are for you.