Question

我正在寻找一些关于创建由Laravel Backend提供服务的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>

CartPage示例 - 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以检索购物车内容？

Answer 1

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

至于在控制器之间共享数据，服务是您正在寻找的。创建服务就像这样简单：

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

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

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

只要您没有导致物理页面重新加载（这就是您应该使用ngRoute加载控制器的原因），服务的状态会保留。

Answer 2

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

Answer 3

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

查看Yeoman Angular generator，它是维护得更好的角度模板之一，可让您对使用Yeoman生成器的功能有一个良好的感觉。

Answer 4

我过去两年与ngSeed合作过。当它更新为使用$state时，感觉就像用Angular做更大的应用程序一样。

要记住的事情：

模块化功能（不像大多数教程那样的层），
保持模块小巧，干净，
从不使用$ rootScope，
在服务中封装共享状态，
不要播放活动，但请观看州，
...

Answer 5

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

Answer 6

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

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

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

AngularJS多页面应用程序站点Boilerplate站点结构建议

6 个答案: