Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Learn By Example: Angular JS

Name: Learn By Example: Angular JS
Rating: 4.4 (104 reviews)

A complete first principles guide to Angular JS

Created byLoony Corn

Last updated 2/2018

English

English [Auto],

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

16 sections • 60 lectures • 6h 48m total length

You, This Course And Us2:07

Conceptual overview9:24
See the big picture, visually. Get familiar with the terms so they don't seem so daunting.
Example 1: Hello Angular World!4:15
Set up Angular in a development environment, bootstrap the app, and render a hello Angular expression using the double curly braces; see how removing the ng directive leaves braces literal.
Example 2: Data Binding5:39
Data binding in Angular is pure magic, get started with it right away!
Example 3: Controllers10:15
Controllers are the glue which hold the UI and the underlying code together.
Example 4: Services10:00
Services are libraries which can be used anywhere in your Angular application.

Scopes3:55
Every controller has its own scope
Example 7: Different controllers have different scopes11:53
Demonstrate how two AngularJS controllers each create distinct scopes, showing how the scope and controller objects relate, and how identical variable names yield different user interface data.
Example 8: Nested scopes7:25
Explore nested scopes in Angular by creating child scopes through directives, giving each list item its own scope, and understanding how child scopes access parent data while isolating variables.
Scope inheritance and hierarchy5:45
The scope hierarchy mimics the DOM hierarchy, understand what that means.
Example 9: Scope inheritance at work7:55
Scope event propagation2:27
Scopes propagate events, upwards to the parent scope and downwards to the child scopes.
Example 10: Emit and broadcast events9:04
Explore how to emit and broadcast events in AngularJS, using a three-scope hierarchy to see upward and downward event propagation, and track per-scope counts with a simple controller setup.

So, what exactly are directives?10:58
Example 11: The template expanding directive6:37
Example 12: Using the templateUrl property3:04
Example 13: Functions in the templateUrl property5:55
Learn how the templateUrl property can use a function with element and attributes to generate custom content for directive elements based on the about attribute (name, party, spouse).
Example 14: Custom directives with the restrict option4:14
Directives can be attributes, elements, comments and even CSS classes. You can restrict how you want your custom directive to be used.

Example 15: Using the same directive in different controllers4:44
Discover how a single directive can display different candidate data by using two controllers with separate scopes for Donald Trump and Hillary Clinton, a known hack.
Isolated scopes11:40
Learn how isolated scopes in AngularJS directives provide per-directive data, binding specific parent data to each directive while avoiding controller hacks.
Example 16: Understand how isolated scopes work3:44

Data binding and $watch(), $apply() and $digest()11:21
Understanding how data binding works in Angular is key to writing good code.
Example 17: The watch list3:44
Explore how the Angular watch list binds UI to model variables via input bindings, ng repeat, and implicit and explicit watches in the watch list controller.
The Angular context11:09
All code runs in the Angular context, this is how Angular keeps 2 way data binding working!
Example 18: The $apply() function and the $digest() loop4:29
Example 19: Prefer $apply(fn) to $apply()4:33
Learn to use $apply by passing a function, wrapping updates in a try-catch, so digest runs and partial updates aren’t lost due to errors.
Example 20: Use Angular libraries where possible2:27
Learn to replace external JavaScript callbacks with Angular libraries and services, ensuring updates stay within the Angular context using Angular equivalents like ng-click and the timeout service.
Example 21: Watches on objects and collections8:32
Watches can be set up on objects as well as collections, make sure you use the right methods and right parameters!

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

Learn By Example: Angular JS

What you'll learn

Explore related topics

Course content

You, This Course And Us1 lecture • 2min

Introduction To Angular2 lectures • 20min

Install And Setup3 lectures • 15min

Basic Overview Of Angular Components5 lectures • 40min

Controllers: Digging Deeper3 lectures • 23min

Services: Digging Deeper2 lectures • 14min

Scopes And Scope Inheritance7 lectures • 48min

Built-In And Custom Directives5 lectures • 31min

Directives And Isolated Scopes3 lectures • 20min

Behind The Scenes: $watch, $apply and $digest7 lectures • 46min

Requirements

Description

Who this course is for: