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