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:

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

you should write this:

1
&lt; a ng-href = "<a href="https://www.someurl.com/">https://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:

1
2
3
&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:

1
2
3
4
5
6
7
8
9
10
$scope.back = function ($event, ConfirmBackText) {
   $event.preventDefault();
   if ($scope.mainform.$dirty) {
     if (confirm(ConfirmBackText)) {
       window.history.back();
     }
   } else {
     window.history.back();
   }
};

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:

[/crayon]
 

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

[/crayon]
 

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
$locationProvider.html5Mode(true);
 
refs:
Sam Deering

Sam Deering

Sam is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and sharing what he learns with others.

One thought on “5 Quick Angular JS Tips and Tricks

Leave a Reply

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