Multi-page Angularjs application architecture

Question

I have a project built with Spring in backend and AngularJS on the front-end. I have a navigation bar where it's content changes according to user's login status. It has four pages which are jsp :

• Index page (Logged out)
• About page (Logged in/out)
• Contacts Page (Logged in/out
• Services Page (Logged in/out
• Products Page (Logged in)

And additional jsp files as :

• nav.jsp
• nav-loggedin.jsp
• nav-loggedout.jsp
• login-popup.jsp

I made authentication using spring security and have jsp files where i used jstl tags to show or hide buttons according to authentication and authorization.

I switch between nav-loggedin and out as below :

<c:choose>
    <c:when test="${pageContext.request.userPrincipal.authenticated}">

        <tiles:insertAttribute name="nav-loggedin"/>

    </c:when>
    <c:otherwise>

        <tiles:insertAttribute name="nav-loggedout"/>

    </c:otherwise>
</c:choose>

And I have javascript files for each of these pages and also for nav bar and login popup :

• index.js
• about.js
• contacts.js
• services.js
• products.js
• nav.js
• login.js

And here is my layout :

<div ng-app="app">
    <div ng-controller="NavController">
        <tiles:insertAttribute name="nav"/>
    </div>
    <div id="content" ng-controller="AppController">
        <tiles:insertAttribute name="content"/>
    </div>
    <div ng-controller="LoginController">
        <tiles:insertAttribute name="login-popup"/>
    </div>
</div>

...


<script type="text/javascript" src='<tiles:insertAttribute name="pageScript" ignore="true"/>'></script>
<script type="text/javascript" src='<c:url value="/static/main/js/nav.js"/>'></script>
<script type="text/javascript" src='<c:url value="/static/main/js/login.js"/>'></script>

Here I put content and script for pages from tiles-definitions file.

My problem is that code size has got bigger and bigger than we've expected as always happen and i want to structure my code in a pure client-side rendered way.

I want to restructure all client side code in recommended way where you have different js files for each controller and services. I know that angular is more suitable for single page apps but I'd like to use angular's features.

What strategies and architectures do you recommend to make this project more maintainable and understandable?

Answer 1

For better maintainability and scaling, you might want to try converting your Spring JSPs to a RESTful Web Service and using Angular Resources to invoke calls to the API.

For structuring your Angular app, I like functional-based divisions (from a community-sourced best practices document)

├── app
│   ├── app.js
│   ├── common
│   │   ├── controllers
│   │   ├── directives
│   │   ├── filters
│   │   └── services
│   ├── home
│   │   ├── controllers
│   │   │   ├── FirstCtrl.js
│   │   │   └── SecondCtrl.js
│   │   ├── directives
│   │   │   └── directive1.js
│   │   ├── filters
│   │   │   ├── filter1.js
│   │   │   └── filter2.js
│   │   └── services
│   │       ├── service1.js
│   │       └── service2.js
│   └── about
│       ├── controllers
│       │   └── ThirdCtrl.js
│       ├── directives
│       │   ├── directive2.js
│       │   └── directive3.js
│       ├── filters
│       │   └── filter3.js
│       └── services
│           └── service3.js
├── partials
├── lib
└── test