1

I'm using ui-roter. I have two groups of pages. Group A and Group B. In each group the header and footer are repeated but the content changes. How can I do not to repeat the header and footer in each group ?. Is there a way to make the code simpler? Try a variable but it did not work for me.

My index.html

<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>

Group A

$stateProvider
        .state('inicio', {
            url: '/inicio',
            views: {
                'header': {templateUrl: 'views/header.html'},
                'content': {templateUrl: 'views/inicio.html'},
                'footer': {templateUrl: 'views/footer.html'}
            }
        });

    $stateProvider
        .state('seguroPersonas', {
            url: '/seguroPersonas',
            views: {
                'header': {templateUrl: 'views/header.html'},
                'content': {templateUrl: 'views/seguroPersonas.html'},
                'footer': {templateUrl: 'views/footer.html'}
            }
        });

    $stateProvider
        .state('seguroEmpresas', {
            url: '/seguroEmpresas',
            views: {
                'header': {templateUrl: 'views/header.html'},
                'content': {templateUrl: 'views/seguroEmpresas.html'},
                'footer': {templateUrl: 'views/footer.html'}
            }
        });

Group B

$stateProvider
        .state('dashboard', {
            url: '/dashboard',
            views: {
                'header': {templateUrl: 'views/dashboard/headerDashboard.html'},
                'content': {templateUrl: 'views/dashboard/inicioDashboard.html'},
                'footer': {templateUrl: 'views/dashboard/footerDashboard.html'}
            }
        });

    $stateProvider
        .state('clientesPotenciales', {
            url: '/dashboard/clientesPotenciales',
            views: {
                'header': {templateUrl: 'views/dashboard/headerDashboard.html'},
                'content': {templateUrl: 'views/dashboard/clientesPotenciales.html'},
                'footer': {templateUrl: 'views/dashboard/footerDashboard.html'}
            }
        });

    $stateProvider
        .state('seguroEmpresas', {
            url: '/seguroEmpresas',
            views: {
                'header': {templateUrl: 'views/dashboard/headerDashboard.html'},
                'content': {templateUrl: 'views/dashboard/actualizacionDatos.html'},
                'footer': {templateUrl: 'views/dashboard/footerDashboard.html'}
            }
        });

Improve this question

2 Answers 2

Reset to default
1

Your page has two high-level states: A and B. It's a good idea for Your state configuration to reflect that. Secondly, ui-router doesn't have to be aware of all content that is static (as in, it doesn't change within a state).

You are looking for a structure like this:

index.html

<ui-view></ui-view>

a.html

<header-a></header-a>
<ui-view></ui-view>
<footer-a></footer-a>

Same goes for b.html

The file with state configuration will then look something like this:

var aState = {
  url: '/a',
  templateUrl: 'path/to/a.html'
}

var inicioState = {
  url: '/a/inicio',
  templateUrl: 'views/inicio.html'
}

...

var bState = {
  url: '/b'
  templateUrl: 'path/to/b.html'
}

...

$stateProvider
      .state('a', aState)
      .state('a.inicio', inicioState)
      .state('b', bState)
...

The idea is, that You have a top-level state, which changes between Your two groups, A and B. Within them, You will have a static header and footer (provided e.g. as an angular directive) and a dynamic content in between them provided through a nested state. Now that You have a single <ui-view> tag in a html file, there is no need for implicitly-named views. Also, $stateProvider can chain the state() calls, this way You can lose some boilerplate.

Also, a proper practice for url naming is to follow the hierarchy of Your states. For example, Your state clientesPotenciales has an url '/dashboard/clientesPotenciales' which would indicate that it is a nested state of dashboard. In reality they remain on the same level. You should either change the url to '/clientesPotenciales', if it's not nested, or change the state name to dashboard.clientesPotenciales.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

sorry for the ignorance, I have to create the folder path/to? path/to/a.html
The path/to indicates whatever path Your new files containing the templates for Groups A/B will have. So, if You put the new file a.html in catalog views the path will be: views/a.html.
Ok I'm clear on the pata/to. I've tried but it does not work. will have something to do 'a.inicio' where does this come from? should I name them beforehand?
a.inicio is just a name for one of your states. This indicates that inicio is a nested state of a. You already provide the name and configuration through $stateProvider in the state() function. Keep in mind that my answer is not a full copy-paste solution. You need to complete the file with states' configuration and provide necessary templates (for a.thml, b.html)
Thank you. If I understand that it is only an example. I continued testing and worked but modifying the path '/a/inicio' for '/inicio'. I do not know if it's the right thing to do but it's the only way it worked.
|
1

You can use the resource of AngularJS named components, it was released on 1.5 version and is a special kind of directive, a shorthand for a html element. With this, you can reuse your footer and header.

Official documentation: https://docs.angularjs.org/guide/component

Example:

(function () {
    'use strict';

    angular.module('yourApp')
        .component('headerCard', {
            templateUrl: 'your-path/header-card.html',
            controller: headerCardCtrl,
            controllerAs: 'vm',
            bindings: {
            }
        });

    function headerCardCtrl() {
        var vm = this;

        // Your logic

    }

})();

At your controller template, you just use like this:

<header-card></header-card>
Improve this answer

1 Comment

Thanks, I'll see the documentation, I'm still not familiar with this.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.