Learn By Example: Angular JS
4.3 (88 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,891 students enrolled

Learn By Example: Angular JS

A complete first principles guide to Angular JS
4.3 (88 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,891 students enrolled
Created by Loony Corn
Last updated 2/2018
English [Auto-generated]
Current price: $64.99 Original price: $99.99 Discount: 35% off
21 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 7 hours on-demand video
  • 110 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll 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
Course content
Expand all 60 lectures 06:48:40
+ 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
  • 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
Who this course is for:
  • Yep! Students who understand Javascript and have built simple web applications
  • Nope! Students who have not been exposed to any kind of web programming