Angular: Disable the back button/Warn before leaving App

Been a while, I've been busy rolling out our latest project and work has to come first.

I have a single page app in Angular that has 14 different tabs. (3 main tab groups and then subgroups under them. I'm not insane.) While doing user testing,  I noticed that one of our users was under the distinct impression that hitting the "back" button would take him to the previous tab. He did this repeatedly, losing his input each and every time.

At some point we will add some routing to handle these cases. However, that's a good amount to put into this program and we are in "live beta" right now.

A simple solution:

window.onbeforeunload = function (e) {

  return 'You are reloading or leaving this App. Any unsaved data will be lost.';

};

Show/Hide div directives.

Here's a fun one...

We all have need for show/hide divs every now and again, right? Why not let Angular do the heavy lifting?

If you haven't played with directives yet, you should start learning. They're powerful!



Here's the fiddle. This directive looks for and divs with a 'class="showhide"' and then makes them collapsible divs. (Click on "result" above to see how they work.)

Within each "showhide" div, we create a"less" div, a "more" div, and a "show" div. Less is the text that will show when the div is collapsed, More shows when it's open, and the Show div has the link to turn them on and off.

I think that the code is pretty self-explanatory, but if you have any questions, hit us up in the comments.

Custom Angular Filters

The current filter docs are a bit confusing. Let's break down how simple it is to add an Angular filter!

The currency filter does not allow you to choose how many decimals are involved. So let's create a custom filter that does currency in whole dollars.

var app = angular.module('app', ['dollarFilter']);
angular.module('dollarFilter', []).filter('dollars', function() {
 return function(value) {return "$" + addCommas(Math.round(value));}
});

You can now call this filter like so:

{{total | dollars}}

So, let's breakdown the code so we know exactly what we need to do.

We are creating an angular module.

angular.module('dollarFilter', []

We name the module 'dollarFilter'. The array brackets would be where you would list any dependent modules. So let's look at the controller init:

var app = angular.module('app', ['dollarFilter']);

dollarFilter is now a required module for our controller and will be loaded on start up.

Note that dollarFilter is the name of the module itself, NOT the name of our filter! This name is only used for the injector. Modules can contain multiple filters, coding, etc...

.filter('dollars', function() {

Here is where we actually name our filter. In this case, "dollars". That is the name we use when we want to call the filter.

Now we write the function. In the case of a filter, it will take one argument representing the value passed to our filter.

return function(value) {return "$" + addCommas(Math.round(value));}

I've set up a basic Fiddle for you to play with and see how the code works. (You can also get the "addCommas" function from here.)

What if we want to add multiple filters to one module?

Declare our filter, and store the object in a variable.

var df = angular.module('dollarFilter', []);

Add filters to the object:

df.filter('dollars', function() {
    return function(value) {return "$" + addCommas(Math.round(value));}
});
df.filter('percentage', function () {
    return function(value) {return value * 100 + "%";}
});

And here's another fiddle for you to see how it comes together.


Hope this helps. If there's a question we didn't answer, let me know in the comments.

Passing your PHP variables to Angular

New to angular from other JS frameworks and can't figure out how to pass PHP variables to Angular? I hit this when I first started, and Google was of no help.

In General, you want to use AJAX calls to get values from your database to your angular app. But what about user authentication?

<?php
session_start();
if (empty($_SESSION['uname'])){
    header("location:auth/login.php");
}
?>

That's a pretty common piece of code. So, how do you pass the username to your Angular app?

Use ng-init when you set up your controller in the HTML. Use PHP to echo variables to the page.

<div class="container-fluid" ng-controller="appCtrl" 
ng-init="userInit('<?php echo $_SESSION['uname']."', '".$_SESSION['role'] ?>')" >

Now, create a userInit function in your angular controller that will handle the variables:

$scope.userInit = function(uid, role) {
 $scope.user = uid;
 $scope.role = role;
 // Get a list of projects for user
 $scope.projectList($scope.user);
}

And it's that simple!