javascript - Multi-page Angularjs application architecture -

i have project built spring in backend , angularjs on front-end. have navigation bar it's content changes according user's login status. has 4 pages 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 :

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

i made authentication using spring security , have jsp files used jstl tags show or hide buttons according authentication , authorization.

i switch between nav-loggedin , out 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 have javascript files each of these pages , nav bar , login popup :

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

and here 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 put content , script pages tiles-definitions file.

my problem code size has got bigger , bigger we've expected happen , want structure code in pure client-side rendered way.

i want restructure client side code in recommended way have different js files each controller , services. know angular more suitable single page apps i'd use angular's features.

what strategies , architectures recommend make project more maintainable , understandable?

for better maintainability , scaling, might want try converting spring jsps restful web service , using angular resources invoke calls api.

for structuring angular app, functional-based divisions (from 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 │   └── │       ├── controllers │       │   └── thirdctrl.js │       ├── directives │       │   ├── directive2.js │       │   └── directive3.js │       ├── filters │       │   └── filter3.js │       └── services │           └── service3.js ├── partials ├── lib └── test