多页Angularjs应用程序架构[关闭]

Question

我有一个在后端使用 Spring 并在前端使用 AngularJS 构建的项目。我有一个导航栏，它的内容根据用户的登录状态而变化。它有四个页面是jsp：

• 索引页面（已注销）
• 关于页面（登录/退出）
• 联系人页面（登录/退出
• 服务页面（登录/退出
• 产品页面（已登录）

另外的jsp文件为：

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

我使用 Spring Security 进行了身份验证，并在其中使用 jstl 标签根据身份验证和授权显示或隐藏按钮的 jsp 文件。

我在 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
• contacts.js
• services.js
• products.js
• nav.js
• login.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>

在这里，我放置了来自 tile-definitions 文件的页面内容和脚本。

我的问题是代码大小比我们预期的越来越大，我想以纯客户端呈现的方式构建我的代码。

我想以推荐的方式重组所有客户端代码，其中每个控制器和服务都有不同的 js 文件。我知道 angular 更适合单页应用，但我想使用 angular 的功能。

您建议采用哪些策略和架构来使该项目更易于维护和理解？

Answer 1

为了更好的可维护性和可扩展性，您可能想尝试将 Spring JSP 转换为 RESTful Web Service 并将 Angular Resources 转换为 invoke calls 到 API。

对于构建 Angular 应用程序，我喜欢基于功能的划分 (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