Question

我开发了Angular项目，因为我使用$ routeProvider作为路由目的

function config($routeProvider, $locationProvider) {
    $routeProvider
        .when('/', {
            controller: 'HomeController',
            templateUrl: 'home/home.view.html',
            controllerAs: 'vm'
        })

        .when('/login', {
            controller: 'LoginController',
            templateUrl: 'login/login.view.html',
            controllerAs: 'vm'
        })

        .otherwise({ redirectTo: '/login' });
}

现在问题是我有一个单独的布局文件，其中包含项目的页眉和页脚，并且应该包含在每个控制器操作默认值中。我完成了$ stateProvider。

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

$urlRouterProvider.otherwise('/home');  

$stateProvider       

    // multiviews
    .state('about', {
        url: '/about',

    data: {
    requireLogin: true  
  },
        views: {

            // the main template will be placed here (relatively named)
            '': { templateUrl: 'about.html' },

            //  the child views (absolutely named)

            // for column #1, defines a separate controller 
            'column1@about': { 
                templateUrl: 'column1.html',
                controller: 'column1Controller'
            },

            // the child views (absolutely named)
            'column2@about': { template: 'column #2!' },

            // for bottom row, defines a separate controller shares with column #1 
            'bottom-row@about': { 
                templateUrl: 'bottom.html',
                controller: 'column1Controller'
            }
        }      
    });});

但是在我的项目中我使用了$ routeProvider 你能指导我如何使用$ routeProvider制作标题和侧边栏的默认布局吗？

Answer 1

您可以使用https://jira.spring.io/browse/SPR-14327包含声明了ng-view的主html的所有必要部分。

主html的示例部分看起来像

<header ng-include="'path/to/header.html'"> </header>
<div class="main-body" ng-view></div>
<footer ng-include="'path/to/footer.html'"> </footer>

希望这有帮助。

Answer 2

我没有正确地得到你的要求......我想，

您已在主布局中包含页眉和页脚，并且您需要单独的页眉和页脚控制器。

但是使用$ rootProvider是不可能的。

我的解决方案是，

您可以在角度模块run中添加页眉和页脚操作（我认为它可以全局访问），如下所示，

myApp.run(function($rootScope) {
        $rootScope.globalFoo = function() {
            alert("I'm global foo!");
        };
    });

Refer this link for more details

使用$ routeProvider管理多个视图

2 个答案: