Have No Fear: 3 Tips on How to Learn AngularJS

Child pretending to be a superhero outdoors under cloudy blue sky

All software engineers have had to learn a new language or technology at some point. For seasoned developers, a new or changing project may require it; however, there is something different about being an entry-level developer and learning a language from the ground up. In my case, I needed to learn AngularJS with just a small amount of JavaScript experience from college under my belt.

AngularJS can be defined as a component-based JavaScript framework used to develop web applications. It consists of services, controllers, views, and directives. These parts interact to create a powerful, testable and complex user interface.

While learning AngularJS can feel daunting at first—especially to the inexperienced—these 3 tips should give you a head start on working with it.

One: Get Familiar with JavaScript

First off, knowing a thing or two about JavaScript is necessary. If you are coming in from the same angle as I did with very little exposure, an introductory tutorial to JavaScript should do the trick. You do not have to reach expert level, but knowing a little about JavaScript will go a long way in learning how to work with AngularJS. Knowing the basic language syntax should be enough to get you started, but it will be important to understand interplay between JavaScript and HTML views.  You’ll also need familiarity with the concept of dependency injection as it serves as the core of all interaction within the AngularJS framework.

Two: Consider the Components

Since AngularJS is an interactive component based framework, you need to get to know the components that make up that framework. Interaction of different AngularJS components can feel intimidating until you understand what each of them does. A quick introduction to the main pieces may prove useful:

  • Services are singleton objects that hold code that you want to use across multiple controllers. Services can be used by other components and can also depend on other services. Enter dependency injection—all you need to do is add the dependency to use the service and the functions it contains.
  • Controllers set up and add functionality to the scope, and scope is what sits between the controller and the view. Inside the controller is where the view model can be set up by giving the scope properties. You can also add functions to the scope here. If controllers sound relatively simplistic, that’s because they should be. Services exist to do the things that controllers shouldn’t, such as housing code that can be shared with other controllers.
  • Directives add customizability to HTML views. Manipulating the DOM exclusively via directives separates that functionality from the rest of the application. You can create custom attributes and elements in addition to using the directives that AngularJS has built in. One example of a built-in directive is ngBind; this directive puts the result of a specified expression into the HTML element it is an attribute of. It also updates the element’s content when the result changes (this is called two-way binding).

A discussion of AngularJS components without mentioning filters would make for an incomplete introduction. Filters are used to format data for presentation to the user. AngularJS comes with several built-in filters including currency, date and number. Custom filters are clearly the most interesting since you can use them to manipulate your data to appear just the way you want it.

With parts like these, you guessed it, AngularJS plays nice with design patterns like MVC and MVVM.

Three: Browse the API

Another plus for amateurs and veterans alike: AngularJS has a stellar API reference and developer guides. This may seem like an obvious step for learning any language, but the documentation for AngularJS is particularly clear and chock-full of useful examples. It would be a mistake not to peruse the documentation before diving into tutorials and writing your first Angular app.

As a note of comfort, remember that the popularity of AngularJS works in your favor. With any question you have, or block you stumble upon, another developer has likely come across a similar problem and posted on a forum about it.

What I appreciate most about AngularJS is the structure and flexibility it provides.  Once my eyes were opened to the possibilities of AngularJS, I realized its power to not only create a slick user interface, but to neatly organize the code behind it. To put a timeline on my experience learning AngularJS, it took about 2-3 weeks for me to start feeling comfortable with it, and 8 weeks of consistently working in it to gain mastery. It may not be the easiest to learn, but it is certainly worthwhile.


About Aaron Osterwyk

Leave a Reply

Your email address will not be published.