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

我正在寻找一些指导,创建一个由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以检索购物车内容？

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

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

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

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

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

只要您不导致物理页面重新加载(这就是您应该使用ngRoute加载控制器的原因),服务的状态将保留.

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

相关文章