5

I'm trying to have AngularJS' UI-Router pick up on the defined states (i.e. "project") and if none match, default to the "root" state. The "root" state should check with a remote API (Firebase) and based on the result load the appropriate view.

The example below doesn't accomplish either of those requirements:

1) "http://website.com/project" is matched to the "root" state, and not (the previously defined) "project" state.

2) "fbutil" is not defined in the "templateUrl" function, and cannot be injected.

Please help me resolve these issues.

angular.module('app')

.config(['$stateProvider', '$urlRouterProvider',
 function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('project', {
            url: '/project',
            views: {
                'mainView': {
                    controller: 'ProjectCtrl as project',
                    templateUrl: '/views/project.html'
                }

            }
        })
        .state('root', {
            url: '/:id',
            views: {
                'mainView': {
                    templateUrl: function($stateParams, fbutil) {
                        var ref = fbutil.ref('user_data', id);
                        ref.once('value', function(dataSnapshot) {
                            return '/views/' + dataSnapshot.$val() +'.html';
                        }, function(error) {
                            return '/views/root.html';
                        });
                    }
                }
            }
        })
 }
]);
Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
Nikolay Gorb
  • 63
  • 1
  • 5

1 Answers1

4

We cannot use templateUrl here - as stated in the doc:

templateUrl (optional)

If templateUrl is a function, it will be called with the following parameters:

{array.} - state parameters extracted from the current $location.path() by applying the current state

The parameters coming to templateUrl are fixed.

So, we have to use templateProvider

templateProvider (optional)

function

Provider function that returns HTML content string.

templateProvider:
  function(MyTemplateService, params) {
    return MyTemplateService.getTemplate(params.pageId);
  }

Check:

Community
  • 1
  • 1
Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
  • Thank you a lot! Do you know what I can do with ""http://website.com/project" is matched to the "root" state, and not (the previously defined) "project" state." – Nikolay Gorb Nov 21 '15 at 18:59
  • In case that it helped you, great. you can even accept the answer... enjoy UI-Router – Radim Köhler Nov 21 '15 at 19:06