Marc Rasmussen Marc Rasmussen - 2 months ago 13
Javascript Question

Angularjs routing template is not displayed

I have the following

app.js
file:

'use strict';

var app = angular.module('app', [
'auth0',
'angular-storage',
'angular-jwt',
'ui.router',
'Environment',
'Api',
'Profile'

]);


app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'js/modules/App/views/frontpage.html'
})
.state('login', {
url: '/login',
templateUrl: 'js/modules/User/views/login.html',
controller: 'LoginCtrl'
});

$urlRouterProvider
.otherwise('/main');
}]);


app.config(['authProvider', '$httpProvider', '$locationProvider', 'jwtInterceptorProvider',
function myAppConfig(authProvider, $httpProvider, $locationProvider, jwtInterceptorProvider) {
authProvider.init({
domain: 'marcrasmussen.eu.auth0.com',
clientID: 'hphpe4JiceMW8FSA02CN7yOYl5fUaULe',
loginUrl: '/login'
});

authProvider.on('loginSuccess', ['$location', 'profilePromise', 'idToken', 'store',
function ($location, profilePromise, idToken, store) {

console.log("Login Success");
profilePromise.then(function (profile) {
store.set('profile', profile);
store.set('token', idToken);
});

$location.path('/');
}]);

//Called when login fails
authProvider.on('loginFailure', function () {
alert("Error");
});

//Angular HTTP Interceptor function
jwtInterceptorProvider.tokenGetter = ['store', function (store) {
return store.get('token');
}];
//Push interceptor function to $httpProvider's interceptors
$httpProvider.interceptors.push('jwtInterceptor');

}]);

app.run(['auth', function (auth) {
// This hooks all auth events to check everything as soon as the app starts
auth.hookEvents();
}]);


And i have the following
profile.js
file:

angular.module('Profile', [])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('profile', {
abstract: true,
url: '/profile'
})
.state('profile.index', {
url: '/index',
templateUrl: 'js/modules/Profile/views/viewProfile.html'
})
}]);


in my
index.html
the files are listed as such:

<script src="js/modules/Profile/lib/profile.js"></script>
<script src="js/modules/App/lib/app.js"></script>
<script src="js/modules/App/directives/login/login.js"></script>


And lastly ofcourse i have my view port:

<div class="main" ui-view>

</div>


As you can tell my application starts on the route
/main
this works perfectly fine and
frontpage.html
is being rendered with all the
html
inside that file.

However when i go to
profile.index
or
/profile/index
no error is displayed in the console and no html within the template file
js/modules/Profile/views/viewProfile.html
is displayed.

Can anyone tell me why this is happening? what am i doing wrong?

Answer

I think the issue may be your abstract state. You are not defining a template or templateUrl for this state. Also note that the template for your abstract state template must include a ui-view directive in order for its children to populate.

https://github.com/angular-ui/ui-router/wiki/nested-states-%26-nested-views#abstract-state-usage-examples

You may need to do something along the lines of:

    .state('profile', {
        abstract: true,
        url: '/profile',
        template: '<ui-view />
    })
Comments