Development
Web Development
AngularJS
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
English [Auto-generated]
Preview this course
Learn By Example: Angular JS
Current price: $64.99 Original price: $99.99 Discount: 35% off
21 hours left at this price!
Buy now
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.

Pure Javascript doesn't cut it anymore
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.

Why is Angular cool?
Preview 10:15
+ – Install And Setup
3 lectures 14:43

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

Installing Angular
03:38

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

What are those Angular files all about?
Preview 06:02

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

Npm And Http Server Install
05:03
+ – 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
09:24
Example 1: Hello Angular World!
04:15

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

Example 2: Data Binding
05:39

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

Example 3: Controllers
10:15

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

Example 4: Services
10:00
+ – Controllers: Digging Deeper
3 lectures 22:48
Traditional data binding vs Angular data binding: Angular wins hands down!
06:34
So, what exactly is a controller?
05:04
Example 5: Controller holds state and behavior
11:10
+ – Services: Digging Deeper
2 lectures 14:10

Lazily instantiated, singleton libraries!

So, what exactly is a service?
03:09
Example 6: Lazily instantiated singleton services
11:01
+ – Scopes And Scope Inheritance
7 lectures 48:24

Every controller has its own scope

Scopes
03:55
Example 7: Different controllers have different scopes
11:53
Example 8: Nested scopes
07:25

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

Scope inheritance and hierarchy
05:45
Example 9: Scope inheritance at work
07:55

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

Scope event propagation
02:27
Example 10: Emit and broadcast events
09:04
+ – Built-In And Custom Directives
5 lectures 30:48
So, what exactly are directives?
10:58
Example 11: The template expanding directive
06:37
Example 12: Using the templateUrl property
Preview 03:04
Example 13: Functions in the templateUrl property
05:55

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

Example 14: Custom directives with the restrict option
Preview 04:14
+ – Directives And Isolated Scopes
3 lectures 20:08
Example 15: Using the same directive in different controllers
04:44
Isolated scopes
11:40
Example 16: Understand how isolated scopes work
Preview 03:44
+ – 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()
11:21
Example 17: The watch list
03:44

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

The Angular context
11:09
Example 18: The $apply() function and the $digest() loop
04:29
Example 19: Prefer $apply(fn) to $apply()
04:33
Example 20: Use Angular libraries where possible
02:27

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
08:32
Requirements
  • A basic understanding of the Javascript programming language
  • A basic understanding of web programming, HTML, CSS etc
Description

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
Featured review
Robert Burns
Robert Burns ( 8 courses, 3 reviews )
a year ago
This course was of great help in building a new skill required for a new position. Within no time, I was starting to grasp how AngularJS concepts fit together and could successfully take on and improve upon a legacy codebase.