AngularJS 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!
The very first step to conquering AngularJS is getting it “installed” or added to your project.
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.
With that behind us, we’ll start to take a look at some of the core functionality that Angular provides.
Two-way binding is a fundamental feature of AngularJS.
Once you’ve started using controllers, you will need to get them talking to one another.
Controllers allow you to define properties and methods that your views can utilize.
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 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.
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.
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.
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.
Angular comes with several builtin filters.
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.
Now that you’ve gotten your first directive out of the way (twice!), it’s time to start looking at basic 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.
Directives can be restricted to elements, attributes, and CSS classes.
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.
Beyond only the most trivial of directives, you will quickly need to dig into isolated scopes.
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!