AngularJS Multi-Page App Site Boilerplate Site Structure Advice

Asked 21/3, 2014 at 10:49 Answered 3/1, 2017 at 11:58

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?

Pick answered 21/3, 2014 at 10:49 Comment(0)

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

Alius answered 21/3, 2014 at 11:1 Comment(3)

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? – Pick 21/3, 2014 at 11:4

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? – Alius 21/3, 2014 at 11:23

To the downvoter: I'd appreciate some info regarding why my answer was downvoted. – Alius 4/3, 2015 at 11:58

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.

Cadaverine answered 1/6, 2014 at 7:1 Comment(0)

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.

Pyrargyrite answered 4/9, 2015 at 1:28 Comment(0)

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

Caltrop answered 6/11, 2015 at 19:50 Comment(0)

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

Garfieldgarfinkel answered 3/1, 2017 at 11:58 Comment(0)

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

Vibrant answered 31/7, 2014 at 18:44 Comment(1)

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... – Breed 18/6, 2015 at 22:37

Recommended topics

Hot tags