Angular UI Router controllers instantiated multiple times - Direct route

Question

I have a parent / child route set up, and everything works great when I change the state in code using state.go(). The problem arises when I try to go directly to the child route using only a URL. When I do this, the controllers get initialized multiple times.

Here is my app.js

    $stateProvider
    .state('home', {
        url: "/",
        templateUrl: "Views/home.html",
        controller: 'HomeController',
        controllerAs: 'vm'
    })
    .state('ticketsMaster', {
        abstract: true,
        templateUrl: "Views/tickets-master.html",
        url: "^/performances?featureCode&theatreId",
        controller: 'TicketsMasterController',
        controllerAs: 'vm'
    })
    .state('ticketsMaster.performances', {
        url: "^/performances?featureCode&theatreId",
        templateUrl: "Views/performances.html",
        controller: 'PerformancesController',
        controllerAs: 'vm'
    })
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });

home.html is my master page where I have my ui-view

I also have another ui-view on my tickets-master.html where this loads my child views (performances).

When going directly to /performances?featureCode=1111&theatreId=1 it loads my TicketsMasterController, and Performances controller 2 or 3 times.

Any help would be appreciated.

what's the point of routing them to "^/performances?featureCode&theatreId", in two different states? — Yeysides
that was a genuine question, do you have to declare a url in every state to load a template? — Yeysides
That is a good question - I only put it there because I can only get it off of the ticketsMaster state. If I put it only on the ticketsMaster.performances state, I am not able to see them at all. I get rid of the url completely on the master one, and I still have the same problem. — aoakeson

aoakeson aoakeson · Accepted Answer · 2015-10-26T23:52:33

I found the answer here:

https://github.com/angular-ui/ui-router/issues/372

add this line to app.config:

$locationProvider.html5Mode(true).hashPrefix('!')

and include this line in the head of index.html:

<base href="/">

Angular UI Router controllers instantiated multiple times - Direct route

1 Answers