admin管理员组

文章数量:1332881

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

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 : /

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

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/karthikreddy/b7cnszdf/

• javascript
• jquery
• html
• css
• angularjs

Share Improve this question Follow asked Oct 7, 2015 at 10:50 KarthikKarthik 1,48833 gold badges1717 silver badges2929 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Please see this demo : http://jsfiddle/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
            }
        })

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

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.

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

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.

本文标签： javascriptHow to write common header amp footer in Angularjs using ui router statesStack Overflow