Routes - Angular 2

Asked

Viewed 180 times

1

I will use an example of an admin panel.

At angular 1 I had the $stateProvider.state() that inside it I could set up an internal name and the url that would be accessed, so I would have, for example:

.state('template', {
    url: '',
    abstract: true,
    views: {
        'main': {
            templateUrl: 'template/layout.html'
        }
    }
})
.state('template.Parceiro', {
    url: '/Parceiro',
    views: {
        'content': {
            templateUrl: MakeUrl('view/Parceiro/index.html'),
            controller: 'ParceiroController as vm'                        
        }
    }
})

So I have a default template that will be loaded inside the 'main' tag when I access #/Partner... First then I will load the 'template' path that you can have inside my menu, footer, etc and inside this 'template' I have a 'content' tag that will load the actual contents of my '/Partner' request'.

Why is that? For when I access the /Login that is:

.state('Login', {
    ​url: '/Login',
    ​views: {
        ​'main': {
            ​templateUrl: MakeUrl('view/Login/index.html'),
            ​controller: 'LoginController as vm',
        ​}
​    }
​})

It will load the login page into the 'main' tag that has only one form in place of all my previously loaded template, so it will not have any menu, footer, that is part of my admin panel layout. When I log in, it will redirect to /Partner who will load the template again instead of the 'main' tag and then the contents of the /Partner request in the 'content' tag'.

How do I do this same way, only with angular 2?

Thank you.

(Login screen) Tela de login

(Admin screen of partners) Tela de admin de parceiros

  • Looking for more on the Internet, I found https://ui-router.github.io/ng2/ What else in examples, it does the same thing it did at angular 1 (https://ui-router.github.io/ng2/tutorial/hellogalaxy#views)

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.