How do you tackle the following pitfalls in AngularJS

Question

I have been working on a "non trivial" angular JS application and I am somewhat disappointed on myself and this framework for not finding truly viable solutions, to the following problems.

1. AngularJS should have a mechanism that, before run-time, should be able to do HTTP requests in order to get data and set it to providers. This would be extremely useful in getting route permissions, user data, things you need before actually bootstrapping the app.

Right now, I seen articles describing how to load jQuery before angular, manually bootstrapping angular just after some jQuery's ajax calls -> and inject the received data into Angular.

2. There should be a middle-ware that can be used in order to verify roots. A hook where, before any root is displayed you can do a check, for example to see if the user is authenticated, a token is stored in session storage, etc.

Right now, I've seen attempts with using the ui-router and the $rootScope.$on('$stateChangeStart') event.

This "somewhat" works, but it's not elegant, not out of the box and if you don't fiddle with the settings, it triggers infinite loops.

3. Also, the ui-router uses resolves, which are great in getting resources before the view compiles. BUT, gues what, you can't get the "$state" from the resolve function. So, yo can't redirect to another view, if the data you requested isn't the on you wanted.

4. Angular makes it very complicated to load controllers and views for a state, depending on some data - ergo. user roles. It's not really the way to go, but in some cases, it would be useful to decide which controller to load for which route, directly from the router and not using templates in the view.

The reason behind this post, is to see how you guys tackle with these problems.

I hope you prove me wrong and there are much better ways to do the above, and with code examples, I'd be very interested to know about them.

Answer 1

It sounds like you want something like Angular UI's UI Router.

The main feature it seems like you want out of that is the resolve feature. This lets you set promise-based dependencies on your controllers. Thus making sure you have authentication settings, data, etc. resolved before going to your actual app.

Answer 2

Would this work?

this is manual bootstrap, make sure not to declare ng-app in HTML or BODY tags, which would automatically bootstrap.

Create two modules. First module initialized automatically, to load data you need, and finally bootstraps your second module, the true application.

var configuarationData = null;
var mainApplication = angular.module('myApp', [dependencies]);

/**
 * This function will start up the application and cause all views to be loaded
 */
mainApplication.config(['$routeProvider', '$locationProvider', '$httpProvider', 
    function($routeProvider, $locationProvider, $httpProvider) {

        // do some stuff here regarding configuration

    }
]).run(['$rootScope', '$templateCache', '$http', ,
    function($rootScope, $templateCache, $http) {
        /* We need this run method to make sure certain global services are loaded prior to other controllers/services */
    console.log('configurationData available?', configurationData);
});

var configApplication = angular.module('theConfigurator',[dependencies]);

configApplication.run(function('$http'){
     $http.get('load some data').then(function(success){
          // bootstrap the main application
          configurationData = success.data;
          angular.bootstrap(document, ['myApp']);
     }, function(reasonForFailure){
         console.log('no config data');
     });
});

Answer 3

See this question for a possible answer to your first question:

use $http inside custom provider in app config, angular.js

If you really need to make HTTP calls before the config phase has finished, then no, Angular cannot do this, because the config phase is executed synchronously, so your http call would be completed after the config has finished.

Could you instead make these configuration calls on the server side before your app loads and then pass them down in your initial page load?

<script>window.initialData = { ... };</script>

var initialData = angular.fromJson($window.initialData);

Else you are stuck using non-Angular http calls and manual bootstrapping of your app.