Learn By Example: Angular JS
4.6 (46 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.
1,847 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learn By Example: Angular JS to your Wishlist.

Add to Wishlist

Learn By Example: Angular JS

A complete first principles guide to Angular JS
4.6 (46 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.
1,847 students enrolled
Created by Loony Corn
Last updated 7/2017
Current price: $10 Original price: $50 Discount: 80% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 7 hours on-demand video
  • 110 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build intermediate level web applications using the Angular framework
  • Develop custom directives, filters, services and other Angular components
  • Understand behind the scenes details of the digest loop, dependency injection and other Angular Constructs
View Curriculum
  • A basic understanding of the Javascript programming language
  • A basic understanding of web programming, HTML, CSS etc

NOTE: This course uses Angular version 1.5.8 and is not compatible with Angular 2

Angular JS is a complete re-imagination of how web applications should be built. It takes best practices, learnt the hard way, and makes them super simple for everyone to use. Learn by example, in small easy-to-digest bits.

Let's parse that.

  • A complete re-imagination: Angular introduces a whole bunch of new concepts, which seem daunting but you'll soon find that they are essential building blocks, your applications *just work*, are long-lived and easy to maintain
  • Best practices made super simple: The model-view-controller design pattern, dependency injection, view-agnostic code, testability - Angular sets up structures which ensure that developers write code the right way
  • In this course, we will learn by example. Each example is self-contained, has its source code attached, and gets across a specific Angular use-case. Each example is simple by itself, but they come together as building blocks to build complex use cases.

What's included in this course:

  • Installing and setting up a basic web server with Angular libraries 
  • Angular basics: Templates, controllers, directives, scopes, services, filters, expressions and data binding
  • Angular in-depth: Custom directives for template expansion and DOM manipulation, scope inheritance and isolated scopes, custom filters and comparators, forms and validation, routing and single page applications
  • Angular behind the scenes: The $watch list, $apply function and the $digest loop, dependency injection and service recipe types

Using discussion forums

Please use the discussion forums on this course to engage with other students and to help each other out. Unfortunately, much as we would like to, it is not possible for us at Loonycorn to respond to individual questions from students:-(

We're super small and self-funded with only 2 people developing technical video content. Our mission is to make high-quality courses available at super low prices.

The only way to keep our prices this low is to *NOT offer additional technical support over email or in-person*. The truth is, direct support is hugely expensive and just does not scale.

We understand that this is not ideal and that a lot of students might benefit from this additional support. Hiring resources for additional support would make our offering much more expensive, thus defeating our original purpose.

It is a hard trade-off.

Thank you for your patience and understanding!

Who is the target audience?
  • Yep! Students who understand Javascript and have built simple web applications
  • Nope! Students who have not been exposed to any kind of web programming
Compare to Other AngularJS Courses
Curriculum For This Course
60 Lectures
You, This Course And Us
1 Lecture 02:07
Introduction To Angular
2 Lectures 20:06

As web applications get more complex, Javascript is tedious, repetitive and hard to maintain. We need something which is built for large scale projects.

Preview 09:51

Angular makes heavy use of design patterns and is built to make testing easier. These are just some reasons to use this framework.

Preview 10:15
Install And Setup
3 Lectures 14:43

Get Angular core components and other libraries set up on your machine.

Installing Angular

What are all those files you just downloaded? A brief guide.

Preview 06:02

Run your own local server, it is super fast and simple!

Npm And Http Server Install
Basic Overview Of Angular Components
5 Lectures 39:33

See the big picture, visually. Get familiar with the terms so they don't seem so daunting.

Conceptual overview

Example 1: Hello Angular World!

Data binding in Angular is pure magic, get started with it right away!

Example 2: Data Binding

Controllers are the glue which hold the UI and the underlying code together.

Example 3: Controllers

Services are libraries which can be used anywhere in your Angular application.

Example 4: Services
Controllers: Digging Deeper
3 Lectures 22:48
Traditional data binding vs Angular data binding: Angular wins hands down!

So, what exactly is a controller?

Example 5: Controller holds state and behavior
Services: Digging Deeper
2 Lectures 14:10

Lazily instantiated, singleton libraries!

So, what exactly is a service?

Example 6: Lazily instantiated singleton services
Scopes And Scope Inheritance
7 Lectures 48:24

Every controller has its own scope


Example 7: Different controllers have different scopes

Example 8: Nested scopes

The scope hierarchy mimics the DOM hierarchy, understand what that means.

Scope inheritance and hierarchy

Example 9: Scope inheritance at work

Scopes propagate events, upwards to the parent scope and downwards to the child scopes.

Scope event propagation

Example 10: Emit and broadcast events
Built-In And Custom Directives
5 Lectures 30:48
So, what exactly are directives?

Example 11: The template expanding directive

Example 13: Functions in the templateUrl property

Directives can be attributes, elements, comments and even CSS classes. You can restrict how you want your custom directive to be used.

Preview 04:14
Directives And Isolated Scopes
3 Lectures 20:08
Example 15: Using the same directive in different controllers

Isolated scopes

Behind The Scenes: $watch, $apply and $digest
7 Lectures 46:15

Understanding how data binding works in Angular is key to writing good code.

Data binding and $watch(), $apply() and $digest()

Example 17: The watch list

All code runs in the Angular context, this is how Angular keeps 2 way data binding working!

The Angular context

Example 18: The $apply() function and the $digest() loop

Example 19: Prefer $apply(fn) to $apply()

Example 20: Use Angular libraries where possible

Watches can be set up on objects as well as collections, make sure you use the right methods and right parameters!

Example 21: Watches on objects and collections
6 More Sections
About the Instructor
Loony Corn
4.3 Average rating
5,481 Reviews
42,701 Students
75 Courses
An ex-Google, Stanford and Flipkart team

Loonycorn is us, Janani Ravi and Vitthal Srinivasan. Between us, we have studied at Stanford, been admitted to IIM Ahmedabad and have spent years  working in tech, in the Bay Area, New York, Singapore and Bangalore.

Janani: 7 years at Google (New York, Singapore); Studied at Stanford; also worked at Flipkart and Microsoft

Vitthal: Also Google (Singapore) and studied at Stanford; Flipkart, Credit Suisse and INSEAD too

We think we might have hit upon a neat way of teaching complicated tech courses in a funny, practical, engaging way, which is why we are so excited to be here on Udemy!

We hope you will try our offerings, and think you'll like them :-)