Angular 1: From Zero to Hero

Learn Real-World AngularJS with Practical knowledge that you can apply from day ONE.
4.6 (931 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.
8,812 students enrolled
92% off
Take This Course
  • Lectures 98
  • Length 6 hours
  • 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


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


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

About This Course

Published 7/2015 English

Course Description

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…

What are the requirements?

  • Some knowledge of javascript, html and css, don't need much but we won't be covering those topics on this course.

What am I going to get from this course?

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

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

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.


Section 1: Introduction

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

Angular 2.0
OPTIONAL: How to develop with Chrome?
OPTIONAL: Which tools I use to develop with?
IMPORTANT: Course structure, sample and completed code
3 pages
Section 2: How to submit and validate a form in AngularJS
Section 2 - Introduction
Example code for Section 2
1 page
  • 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

  • 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

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

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


Section 3: Creating a list application with searching and sorting
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


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


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.

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.

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.

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.
Section 4: Debugging Tools, Tips and Tricks
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.
Section 5: Deep dive into scope
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.

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.

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.
Quick Question
Section 6: Communicating between controllers using Services
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
Section 7: Connect our application to a REST API using ngResource
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
Section 8: Create template functions with Filters
Example code for Section 8
1 page
Creating custom filters
Section 9: Convert the application into an SPA using uiRouter
Section 9 - Introduction
Example code for Section 9
1 page
What is a Single Page Application?
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
Prefer ui-sref over ng-href
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
Section 10: Creating reusable components with Directives
Section 10 - Introduction
Example code for Section 10
1 page
Introduction to Directives
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 =

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Asim Hussain, Full Stack Web & Mobile Developer

Over 15 years experience working for clients such as the European Space Agency and Google.

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.

Ready to start learning?
Take This Course