AngularJS 多页应用程序站点样板站点结构建议答案

【问题标题】：AngularJS Multi-Page App Site Boilerplate Site Structure AdviceAngularJS 多页应用程序站点样板站点结构建议
【发布时间】：2014-04-28 16:42:03
【问题描述】：

我正在寻找一些有关创建由 Laravel 后端提供的 AngularJs 多页应用程序的指导。网上所有的网络应用教程都指向创建 SPA，而我刚刚开始使用 Angular - 所以请放轻松。

ProductPage 示例 - http://example.com/products/widget

<html data-ng-app='ExampleApp'>
    <head>
    </head>
    <body data-ng-controller='ProductController'>
        // ProductPage Content Served by laravel with angular tags

        <script type="text/javascript" src="/js/lib/angular.min.js"></script>
        <script type="text/javascript" src="/js/app.js"></script>
        <script type="text/javascript" src="/js/controllers/ProductController.js"></script>
    </body>
</html>

购物车页面示例 - http://example.com/cart

<html>
    <head>
    </head>
    <body data-ng-controller='CartController'>
        // CartPage Content Served by web-server with angular tags

        <script type="text/javascript" src="/js/lib/angular.min.js"></script>
        <script type="text/javascript" src="/js/app.js"></script>
        <script type="text/javascript" src="/js/controllers/CartController.js"></script>
    </body>
</html>

因此，在上面的示例中，我创建了两个页面，由 Web 服务器提供几乎所有静态内容。但是页面已经用角度标签进行了标记。在每个静态页面上，我都引用了不同的 AngularJS 控制器。

这是解决问题的正确方法还是我应该允许 app.js 加载控制器/注入依赖项？

此外，有关在此多页应用程序中的控制器之间共享数据的任何指南以及指向体面资源/示例的链接都会非常有帮助。例如，我需要通过吗？从商品页面添加到购物车的商品到一个api，然后再次查询这个api获取购物车内容？

【问题讨论】：

标签： angularjs boilerplate multipage

【解决方案1】：

查看喷泉。他们为不同的 UI 技术提供了很好的样板。

【讨论】：

【解决方案2】：

在过去的两年里，我一直与 ngSeed 合作。当它被更新为使用 $state 时，感觉就像是用 Angular 开发大型应用程序的一种不错的方式。

要记住的事情：

围绕函数进行模块化（不是像大多数教程那样的层），
保持模块小巧整洁，
永远不要使用 $rootScope，
在服务中封装共享状态，
不广播事件，而是观看状态，
…

【讨论】：

【解决方案3】：

我发现的最好的样板/模板系统可能是Yeoman。它有大量优秀的 Angular 模板可供您作为起点，还支持从您选择的主模板的子模板自动创建模型、视图等。

看看Yeoman Angular generator，它是维护得更好的角度模板之一，可以让您很好地了解使用 Yeoman 生成器的功能。

【讨论】：

【解决方案4】：

我在 github 上放了一个基本的角度多页样板。它涵盖了 ngRoute 的一个工作示例以及 html 部分和图像的加载。在其中一个部分中还有一个角度按钮，用于将消息记录到控制台。希望对你有帮助

https://github.com/PrimeLens/angular-multipage-boilerplate

编辑：有一个控制器包含所有页面以保存您可能希望在页面之间传递的数据。

【讨论】：

鉴于这里没有可接受的答案，如果反对者发表评论会很好，这样正在寻找此指导的人将更好地理解不要...

【解决方案5】：

在这里，您可以使用 ngroute 指令动态分配控制器名称。如果我们使用 ngroute ，那么 ngroute $scope 是两个页面（html 视图）的父范围。形成这个范围，您可以轻松地将数据从一个控制器传递到另一个控制器。

【讨论】：

【解决方案6】：

您应该包含ngRoute 模块并让AngularJS 为您加载控制器。请参阅 AngularJS 文档以了解如何使用路由。

至于在控制器之间共享数据，您需要的是服务。创建服务就这么简单：

app.factory("ServiceName", [function() {
    return {
        somevar: "foo"
    };
}]);

然后，在您的控制器中，您像这样注入服务：

app.controller("ContactCtrl", ["$scope", "ServiceName", function($scope, svc) {
    $scope.somevar = svc.somevar;
}]);

只要您不导致物理页面重新加载，服务的状态就会一直保留（这就是为什么您应该使用ngRoute 来加载您的控制器）。

【讨论】：

您好，感谢您的回复，但我特别要求在不同的物理页面上的控制器之间共享数据。我还能在多页应用中使用ngRoute 吗？
通过使用 cookie、会话（服务器端）或 indexeddb 或 websql 等机制，可以在页面重新加载之间共享数据。单页应用程序不适合您是否有特殊原因？
致反对者：我希望能提供一些关于我的答案为何被反对的信息。