Javascript 具有角度的单页应用程序

在过去的几天里，我开始与Angular合作 并且认为一个好的开始项目是建立一个 基本的单页应用程序。我想讨论一下最好的方法 这样做，因为我最终将使用这个概念来构建 一个非常大的项目

我很难理解页面之间的关系 url位置和模块与相关控制器的可重用块 在页面上

我想这样做的方式是让路由块定义页面，例如

var myWebsite = angular.module('myWebsite', ['ngRoute']);

myWebsite.config(function($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl: 'home.html'
    }).
    when('/page2', {
        templateUrl: 'page2.html'
    }).
    otherwise({
       redirectTo: '/home'
    });
});

该块将位于它自己的config.js文件中

然后，我想让控制器与可以在任何页面上重用的分区相关

假设我们想要一个菜单模块，它会出现在首页和第二页

我想把它放在自己的文件中，有点像这样：

<div ng-controller="navMenu">
    <ul>
        <li>...
    </ul>
</div>

这就意味着我可以用以下风格编写主页、第2页和其他任何页面：

<ng-include src="/app/modules/menu.html"></ng-include>
<ng-include src="/app/modules/somethingElse.html"></ng-include>
<ng-include src="/app/modules/anotherThing.html"></ng-include>

以及我的index.html正文，如下所示：

<ng-view></ng-view>

在执行此操作时，我遇到了控制器无法动态加载的问题。 我将基本上必须列出所有可能的控制器，将在一个大文件中使用。 这显然违背了使用角度传感器的一个要点

---

所以我觉得我误解了Angular，希望有人能给我指出正确的方向。我希望有一小块可重用的html，每个都有自己的特定控制器，可以动态加载

我看到的其他教程似乎在路由配置中为每个页面提供了一个控制器，但是页面之间有很多共享功能，这似乎有些多余

---

非常感谢任何帮助、链接和想法。干杯。

如果我正确理解了您的问题，那么您的ng包含的离散功能块看起来是实现as指令的理想候选

路由提供程序配置允许您通过在随templateUrl参数传入的对象中指定控制器参数，为多个页面加载同一控制器。这允许您跨多个分区共享同一控制器帐户，并使页面可组合，因为您可以根据所服务的路由将分区与控制器混合和匹配。但是，正如您所观察到的，这确实意味着您的控制器脚本需要在启动时加载，即不是动态加载，但这是角度解决方案的默认/标准体系结构方法。如果要动态加载控制器，则需要做一些额外的工作，如Dan Wahlin在其文章中所示：

---

我想要一小块可重用的html，每一块都有自己特定的控制器查看指令。这正是他们的目的。我不知道你所说的动态加载是什么意思。我基本上不想在一个大文件中列出我所有的控制器。我希望每个部分都有单独的js文件，需要时可以加载。仔细看，这可能超出了我的理解范围，我知道这可以通过require实现，在这种情况下，我只想知道我目前的计划是否至少合理。你是否考虑过使用GruntJS将你的多个文件编译成“一个大文件”？这将允许您以自己喜欢的方式组织源代码，但可以享受缩小和减少客户端浏览器加载应用程序所需的请求数量的好处。