AngularJS Noob to Master: the noob playlist

Heres an introduction to the basics of angular!

Watch User Created Playlist (30)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Basic Binding in AngularJS

Controllers

P

The Dot

Sharing Data Between Controllers

Defining a Method on the Scope

Filters

ngRepeat and Filtering Data

Built-in Filters

First Directive

Useful Behaviors

Basic Behaviors

Directive Restrictions

Understanding Isolate Scope

Isolate Scope "@"

Isolate Scope "="

Isolate Scope "&"

Isolate Scope Review

P

Directive to Directive Communication in AngularJS

Directives Talking to Controllers

$scope vs. scope

$routeParams

$routeProvider api

Injectors

Providers

Components and Containers

$q.all

Build Your Own ng-controller Directive

P

The basics of $scope.$watch

Introduction to angular-formly

Angular with Webpack - Introduction

angularjs tutorial about Basic Binding in AngularJS

Basic Binding in AngularJS

1:27 angularjs

Binding is a core feature of AngularJS. It provides a simple mechanism for integrating your HTML with your data via {{bracketed expressions}}. In this video, John covers the basics of binding to get you started.

Controllers

1:11 angularjs PRO

Controllers are the 'glue' of an AngularJS application. They connect your markup with your data and act as a sort of switchboard.

angularjs tutorial about The Dot

The Dot

3:02 angularjs

This brief video examines the importance of a single . within your AngularJS application. It uncovers a potential gotcha when it comes to inheritence.

angularjs tutorial about Sharing Data Between Controllers

Sharing Data Between Controllers

5:13 angularjs

If AngularJS Controllers are the glue of an application, how do they communicate and pass data around? This introduction to service factories will shed some light on that question.

angularjs tutorial about Defining a Method on the Scope

Defining a Method on the Scope

2:16 angularjs

Armed with Controllers and service factories, you'll probably want to do some work on the data to give your app behaviors. In this video we will look at providing that behavior by defining a method on the scope. This method will be bound within the HTML and update live as input changes.

Filters

2:19 angularjs

Many times while building an AngularJS application you'll need to manipulate data, and it doesn't make sense to do it with a Controller method. Luckily you have Filters, which are particularly well suited for manipulating text within your HTML views. This handy tool uses a simple syntax to create highly reusable functionality for your apps.

angularjs tutorial about ngRepeat and Filtering Data

ngRepeat and Filtering Data

5:13 angularjs

When working with sets of data, it is common to need to repeat the same UI element over and over again with values from each object in the set. ngRepeat provides an elegant and simple way to accomplish this within your HTML. We will also provide a filter to a repeater that gives us basic search functionality.

angularjs tutorial about Built-in Filters

Built-in Filters

2:13 angularjs

AngularJS comes with several handy filters that you can use out of the box. These filters can be combined to create more complex filtered results.

angularjs tutorial about First Directive

First Directive

2:08 angularjs

Directives might just be the killer feature of AngularJS. Directives allow us to extend the grammar of the web through reusable HTML elements, attributes, and classes.

Useful Behaviors

2:55 angularjs

When you define a directive you get access to the attrs object by declaring it as a dependency in the link function. The attrs object will contain the normalized attributes and their corresponding values declared on the element which contains the directive in the html. So if you set a value on your directive attribute (myDirective="value"), you can access this value in your directive configuration by accessing attrs.myDirective, as this contains the value set in the html for myDirective.

angularjs tutorial about Basic Behaviors

Basic Behaviors

3:29 angularjs

Bring your directives to life with custom behaviours. This is the recommended way of interacting with the DOM in AngularJS. If you find yourself modifying the DOM inside of your controllers (bad), directive behaviours are your solution (awesome).

angularjs tutorial about Directive Restrictions

Directive Restrictions

3:01 angularjs

By default AngularJS directives can be used with elements, attributes, classes, and comments. Many times we want to restrict it to one or more of those to control how a directive will be used. This lesson digs into how and why to use Directive restrictions.

angularjs tutorial about Understanding Isolate Scope

Understanding Isolate Scope

6:38 angularjs

By adding an isolated scope object to your AngularJS directive you can insure that each element using that directive has its own scope. This prevents it from affecting sibling directives and encapsulates the directive.

Isolate Scope "@"

4:51 angularjs

AngularJS isolate scopes can be a bit cryptic when you are first starting out. In this lesson, John looks at the attribute or "@" designator in your isolate scopes.

Isolate Scope "="

2:51 angularjs

Perhaps the most useful of the isolate scope binding methods, this episode talks about the use of "=" for two way binding within your directives.

angularjs tutorial about Isolate Scope "&"

Isolate Scope "&"

6:03 angularjs

The "&" in your isolated scopes within your AngularJS application will allow you to invoke a method within the scope that your directive lives in.

Isolate Scope Review

3:30 angularjs PRO

A review of the three types of isolate scope binding methods in AngularJS. The "@" operator is used for reading an attribute, "=" is used for creating a bi-directional two way binding, and "&" is used to make a call on something a controller scope.

Directive to Directive Communication in AngularJS

8:01 angularjs

In Angular JS, you can use one directive as an element and other directives as attributes to the element, allowing you to specify different functionality for elements based on the attributes in the element. This lesson shows you how to take a group of directive elements and give them each unique functionality based on their directive attributes.

Directives Talking to Controllers

4:43 angularjs

Often in AngularJS we want to share information between controllers and directives. One way to do this is by passing the scope, but this makes the directive reliant on the scope having the methods you want to run. This lesson shows you a cleaner way that you can pass methods to the directive using an attribute and decouple controllers from directives. This in turn makes your directives more generic/reusable.

$scope vs. scope

9:14 angularjs

This episode is explaining the naming conventions behind for the arguments passed to the factory functions for controllers, directives, linking functions, etc., its implications in regard to Angular’s dependency injection, minification side effects on arguments, and how to prevent them.

$routeParams

2:14 angularjs

John continues to dive into routing in AngularJS using ng-view. He provides some simple examples for passing in path parameters using $routeParams.

angularjs tutorial about $routeProvider api

$routeProvider api

1:50 angularjs

AngularJS's $routeProvider has a very basic api for defining your application's routes. $routeProvider.when() is used to match a url pattern to a view while $routeProvider.otherwise() is used to render a view when there is no match to a url pattern.

Injectors

2:55 angularjs

Injectors inject your dependencies in your AngularJS application. For the most part it will automatically work when constructing objects (controllers) and provide the dependencies defined with your service/factory/provider, it can also be injected itself and be used for invoking methods with injection.

angularjs tutorial about Providers

Providers

5:06 angularjs

This lesson describes what is really happening when you use the angular
factory and how you can make your factories even more dynamic in creation.
This gets further into the internals of AngularJS by showing you how a factory is built dynamically for you and how they have reduced the plumbing you need to make applications.

angularjs tutorial about Components and Containers

Components and Containers

4:27 angularjs

This lesson describes fundamentals for creating custom directives (broken down into Components and Containers). The component demonstrates how to use the service template to create a simple clock directive whereby AngularJS will bind with objects in the template property and access element attributes. The component example will provide a demonstration of how you can nest components and containers, taking advantage of AngularJS transclusion capabilities.

$q.all

2:35 angularjs

Orchestrating the handling of multiple promises in AngularJS is simple if you take advantage of $q.all. Using $q.all will take your promises, wait until they have all resolved and return the result of all the promises as an ordered array.

Build Your Own ng-controller Directive

2:20 angularjs PRO

Have you ever wanted to write your own ng-controller directive? No?! That probably means you're sane. That said, it is an interesting study to lift the lid on the black box, and understand how your tools work on a more intimate level.

angularjs tutorial about The basics of $scope.$watch

The basics of $scope.$watch

6:32 angularjs

With AngularJS's $scope.$watch, you are able to monitor scope values for changes. This can be useful for validation of user input, as an example.

angularjs tutorial about Introduction to angular-formly

Introduction to angular-formly

5:43 angularjs

angular-formly is a terrific abstraction on top of forms in Angular. This short introduction shows you how to get started with angular-formly.

angularjs tutorial about Angular with Webpack - Introduction

Angular with Webpack - Introduction

4:20 angularjs

Webpack is a module bundler for the web. It is incredibly powerful and enables modularity in angular applications. This is the first of several lessons to get you up and going with webpack in Angular applications.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?