10 Tips for Using AngularJS

There are a lot of powerful frameworks out there, but if you don’t know best practice, they can be pretty confusing. In this post we’ll be looking at Angular JS. First of all, what actually is Angular JS?

Angular JS is a JavaScript-based open source web application framework used to develop rich HTML Web applications in a modular fashion and using MVVM framework (try and say that quickly). As it implements an MVVM framework, it helps you develop applications with less code and more flexibility. Since Angular JS is completely client side, it also helps you to create mobile or tablet apps easily. For example, YouTube applications on the PS3 are built using Angular JS.

There are many features available with Angular JS, below are just a few standouts:

1. Data-binding – Angular JS provides the directives in order to bind your HTML (view) with your JavaScript functions (controller).
2. Form Validation – Angular JS provides form validations which are a basic requirement for any application that accepts input.
3. Dependency Injection – AngularJS has a built-in dependency injection subsystem that helps developers by making the application easier to develop, understand, and test.
4. Templating – Angular JS provides a way to create your own HTML templates which can be multiple partial views or even a single page
5. Routing – Like MVC, Angular JS also provides the routing feature to switch between views.

 

A history lesson...

Angular JS made its debut in 2009 and was developed as an attempt to replace the Google Web Toolkit. The previous code name of Angular JS was ‘Locality-Filtration’. Misko Hevery and Igor Minar of Google were the founding members of the Angular JS in-house development team. After its success, Angular JS was officially supported by Google and made into an open source framework. The 1.0 version of Angular JS was released in 2012 and version 1.5.5 is the current stable release of Angular JS (also known by its code name ‘Ice-Manipulation’).

There are many JavaScript based frameworks available to create Rich Client side applications using an MVC pattern. However, each of them has its own special way of harnessing JavaScript’s power. In the rest of this post, we’ll look at the best ways of harnessing that power with Angular JS.

Harness your powers (like Spiderman)

If you’ve decided to use it for your application, below are some of the best practices for Angular JS:

 1. Initialization & Expressions – When you develop any web application, always load your JavaScript code at the bottom of your HTML so that the loading of the HTML is not hampered in order to load your JavaScript files. Also, split your complex logic into methods in the controller which can be rendered in specific views. Each controller should only contain logic for that particular business view.

 2. Modularize your Angular Code – When we start writing applications we tend to include everything in the main module. This is fine for a small app, but when it comes to managing the code for a more complex tool - which tends to get big over time - it’s a huge pain. So, always split your code into proper modules. Divide your application features into modules and accordingly create their Angular Modules. This way you can reuse the modules in another page or view.

 3. Avoid DOM manipulations – Most of the DOM manipulations will be available as an out-of-the-box feature of Angular JS, so use those features wherever possible. The reason for this is that Angular JS has a mechanism that ensures all its various pieces are in sync. Now, if you manipulate DOM, Angular JS triggers the events automatically to make the application state consistent which increases the unnecessary overhead on the application. If you still have to do DOM manipulations, always aim to do your manipulations inside a $scope.$apply(callback) function.

 4. Keep Business Logic in Models – Always keep your business logic in models so that it can be easily shared between the controllers and other services. This way we can easily perform unit testing on the models. The model is for application logic which is specific to your application and how it wants to interact. Controllers should only direct your code to a method or service that updates your model and in your model create helper classes to implement that business logic.

 5. Validations in Angular JS – Angular JS provides the wonderful feature of validating your form. This is the backbone of any application that accepts user inputs. Most often, forms validation is written in separate parts as: ‘if, else if..’ which is a very bad practice. In this approach, the user has to submit the form so many times to see one validation error after the other.

Angular JS, by contrast, provides a way of validating the form as the user is filling it out. And of course, almost all validations are provided by Angular JS directives as out-of-the-box and are easy to use.

 6. Utilize the Angular JS unit testing – Unlike other frameworks, Angular JS provides a great framework to unit test your models. Most of the time, developers do manual testing to see if their code is functional or not. Sometimes, to test a minor change, manual testing takes more time compared to developing a unit test. The Angular JS core team developed a couple of tools - Protractor and Karma – to do the unit testing of your Angular JS code for you. Thanks guys!

 7. Invest in Naming Conventions – The most important thing when developing any application should be to set up consistent naming conventions so that your code is easily readable and manageable. Any developer should be able to read your code and maintain it in your absence.

 8. Define your components – Do not include your model, controller and factory components in a single file. Create three separate files for each and accordingly write your code in each of them. Something like this myapp.module.js, myapp.controller.js, myappfactory.js and so on.

 9. Scopes – This is one of the most important features which every developer should take care of. The scope should always be write-only in controllers and read only in templates. Do not create properties in the scope – use the object.

Now with full support for Angular 2 Beta, see what's new in Infragistics Ignite UI 16.1!