<分区>
我有一个在后端使用 Spring，在前端使用 AngularJS 构建的项目。我有一个导航栏，其内容根据用户的登录状态而变化。它有四个 jsp 页面:
- 索引页(已注销)
- 关于页面(登录/注销)
- 联系人页面(登录/注销
- 服务页面(登录/注销
- 产品页面(已登录)
还有额外的 jsp 文件:
- 导航.jsp
- nav-loggedin.jsp
- nav-loggedout.jsp
- login-popup.jsp
我使用 spring security 进行了身份验证，并拥有 jsp 文件，其中我使用 jSTL 标签根据身份验证和授权显示或隐藏按钮。
我在 nav-loggedin 和 out 之间切换如下:
<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>
我为每个页面以及导航栏和登录弹出窗口都有 javascript 文件:
- index.js
- about.js
- 联系人.js
- 服务.js
- 产品.js
- 导航.js
- 登录.js
这是我的布局:
<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>
我在这里放置了来自 tiles-definitions 文件的页面内容和脚本。
我的问题是代码量越来越大，超出了我们的预期，而且我想以纯客户端呈现的方式构建我的代码。
我想以推荐的方式重组所有客户端代码，其中每个 Controller 和服务都有不同的 js 文件。我知道 angular 更适合单页应用程序，但我想使用 angular 的功能。
您推荐哪些策略和架构来使该项目更易于维护和理解？