5 Tips for Getting Started With Angular

Introduction

For a little over a month now, I’ve been getting to grips with AngularJS.

Every once in a while, you come across a framework which you realize will fundamentally change the way you work. One such example for me was ASP.NET MVC. Moving from server controls and page lifecycle events to action methods and Razor syntax was a massive shift, but ultimately a liberating and rewarding one. Now, moving from writing HTML and jQuery, to using Angular – and in particular directives – feels like a similarly significant transition.

I realize I’m a little late to the party here. Angular’s initial release was back in 2009, however it has never been part of a code base I have worked on commercially since that time, and only recently have I decided to focus my attention more on client-side technologies. Still, better late than never, and I feel fortunate to be learning Angular at a time when there is a wealth of resources available online, and a huge Angular community offering support.

A quick disclaimer – there are many other JavaScript frameworks out there offering similar features to Angular. These include Backbone, Ember and Knockout. Although I spent a little time learning Knockout, I have not looked into any of them in depth so am not really in a position to compare Angular to its competitors. What I can say is that I’ve spent a few weeks with Angular, and I’m a big fan, although I’m sure the other frameworks mentioned are pretty great too.

So what is so good about Angular?

Essentially, it encourages and helps you to adhere to good programming principles and practices: separation of concerns, the single responsibility principle, loose coupling, high cohesion, dependency injection, unit testing, the list goes on.

If you are a web developer working with JavaScript and HTML, and you are yet to try working with Angular or any similar framework, then I would recommend that you give it a try.

Below are five tips I would share with anyone about to embark on the Angular journey.

1. Be Prepared to Change the Way You Think

You are probably used to thinking of client-side development in terms of laying out DOM elements, then selecting and manipulating them using jQuery. This all changes with Angular. You will start thinking about how you can use directives to describe behaviour right there on your HTML pages. This means that other programmers can know something about how your page behaves without even looking at your JavaScript code. This will become more clear as you learn more about directives, which I see as Angular’s most beautiful feature.

2. Try to Avoid Mixing Angular with jQuery When Starting Out

I came across this tip on a stackoverflow discussion when I started looking into Angular, and it turned out to be great advice. If you’re coming from a jQuery background, you may be tempted to write some jQuery whenever you want to manipulate the DOM. In each case, you are almost certainly better off manipulating the DOM using directives.

For example, one of the most common JavaScript requirements is to show or hide an HTML element. This is often triggered by clicking a button, so you might have some jQuery similar to this:

("#myButton").click(function(){

$("#myDiv").show();

});

…which goes with some HTML like this:

<input type="button" id="myButton" />
<div id="myDiv">
(Shopping Basket)
</div>

There are actually a few problems with this approach. One of them is that when you look at the HTML page, there is no indication of how these elements interact with each other. To know that, you have to examine the JavaScript associated with the page (which is probably in a separate file), and link it back to the HTML. Not impossible, but far from ideal.

In Angular, you can achieve the same results with directives. So you end up with HTML decorated with attributes, looking something like this:

<input type='button' id='myButton' ng-click='showBasket=true' />
<div id="myDiv" ng-show="showBasket">
(Shopping Basket)
</div>

Now you are specifying how your button click manipulates your model, and how the visibility of your div depends upon the state of your model. In addition to being able to see the behaviour of your elements just by looking at your HTML page, you are also simplifying your code and introducing reusability into the equation. All you have to do now whenever you want to show the basket is to set the showBasket variable to true. No jQuery is required. ng-click and ng-show are examples of Angular’s built-in directives. For more complex examples, you will need to create your own custom directives.

3. Imagine Creating Your Own Version of HTML

The example above uses Angular directives to produce a kind of improved HTML which has been purpose built for your application. In this ‘new version’ of HTML, you can use attributes to describe the behaviour of your page. An even more powerful type of directive in Angular is the element directive, where you can actually create your own type of element, and specify how it behaves. So you could have something like this:

<input type="button" id="myButton" ng-click="showBasket = true" />
<shoppingBasket></shoppingBasket>

This is a powerful feature, and to fully take advantage of it you need to imagine creating your own version of HTML, specific to the needs of your application. What elements and attributes would it be nice to have in order to simplify the creation of your pages? Once you have answered that question, you are closer to having a structure for your application. You can create custom directives which will allow you to build more intuitive and readable HTML. In addition to creating more readable code, directives are a great way to add reusability. Again, think – what elements would it be nice to have here?

4. Think About Separation

One of your first tasks when learning Angular (and probably any programming language or framework) should be to understand its basic building blocks. These include models, controllers, services, directives and filters. The Angular website is a great source of information for this. Having understood these concepts, it is important to know where to put your JavaScript code. For example, code which manipulates the DOM should go in a directive, and controllers should make use of services and manipulate the model upon which the view depends. If you have experience with the MVC pattern, this will help. Learning to separate your code into cohesive modules is also important.

5. Write Unit Tests

A key benefit of using Angular is how it improves the testability of your JavaScript. With jQuery, it is more difficult to write unit tests. For example, in our example snippet:

("#myButton").click(function(){

$("#myDiv").show();

});

…we have the problem of the code’s dependency upon HTML elements to overcome. With Angular, the only place we directly manipulate the DOM is in our directives, and because of the way Angular uses dependency injection, it is relatively easy to mock the directive’s dependencies to allow us to simulate manipulating the DOM.

Jasmine is a great unit testing framework to be used with Angular, but I will save further discussion of Jasmine for a future post.

The post 5 Tips for Getting Started With Angular appeared first on The Proactive Programmer.