AngularJS多页应用程序网站的样板网站结构的建议 [英] AngularJS Multi-Page App Site Boilerplate Site Structure Advice
问题描述
我要寻找与创建一个Laravel后端服务的AngularJs多页应用一些指导。在网络上点的所有Web应用程序教程创建SPA和我刚开始接触角 - 所以请宽容我
I am looking for some guidance with creating an AngularJs multi-page app served by a Laravel Backend. All web app tutorials on the net point to creating SPAs and I am just getting started with Angular - so please go easy on me.
ProductPage例子 - http://example.com/products/widget
ProductPage example - 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服务器以pretty得多的所有静态内容投放。但页面已标记了棱角分明的标签。在每一个静态页面，我引用的不同AngularJS的控制器。
So in the above examples, I have created two pages, which are served by the web server with pretty much all static content. But the pages have been marked up with angular tags. On each static page, I have referenced a different AngularJS controller.
这是解决问题或者我应该让app.js加载了控制器/注入的依赖关系的正确方法？
Is this the right way of tackling the problem or should I be allowing app.js to load up the controllers / inject the dependencies?
此外，在这多页的应用程序控制器和链路之间共享数据，以体面的资源的任何指导/例子将是非常有益的。例如我会需要通过如添加到购物车，从产品页面的API项目，然后再查询该API来检索购物车内容？
Also, any guidance on sharing data between controllers in this multi-page app and links to decent resources / examples would be really helpful. e.g Would I need to pass e.g. Items added to shopping cart to an api from the product page, then query this api again to retrieve the cart contents?
推荐答案
您应该包括 ngRoute 模块，让AngularJS加载控制器为您服务。请参考AngularJS文档，找出如何使用路由工作。
You should include the ngRoute module and let AngularJS load the controllers for you. Please refer to AngularJS docs to find out how to work with routings.
对于共享控制器之间的数据，服务是你在找什么。创建服务一样简单的：
As for sharing data between controllers, services are what you're looking for. Creating a service is as easy as this:
app.factory("ServiceName", [function() {
return {
somevar: "foo"
};
}]);
然后，在你的控制器，你注入的服务是这样的：
Then, in your controllers, you inject the service like this:
app.controller("ContactCtrl", ["$scope", "ServiceName", function($scope, svc) {
$scope.somevar = svc.somevar;
}]);
该服务的状态保留，只要你不造成物理页面重新加载（这就是为什么你应该使用 ngRoute 加载您的控制器）。
这篇关于AngularJS多页应用程序网站的样板网站结构的建议的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
