AngularJS Multi-Page App Site Boilerplate Site Structure Advice

Question

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?

score 1 · Answer 1 · answered Mar 21 '14 at 11:01

1

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).

answered Mar 21 '14 at 11:01

mingos

23,778
12
70
107

Hi, thanks for the reply, but I was asking in particular to sharing data between controllers on different **Physicial** pages. Can I still use `ngRoute` with a multi-page app? – Gravy Mar 21 '14 at 11:04
Sharing data between page reloads is possible via the use of cookies, sessions (server side) or mechanisms such as indexeddb or websql. Is there a particular reason why a one page app won't cut it for you? – mingos Mar 21 '14 at 11:23
To the downvoter: I'd appreciate some info regarding why my answer was downvoted. – mingos Mar 04 '15 at 11:58

score 0 · Answer 2 · answered Jun 01 '14 at 07:01

0

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.

answered Jun 01 '14 at 07:01

Basavaraj Kabuure

341
1
3

score 0 · Answer 3 · answered Sep 04 '15 at 01:28

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.

score 0 · Answer 4 · answered Nov 06 '15 at 19:50

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,
…

score 0 · Answer 5 · answered Jan 03 '17 at 11:58

0

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

answered Jan 03 '17 at 11:58

Kranthi Kiran P

89
1
4

score -1 · Answer 6 · answered Jul 31 '14 at 18:44

-1

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.

answered Jul 31 '14 at 18:44

PrimeLens

2,547
4
23
28

Seeing as how there isn't an acceptable answer here, it would be nice if the downvoter commented so people who are looking for this guidance will have a better understanding of the donts... – drizzie Jun 18 '15 at 22:37

AngularJS Multi-Page App Site Boilerplate Site Structure Advice

6 Answers6

Linked