javascript 如何使用 ui 路由器状态在 Angularjs 中编写常见的页眉和页脚

How to write common header & footer in Angularjs using ui router states

提问by Karthik

I am using ui router states. I have two different controllers it may be extend also in future. How to write default and common header & footer.

我正在使用 ui 路由器状态。我有两个不同的控制器，将来也可能会扩展。如何编写默认和通用的页眉和页脚。

var myApp = angular.module('myApp', ['ui.router']);

myApp.controller('MainCtrl', function($scope) {});

myApp.config(function($stateProvider, $urlRouterProvider) {

    // default route
    $urlRouterProvider.otherwise("/first");

    // ui router states
    $stateProvider
        .state('first', {
            url: "/first",
            views: {
                header: {
                    template: '<h1>First header</h1>',
                    controller: function($scope) {}
                },
                content: {
                    template: '<p>First content</>',
                    controller: function($scope) {}
                },
                footer: {
                    template: '<div>First footer</div>',
                    controller: function($scope) {}
                }
            }
        })
        .state('second', {
            url: "/second",
            views: {
                header: {
                    template: '<h1>Second header</h1>',
                    controller: function($scope) {}
                },
                content: {
                    template: '<p>Second content</>',
                    controller: function($scope) {}
                },
                footer: {
                    template: '<div>Second footer</div>',
                    controller: function($scope) {}
                }
            }
        });

});

Jsfiddle : http://jsfiddle.net/karthikreddy/b7cnszdf/

jsfiddle：http: //jsfiddle.net/karthikreddy/b7cnszdf/

采纳答案by sylwester

Please see this demo : http://jsfiddle.net/tkf954a5/

请看这个演示：http: //jsfiddle.net/tkf954a5/

You can define your footer and header like :

您可以像这样定义页脚和页眉：

  var header = {
       template: '<h1>Im Header</h1>',
       controller: function($scope) {}

  }

and after that use it in your states :

然后在您的州使用它：

 .state('first', {
            url: "/first",
            views: {
                header: header,
                content: {
                    template: '<p>First content</>',
                    controller: function($scope) {}
                },
                footer: footer
            }
        })

回答by JasperZelf

I'd advise you to put your view (html) and controller code in separate files to make things more readable.

我建议您将视图 (html) 和控制器代码放在单独的文件中，以提高可读性。

Ui-router allows you to create nested states. With that you can create a base state which has your header and footer, and than add all yout states as nested states.

Ui-router 允许您创建嵌套状态。有了它，您可以创建一个包含页眉和页脚的基本状态，然后将所有您的状态添加为嵌套状态。

See: https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Viewsfor more info.

请参阅：https: //github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views了解更多信息。

It would look something like this:

它看起来像这样：

.state('base',{
    url: '',
    views: {
        'header': {
             controller: 'HeaderCtrl',
             templateUrl: 'views/header.html'
        },
        'main': {
            template: '<ui-view/>'
        },
        'footer': {
            controller: 'FooterCtrl',
            templateUrl: 'views/footer.html'
        }
    }
})

.state('base.first', {
    url: '/first',
    controller: 'FirstCtrl',
    templateUrl: 'first.html'
})

.state('base.first', {
    url: '/second',
    controller: 'SecondCtrl',
    templateUrl: 'second.html'
})

EDIT

编辑

If you don't want to use nested states, you could just put your views and controllers in separate files and include them on each route you make. Instead of having the whole code there, it would be just one string.

如果您不想使用嵌套状态，您可以将视图和控制器放在单独的文件中，并将它们包含在您制作的每条路线中。不是将整个代码放在那里，而是只有一个字符串。