AngularJS Multi-Page App Site Boilerplate Site Structure Advice

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 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 Example - 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>

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.

Is this the right way of tackling the problem or should I be allowing app.js to load up the controllers / inject the dependencies?

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?

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;
}]);

The service's state is retained for as long as you don't cause a physical page reload (which is why you should use ngRoute to load your controllers).

Here you can use ngroute directive with assigning controller name dynamically. If we use ngroute , then ngroute $scope is parent scope for both pages(html views). Form this scope you can easily pass data from one controller to other controller.

Probably the best boilerplate/template system that I have found is Yeoman. It has a large number of great Angular templates that you can use as a starting point, and also supports automatically creating models, views, etc. from subtemplates of the main template that you choose.

Take a look at the Yeoman Angular generator, it's one of the more well-maintained angular templates that will give you a good feel for the capabilities of using a Yeoman generator.

I've worked with ngSeed for the past two years now. When it got updated to use $state it felt like a decent way to do larger apps with Angular.

Things to remember:

modularize around functionals (not layers like most tutorials do),
keep your modules small and clean,
never use $rootScope,
encapsulate shared state in a service,
don't broadcast events, but watch state,
…

Check out fountainjs. They have good boilerplates for different UI technologies.

I put a basic angular multipage boilerplate on github. It covers a working example of ngRoute and the loading of html partials and images. There's also an angular button in one of the partials that logs a message to the console. Hope it helps

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

edit: there is a controller that encompasses all pages to hold data that you might want to pass from page to page.

来源：https://stackoverflow.com/questions/22556650/angularjs-multi-page-app-site-boilerplate-site-structure-advice

标签

angularjs

boilerplate

multipage