ui-view AngularJs multiple views

问题

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'}
            }
        });

回答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.

回答2:

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>

来源：https://stackoverflow.com/questions/46124902/ui-view-angularjs-multiple-views

标签

angularjs