Browse all Angular 1.x lessons.

showing All 309 lessons...

Testing Underscores

P

Unit Testing Directive Scope Binding

P

Unit Testing Directive Scope

P

Unit Testing a Directive

P

Unit Testing "Hello World"

P

No Custom Markup

P

Using angular.bootstrap to Initialize Your App

P

Introduction to ui-router

P

angular.copy

P

Animating the Angular Way

P

Animating with JavaScript

P

animation basics

P

ng-repeat-start

P

ngmin

P

Directive Communication

P

Experimental "Controller as" Syntax

P

ng-repeat and $index, $event, $log

P

Components and Containers

P

Injectors

P

Providers

P

Route Life Cycle

P

Directive for Route Handling

P

resolve $routeChangeError

P

resolve conventions

P

Resolve

P

Basic Promises in AngularJS

P

redirectTo

P

$routeParams

P

$routeProvider api

P

The config function

P

ng-view

P

$templateCache

P

templateUrl

P

$scope vs. scope

P

angular.element

P

Building Zippy

P

Thinking Differently About Organization

P

An Alternative Approach to Controllers

P

Transclusion Basics

P

Isolate Scope Review

P

Isolate Scope "&"

P

Isolate Scope "="

P

Isolate Scope "@"

P

Understanding Isolate Scope

P

Directive to Directive Communication in AngularJS

P

Directives Talking to Controllers

P

Useful Behaviors

P

Basic Behaviors

P

Directive Restrictions

P

First Directive

P
angularjs tutorial about Testing Underscores

Testing Underscores

1:27 angularjs PRO

AngularJS injectors understand aliased for core injectables such as $rootScope in unit tests. If you surround your injected object with underscores _$rootScope_ it will be understood and injected into your test by Angular. This allows you to use a local alias of the same name.

angularjs tutorial about Unit Testing Directive Scope Binding

Unit Testing Directive Scope Binding

2:00 angularjs PRO

Digging a little deeper into unit testing an AngularJS directive, this lesson looks at testing binding across multiple scopes.

angularjs tutorial about Unit Testing Directive Scope

Unit Testing Directive Scope

1:57 angularjs PRO

Unit test your AngularJS directives that make changes to $scope as well as their own isolated scopes.

Unit Testing a Directive

2:14 angularjs PRO

In this lesson you will unit test a simple AngularJS directive

Unit Testing "Hello World"

2:26 angularjs PRO

This brief intro to unit testing with AngularJS takes a look at how to configure a test, compile an element, and access AngularJS within your tests.

No Custom Markup

1:39 angularjs PRO

Extending the semantics of HTML is one of the core features of AngularJS, however, you can use AngularJS without any custom markup.

angularjs tutorial about Using angular.bootstrap to Initialize Your App

Using angular.bootstrap to Initialize Your App

1:13 angularjs PRO

In this lesson, John shows you how to use angular.bootstrap as an alternative approach to initializing your application without using ng-app.

angularjs tutorial about Introduction to ui-router

Introduction to ui-router

4:35 angularjs PRO

In his debut egghead.io lesson, Joel will show you how to get setup and running with ui-router, an alternative to AngularJS's default routing module.

angular.copy

3:09 angularjs PRO

In this episode John takes a look at angular.copy and how you can use it for non-destructive form editing. Instead of binding to a value directly, we make a deep copy of that object and bind to the copy for presentation. Updates to the data are then "saved" to the original object to persist changes.

angularjs tutorial about Animating the Angular Way

Animating the Angular Way

5:53 angularjs PRO

In this episode John uses TweenMax to add animations to AngularJS. Instead of manipulating DOM directly in a controller, we will use an AngularJS directive to abstract that view logic cleanly using $animate.

angularjs tutorial about Animating with JavaScript

Animating with JavaScript

3:45 angularjs PRO

In this lesson John looks at how to integrate the popular TweenMax library with ngAnimate to get animation effects in an AngularJS application.

angularjs tutorial about animation basics

animation basics

3:52 angularjs PRO

Angular 1.2 introduces new animation functionality. This episode looks at the very basics of getting the animation module loaded and using it to create your first simple animation with CSS.

angularjs tutorial about ng-repeat-start

ng-repeat-start

1:26 angularjs PRO

This short video tutorial looks at the ng-repeat-start and ng-repeat-end elements added in AngularJS 1.2

angularjs tutorial about ngmin

ngmin

3:28 angularjs PRO

ng-min removes the headache of needing to associate strings with parameter names for minified AngularJS code.

angularjs tutorial about Directive Communication

Directive Communication

4:28 angularjs PRO

In AngularJS, hierarchical directives have the ability to communicate with one another via their defined controllers. With simple syntax/notation you are able to define links between directives and their controllers.

angularjs tutorial about Experimental "Controller as" Syntax

Experimental "Controller as" Syntax

5:20 angularjs PRO

The "controller as" syntax was added to AngularJS 1.2. This syntax abstracts the use of $scope in controllers, simplifying the syntax of your controllers.

angularjs tutorial about ng-repeat and $index, $event, $log

ng-repeat and $index, $event, $log

4:48 angularjs PRO

$index and $event are handy shortcuts that allow you to access useful information directly in your views. $log facilitates configurable logging without using console.log directly.

angularjs tutorial about Components and Containers

Components and Containers

4:27 angularjs PRO

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.

Injectors

2:55 angularjs PRO

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 PRO

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 Route Life Cycle

Route Life Cycle

4:24 angularjs PRO

In this lesson the the route life cycle, John steps through the AngularJS Route life cycle using the routeChangeStart and routeChangeSuccess events. By inspecting the current and previous objects, we can see Angular's awareness of the previous route and controller as well as the current or targeted route and controller. Through the use of the resolve property, the routeChangeSuccess event will be delayed until the promise has been completed.

Directive for Route Handling

3:02 angularjs PRO

Use AngularJS $rootScope within a directive to detect route change errors and display it to the user.

resolve $routeChangeError

5:09 angularjs PRO

We can intercept a route change error and direct the user to an appropriate page.

angularjs tutorial about resolve conventions

resolve conventions

3:23 angularjs PRO

This video shows a more generalized way of using the AngularJS resolve feature with controllers to organize the conditions before the controller is instantiated. The video shows how to condition the controller's instantiation on more than one set of actions (function), and even pass values from the condition processing into the controller's scope once it gets instantiated.

angularjs tutorial about Resolve

Resolve

2:05 angularjs PRO

This video shows how the AngularJS 'resolve' feature can be used during the config phase before your controller has been instantiated. This gives you the opportunity to ensure everything has been setup properly that your controller depends on, thus allowing your controller to execute safely based on its assumptions.

Basic Promises in AngularJS

4:03 angularjs PRO

An AngularJS promise is a mechanism that lets you defer a stated action or series of actions at an earlier point of time until you explicitly declare that promise to be fulfilled (or resolved). Promises are useful for asynchronous operations. This video introduces the basic way to declare and resolve promises.

redirectTo

3:45 angularjs PRO

In AngularJS redirectTo is often assigned a simple static string and thus points invariably to one location (redirectTo: '/mypath'). You can customize this, by setting redirectTo as a function, which arguments are the route params. For instance, if you hit the route "/pizza/peperoni", you can compose your redirection to be "/pizzas", or whatever suits your needs

$routeParams

2:14 angularjs PRO

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 PRO

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.

angularjs tutorial about The config function

The config function

2:55 angularjs PRO

This episode explains the config phase of an AngularJS application and how is it special in regards to $routeProvider (routing configuration) and providers in general.

ng-view

3:03 angularjs PRO

AngularJS's ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (typically the index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.

$templateCache

3:07 angularjs PRO

An alternative to inject an AngularJS template by using $templateCache, using .get() and .put() methods

templateUrl

3:45 angularjs PRO

If you want to keep your template code in a separate html file, you can use the templateUrl property to tell Angular where to find it.

$scope vs. scope

9:14 angularjs PRO

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.

angularjs tutorial about angular.element

angular.element

8:40 angularjs PRO

A brief overview of using element in an AngularJS directive, and how to target one without jquery, and also how to use replace and compile function

angularjs tutorial about Building Zippy

Building Zippy

7:55 angularjs PRO

Building a demo AngularJS directive named Zippy using ng-model, ng-click and transclusion (no controller)

Thinking Differently About Organization

4:22 angularjs PRO

Demonstrates an “outside the box” approach to organizing controllers and directives by collecting them into objects and them passing those object to AngularJS.

An Alternative Approach to Controllers

2:49 angularjs PRO

AngularJS makes your HTML very declarative. However, seeing the functions invoked in your HTML may not offer any clues as to what controller defines said functions. This video offers an approach to solving this problem by returning the controller in the controller definition so that we can opt for something like ng-click="SomeCtrl.doesSomething()" instead of simply writing ng-click="doesSomething()".

angularjs tutorial about Transclusion Basics

Transclusion Basics

2:48 angularjs PRO

Uh oh. Transclusion? What the heck? It's a big word, but it is actually a very simple concept. In this episode John shows you how transclusion is used in your AngularJS directives...

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.

angularjs tutorial about Isolate Scope "&"

Isolate Scope "&"

6:03 angularjs PRO

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 "="

2:51 angularjs PRO

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

Isolate Scope "@"

4:51 angularjs PRO

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.

angularjs tutorial about Understanding Isolate Scope

Understanding Isolate Scope

6:38 angularjs PRO

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.

Directive to Directive Communication in AngularJS

8:01 angularjs PRO

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 PRO

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.

Useful Behaviors

2:55 angularjs PRO

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 PRO

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 PRO

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 First Directive

First Directive

2:08 angularjs PRO

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.

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