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.
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.
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
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.
…which goes with some HTML like this:
<input type="button" id="myButton" />
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">
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-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" />
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
5. Write Unit Tests
…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.