Congratulations on taking the plunge!
This AngularJS course is built with the intent of exposing you to the best available resources on each Angular topic. Our desire is to present these topics richly, and from a variety of vantage points, in order to afford you a more complete perspective on them.
This course is accompanied by AngularJS Tutorial: Learn to Build Modern Web Apps with MEAN.
The learning curve of AngularJS can be described as a hockey stick. Getting started with apps featuring basic functionality is delightfully easy. However, building more complex apps often require understanding Angular's inner workings. Failure to do so will cause development to become awkward and cumbersome.
With AngularJS, the "Ready, Fire, Aim" learning methodology of duct taping together a handful of tutorials and a cursory glance through the documentation will lead to confusion and frustration. This curriculum is designed to properly guide you through each of the key Angular concepts thoroughly with a broad exposure to high quality content. With your eventual mastery of AngularJS, you will be able to fluently and efficiently construct large-scale applications.
AngularJS is not a library.
We've found that the egghead.io videos are the best starting resource available, so every chapter will lead off with them. The transcribed screencasts and source code are provided along with the videos. We encourage you to follow along with them, as they make the video content much more readily digestible.
As good as the egghead videos are, they should serve only as an introductory resource. Excerpts from the O'Reilly AngularJS book and the angularjs.org documentation complement the videos as the broader and more thorough source, and should be treated as the main reference for the course.
When descending upon an entirely new topic, it is important to frame the topic correctly before diving into the minutia.
Read the following two entries in the AngularJS guide docs, they will give you a good idea of what you're about to get into. Don't worry about picking up on every aspect of the topics they glaze over, all of these will be covered thoroughly in subsequent lessons.
Before we get on with it, we recommend this post:
It goes over a handful of topics that might be helpful in building the appropriate mental models while consuming the Angular curriculum. Some, probably most, of the terms will bounce right off you until you have gone through that section of the course, but it should provide valuable context when approaching a new topic.
Now it's off to the races!
One of the awesome things about AngularJS is its usability right out of the box. Very little information about how the framework operates is needed to get up and running with your first application. With that in mind, go ahead and tear through the first five egghead videos:
We're going to crack the cover of AngularJS for the first time.
The following set of guides will serve to reinforce many of the topics just covered, and explain some new ones in detail:
Filters are a simple but powerful tool in Angular, used primarily to format expressions in bindings in views and templates.
These three egghead videos serve to cover the basics nicely:
Finally, the Angular guides offer a bit more depth on filters:
Now you're really getting into the meat of what makes Angular special. Directives are certainly one of the most important facets of the framework, and as such, this is one of the biggest sections of the course. The egghead videos do a superb job covering many of the features and use cases of directives:
There's a lot to digest in those videos, the text will help to clarify:
To wrap up, the Angular guides offer a bit more detail on the specifics of some aspects of directives:
Interestingly, scopes are dramatically underrepresented in mainstream Angular resources compared to how important they are. A solid understanding of scope mechanics is essential when scaling applications, as well as writing modular and testable code. Fortunately, the egghead videos do it justice:
Finally, check out the Angular docs for an in-depth analysis:
At this point, it's important you step back to rethink and examine Angular as a whole. It's easy to mentally paint yourself into a corner when learning a new language or framework, and a great way to combat this is by exposing yourself to alternate ways of thinking, and viewing the bigger picture.
Watch these egghead videos to get started on thinking about alternative application structure:
This section is a bit of a hybrid of seemingly unrelated topics, DOM manipulation, $watch, and view services, but they are closely related, as they all live in close proximity around the application's views in implementation.
The egghead videos do a superb job of tying these topics together:
These book sections will give additional depth on these subjects:
Additionally, we've put together a section that goes into further detail on DOM manipulation:
Animations are a really important part of user interfaces. Fortunately, Angular provides some good tools for making this easy.
Despite this being a short section, understanding Angular templates is critical to being able to build applications effectively.
This handful of egghead videos is an excellent primer on the subject:
The AngularJS book has a terrific and comprehensive section detailing templates:
The documentation guide also has a quick but quality piece on Angular templates:
Angular routing, while not unduly complicated, does introduce a large number of concepts all at once. It also will handle the lion's share (or close to it) of logic for many single page applications. It should then be no surprise that this is the largest section of the course.
The egghead videos appropriately devote a great deal of podium time to routing:
Some of the concepts introduced here are probably still fuzzy, and the text does an excellent job of clearing them up:
Finally, the Angular docs have a great section on the $location service:
At this point, most of the core Angular topics have been covered, and it's appropriate to get into some examples.
egghead has a good, though fairly trivial, example, "Zippy":
Next, the O'Reilly text has a great, chapter-long example that is terrific to work through:
Last, we recommend working through the AngularJS documentation tutorial. The format they present it in is a bit too hands-off to be exceedingly helpful, so we recommend playing around with it and modifying it to get the most out of the exercise.
At this juncture, it's appropriate to dive into the niceties of AngularJS. In order to truly master the framework, hand-wavy arguments for how things work aren't sufficient anymore. You need to get into the nitty-gritty of what makes Angular tick.
These egghead videos offer an excellent primer for some increasingly advanced topics:
Following this, the book has a handful of sections detailing these and other new framework topics:
Finally, there are a healthy number of Angular documentation guide pages that really get down into dissecting Angular. These are some of the best resources on Angular's innards out there, make sure and fully take them in:
Much of Angular's design is built around being highly testable. Central to this is the widespread utilization of dependency injection, which you read about in Chapter 11. Not only this, but with tools like Yeoman available, a robust test suite becomes realistic and manageable.
There is only one egghead video on testing, and it gives a simplistic overview of a unit test on a filter. (It's worth mentioning that the Testacular test runner is now called 'Karma'):
We'd like to get a bit more in depth than that, so next read all of Ch.3 in O'Reilly. This chapter focuses on Yeoman, which is a set of productivity tools that make Angular a lot more digestible: Yo, a scaffolding tool, Grunt, the build and testing tool, and Bower, the package management tool.
A person new to testing might be a little overwhelmed with these concepts and how they play together in the world of testing. This reference should help out:
yothat generates an application skeleton to start out with, complete with things like Bootstrap or a pre-configured testing setup. The scaffold of the application is different in many ways to the angular-seed scaffold, but it is important to note that they both use Karma and Jasmine in the same ways.
Now that we have fleshed out how testing should generally go, let's take a look at the Angular docs on testing. These are going to give some more information on how to think about Angular testing. While they are a good resource to have, regrettably, some of them are not yet complete.
A core requirement of web applications is the need to communicate with other servers. AngularJS allows you to easily do this using the
In addition to
$http, Angular offers a higher level service called
$resource, which abstracts away RESTful communication by creating objects that represent routes. The abstraction can often get in the way so
$http tends to be the better bet, however
$resource can be pretty convenient when communicating with very well defined APIs. If you're interested, the following tutorial gives a pretty good overview: