5 Quick Angular JS Tips and Tricks

5 Quick Angular JS Tips and Tricks
 A collection of 10 of the best Angular JS Tips and Tricks. Quick fire and to the point.

Remember to use ng-href instead of href
If you want to use AngularJS markup inside your links, you have to use ng-href instead of href. The reason is that it takes time for AngularJS to parse all HTML, and this means that if the user is quick he/she can click the link before it is actually parsed. This would result in a 404-page.

So, instead of writing this:

&lt; a href = "<a href="http://www.someurl.com/">http://www.someurl.com/</a>{{hash}}" /&gt;

you should write this:

&lt; a ng-href = "<a href="http://www.someurl.com/">http://www.someurl.com/</a>{{hash}}" /&gt;

Remember to use ng-src instead of src
This is similar to using ng-href instead of href. Whenever you insert images and want to use Angular-markup, you have to use ng-src. Just like this:

&lt; ul id = "preview" ng-repeat = "image in images" &gt;
     &lt; li &gt;&lt; img ng-src = "{{image}}" /&gt;&lt;/ li &gt;
&lt;/ ul &gt;

Does a form contain new data?
I needed to implement a functionality that would warn the user about changed data in a form when the user tried to navigate away from the form. Luckily, in AngularJS this is very easy. You just use the $dirty variable. Just like so:

$scope.back = function ($event, ConfirmBackText) {
   if ($scope.mainform.$dirty) {
     if (confirm(ConfirmBackText)) {
   } else {

Notice, that I check whether or not $scope.mainform.$dirty is true or false. If it is true, I pop the confirm dialogue.

Watching two variables are once

AngularJS allows you to watch a variable and will call a callback whenever its content is modified. But what if you need to watch two variables at once? You can write this:


But you can also write this, which is more elegant:


The value of “a + b” will change whenever either a or b changes. Therefore you watch both variable at once.

Syntax of directives

The tutorial of AngularJS writes directives like this: “ng-model”. But you can also write: “x-ng-model”, “ng:model”, “ng_model”, “data-ng-model”. They are all equivalent and work the same. I like to use the syntax with “data-” because it is standard-compliant.

Nuances of ngDisabled

There is actually an  ngDisabled attribute that you can leverage for dynamically changing the disabled state of a form control. However, there may still be some confusion as to the different states and values that represent disabled or enabled, so to help clarify I made this simple demo:

Some Root Scope Helper Functions
Of course, global state sucks and you should use  $rootScope sparingly, like you would (hopefully) use with global variables in any language. In particular, don’t use it for code, only data. If you’re tempted to put a function on $rootScope, it’s almost always better to put it in a service that can be injected where it’s needed, and more easily tested.

$watch and  $apply

Angular’s two-way data binding is the root of all awesome in Angular. However, it’s not magic, and there are some situations where you need to give it a nudge in the right direction.

When you bind a value to an element in Angular using  ng-modelng-repeat, etc., Angular creates a  $watch on that value. Then whenever a value on a scope changes, all  $watches observing that element are executed, and everything updates.

Sometimes, usually when you’re writing a custom directive, you will have to define your own  $watch on a scope value to make the directive react to changes.

On the flip side, sometimes you change a scope value in some code but the app doesn’t react to it. Angular checks for scope variable changes after pieces of your code have finished running; for example, when  ng-click calls a function on your scope, Angular will check for changes and react. However, some code is outside of Angular and you’ll have to call scope.$apply() yourself to trigger the update. This is most commonly seen in event handlers in custom directives.

HTML5 Mode for location provider
// configure html5 to get links working
// If you don’t do this, you URLs will be base.com/#/home rather than base.com/home
Sam is a passionate web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and reading.

One thought on “5 Quick Angular JS Tips and Tricks

Leave a Reply

Your email address will not be published. Required fields are marked *