New to AngularJS? Start learning here.

angularAngularJS provides a lot of utility. What does this mean? Well, it means that there is a lot of things for you to learn.

Luckily there is a shed load of great resources for you to get started, including lessons here!

Step One

The very first step to conquering AngularJS is getting it “installed” or added to your project.

AngularJS tutorial about First Step: Adding Angular to the HTML Page

First Step: Adding Angular to the HTML Page

The first step to any AngularJS project, is actually adding AngularJS to the page. This lesson will show you adding the Angular script, initializing the app with ng-app, and simple two way binding with ng-model. This is a beginner level lesson.

Watch this lesson now

With that behind us, we’ll start to take a look at some of the core functionality that Angular provides.

The Basics

Two-way binding is a fundamental feature of AngularJS.

AngularJS tutorial about Basic Binding in AngularJS

Basic Binding in 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.

Watch this lesson now

You’ll quickly want to get your javascript out of your markup, and into controllers.

AngularJS tutorial about Controllers

Controllers

Controllers are the ‘glue’ of an AngularJS application. They connect your markup with your data and act as a sort of switchboard. This video is going to take a look at Controllers and introduce the $scope, building on the Binding video.

Watch this lesson now

Once you’ve started using controllers, you will need to get them talking to one another.

AngularJS tutorial about Sharing Data Between Controllers

Sharing Data Between Controllers

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.

Watch this lesson now

Controllers allow you to define properties and methods that your views can utilize.

AngularJS tutorial about Defining a Method on the Scope

Defining a Method on the Scope

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.

Watch this lesson now

Filtering Data

Filters provide a reusable, testable, encapsulated approach to modifying data. From strings, to arrays, to plain old objects, filters take input, transform it, and deliver the transformed data as a result.

AngularJS tutorial about Filters

Filters

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.

Watch this lesson now

The ng-repeat directive is very handy, and allows you to repeat elements on the view based on a collection. It is also common to use filters to transform the repeater’s input.

AngularJS tutorial about ngRepeat and Filtering Data

ngRepeat and Filtering Data

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.

Watch this lesson now

Angular comes with several builtin filters.

AngularJS tutorial about Built-in Filters

Built-in Filters

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.

Watch this lesson now

Directives

Directives just might be the “secret sauce” of AngularJS. The killer feature. That said, they are arguably the steepest cliff when climbing the Angular learning curve.

AngularJS tutorial about First Directive

First Directive

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.

Watch this lesson now

AngularJS tutorial about Write Your First Directive

Write Your First Directive

Write your very first directive! This lesson will show you how to declare a directive, and start using the “link” function to modify the behavior of an HTML element.

Watch this lesson now

Now that you’ve gotten your first directive out of the way (twice!), it’s time to start looking at basic behaviors.

AngularJS tutorial about Basic Behaviors

Basic Behaviors

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

Watch this lesson now

AngularJS tutorial about Useful Behaviors

Useful Behaviors

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.

Watch this lesson now

Directives can be restricted to elements, attributes, and CSS classes.

AngularJS tutorial about Directive Restrictions

Directive Restrictions

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.

Watch this lesson now

Beyond only the most trivial of directives, you will quickly need to dig into isolated scopes.

AngularJS tutorial about Understanding Isolate Scope

Understanding Isolate Scope

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.

Watch this lesson now

AngularJS tutorial about Isolate Scope "&"

Isolate Scope “&”

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

Watch this lesson now

AngularJS tutorial about Isolate Scope "="

Isolate Scope “=”

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

Watch this lesson now

AngularJS tutorial about Isolate Scope "@"

Isolate Scope “@”

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.

Watch this lesson now

AngularJS tutorial about Isolate Scope Review

Isolate Scope Review

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.

Watch this lesson now

What now?

This guide is a living document. We’ll be updating it until it is a complete outline, as well as providing other guides to help you up ng-mountain. Until then, be sure to check out the rest of the lessons covering AngularJS on egghead.io!

Stay Current.