Angular 1.x

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

Just starting out? Check out this guide!

COURSES 12

WATCH Lukas Ruebbelke's COURSE

Using Angular 2 Patterns in Angular 1.x Apps

Using Angular 2 Patterns in Angular 1.x Apps

Implementing modern component-based architecture in your new or existing Angular 1.x web application is a breath of fresh air. ...

13 lessons

WATCH Lukas Ruebbelke's COURSE

AngularJS Fundamentals

AngularJS Fundamentals

AngularJS is an incredibly powerful framework but sometimes it can be confusing and frustrating trying to figure out how all of...

9 lessons

WATCH Lukas Ruebbelke's COURSE

AngularJS Application Architecture

AngularJS Application Architecture

One challenge when learning AngularJS is that most examples are trivial. It is difficult to find materials on learning "real-wo...

17 lessons

WATCH Aaron Frost's COURSE

Introduction to Angular Material

Introduction to Angular Material

Angular Material is an Angular-native, UI component framework from Google. It is a reference implementation of Google's Materia...

7 lessons

WATCH Lukas Ruebbelke's COURSE

Building an Angular 1.x Ionic Application

Building an Angular 1.x Ionic Application

Ionic allows you to build cross platform native applications using Angular. In this course we will convert the Eggly AngularJS ...

9 lessons

WATCH Kent C. Dodds's COURSE

Angular and Webpack for Modular Applications

Angular and Webpack for Modular Applications

How much work would it take for you to move all of your directives and their templates to several different new directories? Yo...

10 lessons

WATCH Kent C. Dodds's COURSE

AngularJS Authentication with JWT

AngularJS Authentication with JWT

JSON Web Tokens (JWT) are a more modern approach to authentication. As the web moves to a greater separation between the client...

7 lessons

WATCH Brett Cassette's COURSE

AngularJS Data Modeling

AngularJS Data Modeling

Data is the bedrock of any application, including your AngularJS project. This series will dive deep into data models, and how ...

13 lessons

WATCH Lukas Ruebbelke's COURSE

Angular Automation with Gulp

Angular Automation with Gulp

In this series we will take a look at Gulp. Gulp is a task runner. It is the commander of our army of helper robots that take c...

8 lessons

WATCH Joel Hooks's COURSE

Learn Protractor Testing for AngularJS

Learn Protractor Testing for AngularJS

Protractor is an end-to-end testing framework for AngularJS applications. It allows you do drive the browser and test the expec...

10 lessons

WATCH Lukas Ruebbelke's COURSE

Ionic Quickstart for Windows and Mac

Ionic Quickstart for Windows and Mac

Welcome to the Ionic Quickstart series where you will learn how to get started with Ionic from the ground up. We will begin wit...

14 lessons

WATCH Lukas Ruebbelke's COURSE

Build Angular 1.x Apps with Redux

Build Angular 1.x Apps with Redux

One of the hardest things about writing non-trivial applications is managing state. In our attempt to effectively manage state,...

13 lessons

Using Angular's ngClass

Using Angular's ngClass directive you can dynamically assign classes to the HTML elements in your Angular application. This video will show you several different methods for taking advantage of An...

Jacob Carter
3:07

Services, Factories, and Providers: Creating a Provider

Creating your own services in AngularJS can be confusing. What are the differences between an AngularJS module's Service, Provider and Factory functions? This lesson shows how Angular's provider f...

Craig McKeachie
7:45

Services, Factories, and Providers: Creating a Value Object

Creating your own services in AngularJS can be confusing. What are the differences between an AngularJS module's Service, Provider, Factory, and Value functions? This lesson shows how Angular's va...

Craig McKeachie
2:30

Services, Factories, and Providers: Creating a Factory

Creating your own services in AngularJS can be confusing. What are the differences between an AngularJS module's Service, Provider and Factory functions? This lesson shows how Angular's factory fu...

Craig McKeachie
3:53

Services, Factories, and Providers: Creating a Service

Creating your own services in AngularJS can be confusing. What are the differences between an AngularJS module's Service, Provider and Factory functions? This lesson shows how Angular's service fu...

Craig McKeachie
3:45

When should I use ng-show or ng-if

Walkthrough the main differences between the ng-show and ng-if directives

Benjamin Roth
5:34

Sync Requests with RxJS and Angular

When you implement a search bar, the user can make several different queries in a row. With a Promise based implementation, the displayed result would be what the longest promise returns. Here we s...

Benjamin Roth
4:56

Getting started with $animateCss and Angular

ngAnimate 1.4 introduces $animateCss which allows us to interact with css based animations through our Javascript. Learn how to get started creating animations with $animateCss.

Scott Moss
2:30

Transforming raw JSON data to meaningful output in AngularJS

JSON from server often exposes raw data you have to transform to present to your end users. In this lesson, we cover a few solutions to make it happen.

Benjamin Roth
6:38

Extract predicate methods into filters for ng-if and ng-show

Leaking logic in controllers is not an option, filters are a way to refactor your code and are compatible with ng-if and ng-show

Benjamin Roth
3:09

Stateful filters with promises in AngularJS

This lesson illustrates how to use promises inside Angular filters

Benjamin Roth
4:44

angular-formly: Extending Types

Extending types is one of the ways that makes angular-formly help you keep your Angular forms DRY. When use responsibly, they can make it much easier to manage common types, allowing you to add a b...

Kent C. Dodds
2:17

FEATURED ANGULAR 1.X PLAYLISTS

Browse all Angular 1.x lessons.

showing All 309 lessons...

Basic Binding in AngularJS

Controllers

P

The Dot

Sharing Data Between Controllers

Defining a Method on the Scope

Filters

Unit Testing AngularJS

ngRepeat and Filtering Data

Built-in Filters

First Directive

Directive Restrictions

Basic Behaviors

Useful Behaviors

Directives Talking to Controllers

Directive to Directive Communication in AngularJS

Understanding Isolate Scope

Isolate Scope "@"

Isolate Scope "="

Isolate Scope "&"

Isolate Scope Review

P

Transclusion Basics

An Alternative Approach to Controllers

Thinking Differently About Organization

Building Zippy

angular.element

$scope vs. scope

templateUrl

$templateCache

ng-view

The config function

$routeProvider api

$routeParams

redirectTo

Basic Promises in AngularJS

Resolve

resolve conventions

resolve $routeChangeError

Directive for Route Handling

Route Life Cycle

Providers

Injectors

Components and Containers

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

Experimental "Controller as" Syntax

Directive Communication

ngmin

ng-repeat-start

animation basics

Animating with JavaScript

Animating the Angular Way

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.

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.

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.

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.

Unit Testing AngularJS

5:18 angularjs

Testing is a first class citizen in AngularJS. It is at its heart and soul. This lesson demonstrates using Karma to write a simple unit test for a Filter.

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.

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.

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.

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.

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).

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.

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.

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.

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.

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.

Transclusion Basics

2:48 angularjs

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...

An Alternative Approach to Controllers

2:49 angularjs

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()".

Thinking Differently About Organization

4:22 angularjs

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

Building Zippy

7:55 angularjs

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

angular.element

8:40 angularjs

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

$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.

templateUrl

3:45 angularjs

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.

$templateCache

3:07 angularjs

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

ng-view

3:03 angularjs

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.

The config function

2:55 angularjs

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.

$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.

$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.

redirectTo

3:45 angularjs

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

Basic Promises in AngularJS

4:03 angularjs

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.

Resolve

2:05 angularjs

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.

resolve conventions

3:23 angularjs

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.

resolve $routeChangeError

5:09 angularjs

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

Directive for Route Handling

3:02 angularjs

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

Route Life Cycle

4:24 angularjs

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.

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.

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.

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.

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

4:48 angularjs

$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.

Experimental "Controller as" Syntax

5:20 angularjs

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.

Directive Communication

4:28 angularjs

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.

ngmin

3:28 angularjs

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

ng-repeat-start

1:26 angularjs

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

animation basics

3:52 angularjs

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.

Animating with JavaScript

3:45 angularjs

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

Animating the Angular Way

5:53 angularjs

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.

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