Question

我正在开展一个小项目，自从我与Angular合作以来已经有一段时间了。我正在尝试将所有模板/控制器分开，因此我没有一个巨大的文件，但我希望能够在一个页面上访问它们。我正在使用Angular UI路由器，并尝试将它们全部加载到同一路由上。它似乎不起作用。有谁知道如何在一条路线上加载所有东西，但仍然保持一切分开？目前它只加载我的路由文件（createCompanyController）中列出的第一个控制器/模板，而不是其他。

这是我的routes.js文件：

(function() {
    angular.module('myApp', ['ui.router'])
        .config(['$stateProvider', function($stateProvider) {

            var applicationStates = [{
                name: 'homepage',
                url: '/app',
                templateUrl: 'partials/CreateCompany/createCompany.html',
                controller: 'createCompanyController',
                controllerAs: 'createCompanyCtrl'
            },
                {
                    name: 'guestbook',
                    url: '/app',
                    templateUrl: 'partials/CreatePerson/createPerson.html',
                    controller: 'createPersonController',
                    controllerAs: 'createPersonCtrl'
                },
                {
                    name: 'states',
                    url: '/app',
                    templateUrl: 'partials/ListCompanies/listCompanies.html',
                    controller: 'listCompaniesController',
                    controllerAs: 'listCompaniesCtrl'
                }];

            applicationStates.forEach(function(state) {
                $stateProvider.state(state);
            });
        }])
})();

我正在使用的index.html文件：

<html ng-app='myApp'>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css'/>
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link href='app.less' type='text/css' rel='stylesheet/less'>
</head>
<body  class="container" ng-cloak>
<div class='row'>
    <div class='span12'>
        <div ui-view></div>
    </div>
</div>
</body>
</html>

（我的所有脚本标签都在那里，我只是从这篇文章中删除它们以腾出空间）。如果有人能帮助我，我会非常感激。

Answer 1

您可以使用Multiple Named Views

    $stateProvider.state('app', {
        url: '/app',
        views: {
            '': {
                templateUrl: 'home/home.html'
            },
            'homepage@app': {
                name: 'homepage',
                templateUrl: 'partials/CreateCompany/createCompany.html',
                controller: 'createCompanyController',
                controllerAs: 'createCompanyCtrl'
            },
            'guestbook@app': {
                 name: 'guestbook',
                 templateUrl:'partials/CreatePerson/createPerson.html',
                 controller: 'createPersonController',
                 controllerAs: 'createPersonCtrl'
            },
           'states@app': {
                 name: 'states',                
                 templateUrl:'partials/ListCompanies/listCompanies.html',
                 controller: 'listCompaniesController',
                 controllerAs: 'listCompaniesCtrl'
            }
        }

和index.html

    <html ng-app='myApp'>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
        <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css'/>
        <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
        <link href='app.less' type='text/css' rel='stylesheet/less'>
    </head>
    <body  class="container" ng-cloak>
    <div class='row'>
        <div class='span12'>
            <div ui-view="homepage"></div>
            <div ui-view="guestbook"></div>
            <div ui-view="guestbook"></div>
        </div>
    </div>
    </body>
    </html>

Answer 2

您的问题的答案是“角度组件”（从角1.5版开始提供）。

组件=＆gt;模板+控制器

包含所有模板的角度路线=＆gt;组件组合（在您的情况下，CreateCompany，CreatePerson和ListCompanies组件都在一个路径的模板中）

您需要做的就是：

创建组件（CreateCompany，CreatePerson和ListCompanies的控制器+模板）而不是路由。
创建单个路线“/ app”并定义此路线的模板，如下所示

HomePage.html

<div class='row'>
    <div class='span12'>
        <create-company></create-company>
        <create-person></create-person>
        <list-companies></list-companies>
    </div>
</div>

小提琴：https://jsfiddle.net/vuas3wbq/2/

Angular组件的参考链接： https://docs.angularjs.org/guide/component

在一条路线上加载多个模板/控制器

2 个答案: