default child inside father in $stateprovider with typescript

Question

I have an html page father with:

<div id="..." class="container">
   <pp-nav></pp-nav>
   <div ui-view></div>
</div>

This is my controller with a father and two child:

export function routerConfig($stateProvider: angular.ui.IStateProvider, $urlRouterProvider: angular.ui.IUrlRouterProvider) {
$stateProvider
.state('gestionePeP', {
  url: '/gestionePeP',
  templateUrl: '.../gestionePeP/gestionePeP.html'
})
.state('gestionePeP.puntiAttivazione', {
  url: '/puntiAttivazione',
  templateUrl: '.../gestionePeP/puntiAttivazione.html'
})
.state('gestionePeP.gestioneContenuti', {
  url: '/gestioneContenuti',
  templateUrl: '.../gestionePeP/gestioneContenuti.html'
});

I want that when I go to the father page the stateprovider opens the father html page with the first child inside it. How can I do it?

If I put a link inside a button in the father with

ui-sref="gestionePeP.puntiAttivazione"

it opens the right page. But I want the same behaviour without any click. I tried $state.go('gestionePeP.puntiAttivazione') but it goes in loop. How can I solve?

score 1 · Accepted Answer · edited May 23 '17 at 10:27

1

Still far the best way I found is here:

Redirect a state to default substate with UI-Router in AngularJS

just add these lines to some .run()

app.run(['$rootScope', '$state', function($rootScope, $state) {

    $rootScope.$on('$stateChangeStart', function(evt, to, params) {
      if (to.redirectTo) {
        evt.preventDefault();
        $state.go(to.redirectTo, params)
      }
    });
}]);

And extend state def with default redirectTo:

.state('gestionePeP', {
  url: '/gestionePeP',
  templateUrl: '.../gestionePeP/gestionePeP.html',
  // this will set redirect target
  redirectTo: 'gestionePeP.puntiAttivazione',
})

Check that link to se working plunker

EXTEND - how to make ng.ui.IState aware of the new property redirectTo?

Just add these lines to your code:

declare module angular.ui { export interface IState { redirectTo?: string; } }

edited May 23 '17 at 10:27

Community

1
1

answered Nov 17 '15 at 17:46

Radim Köhler

122,561
47
239
335

redirectTo doesn't exist in type IState. – Ciro Nov 18 '15 at 09:44
Not so difficult to make it part of `IState`, right? ;) Extended answer should show how to ;) – Radim Köhler Nov 18 '15 at 10:13
I don't know where to add the app.run function – Ciro Nov 18 '15 at 11:10
Have you observed my plunker? – Radim Köhler Nov 18 '15 at 11:11
Yes but I don't have an app.js file – Ciro Nov 18 '15 at 11:14
you can place it anywhere - as it is. Just, have an `app` variable or use angular.module("xxx")... the rest is working even with TS. And it could be placed in any file. once angular will load all the script, it will start to execute them in proper order. Firstly config, then run... I really do not see where is the issue. – Radim Köhler Nov 18 '15 at 11:16
Yes I found where to put the function and works! Thanks a lot! – Ciro Nov 18 '15 at 11:23
Great. Really! Enjoy mighty combination - angular, UI-Router and TypeScript ;) – Radim Köhler Nov 18 '15 at 11:23

default child inside father in $stateprovider with typescript

1 Answers1

Redirect a state to default substate with UI-Router in AngularJS

Linked