我正在寻找一些有关创建由 Laravel 后端服务的 AngularJs 多页面应用程序的指导。网上的所有 Web 应用程序教程都指向创建 SPA,而我刚刚开始使用 Angular - 所以请对我放轻松。
产品页面示例 -http://example.com/products/widget 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 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
加载您的控制器)。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)