Javascript 在一条路由上加载多个模板/控制器_Javascript_Html_Angularjs_Angular Ui Router

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

javascript html angularjs

Javascript 在一条路由上加载多个模板/控制器,javascript,html,angularjs,angular-ui-router,Javascript,Html,Angularjs,Angular Ui Router,我正在做一个小项目，已经有一段时间没有和Angular合作了。我正在尝试分离我的所有模板/控制器，这样我就不会有一个巨大的文件，但我希望能够在一个页面上访问它们。我正在使用AngularUI路由器，并试图让它们都加载到同一条路由上。它似乎不起作用。有人知道我如何在一条路线上装载所有内容，但仍然保持所有内容的独立性吗？目前它只加载我的路由文件（createCompanyController）中列出的第一个控制器/模板，而不加载其他控制器/模板这是我的routes.js文件： (function(

我正在做一个小项目，已经有一段时间没有和Angular合作了。我正在尝试分离我的所有模板/控制器，这样我就不会有一个巨大的文件，但我希望能够在一个页面上访问它们。我正在使用AngularUI路由器，并试图让它们都加载到同一条路由上。它似乎不起作用。有人知道我如何在一条路线上装载所有内容，但仍然保持所有内容的独立性吗？目前它只加载我的路由文件（

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>

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

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

组件=>模板+控制器

包含所有模板=>组件组合的角度路由（在您的示例中，CreateCompany、CreatePerson和ListCompanys组件都位于一个路由模板中）

您需要做的只是：

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

HomePage.html

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

小提琴：

角度组件的参考链接：您可以使用

还有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>

哦，我以为组件是一个角度2功能。如果你有时间的话，我当然可以用小提琴，我会非常感激的。

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