gpt4 book ai didi

AngularJS 多页面应用程序网站样板网站结构建议

转载 作者:行者123 更新时间:2023-12-03 06:54:58 26 4
gpt4 key购买 nike

我正在寻找一些有关创建由 Laravel 后端服务的 AngularJs 多页面应用程序的指导。网上的所有 Web 应用程序教程都指向创建 SPA,而我刚刚开始使用 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 Controller 。

这是解决问题的正确方法还是我应该允许 app.js 加载 Controller /注入(inject)依赖项?

此外,任何有关在此多页面应用程序中的 Controller 之间共享数据的指南以及指向适当资源/示例的链接都将非常有帮助。例如,我需要通过吗?从产品页面将商品添加到购物车到 api,然后再次查询此 api 以检索购物车内容?

最佳答案

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

至于在 Controller 之间共享数据,您需要的是服务。创建服务就像这样简单:

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

然后,在您的 Controller 中,您可以像这样注入(inject)服务:

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

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

关于AngularJS 多页面应用程序网站样板网站结构建议,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22556650/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com