AngularJS多页面应用网站模板网站结构建议

Question

AngularJS多页面应用网站模板网站结构建议

7

我希望您能为我提供一些指导，以创建由Laravel后端提供支持的AngularJs多页应用程序。网络上的所有Web应用程序教程都指向创建单页应用程序，而我刚刚开始使用Angular - 所以请对我宽容一点。

产品页面示例- 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服务器提供几乎所有静态内容。但是这些页面已经使用Angular标记进行了标记。在每个静态页面上，我引用了不同的AngularJS控制器。

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

此外，在这个多页应用程序中共享控制器之间的数据以及相关资源/示例的链接会非常有帮助。例如，我需要将添加到购物车中的项目传递给api，然后再次查询此api以检索购物车内容吗？

- Gravy

6个回答

0

看看fountainjs吧。他们有适用于不同UI技术的好的样板文件。

- Kranthi Kiran P

0

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

- Basavaraj Kabuure

0

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

看一下Yeoman Angular generator，它是更受关注的Angular模板之一，可以让您充分体验使用Yeoman生成器的能力。

- joshperry

0

我已经使用ngSeed两年了。当它更新为使用$state时，感觉是使用Angular构建大型应用程序的不错方式。

需要记住的事情：

围绕功能模块化（而不是像大多数教程一样分层），
保持模块小而干净，
永远不要使用$rootScope，
将共享状态封装在服务中，
不要广播事件，而是观察状态，
…

- iwein

-1

我在Github上放了一个基本的Angular多页面样板文件。它包括了ngRoute的工作示例以及加载HTML部分和图片的方法。其中一个部分还有一个Angular按钮，可以将消息记录到控制台中。希望能对你有所帮助。

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

编辑：有一个控制器包含所有页面，可用于保存您可能想要从页面到页面传递的数据。

- PrimeLens

既然这里没有一个可接受的答案，如果那个点踩的人能够评论一下，那么寻找这些指导的人们将会更好地了解不应该做什么。 - drizzie

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mingos · Accepted Answer

你应该包含ngRoute模块，并让AngularJS为你加载控制器。请参考AngularJS文档了解如何处理路由。

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

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

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

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

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