Question

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

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

其他jsp文件为：

nav.jsp
NAV-loggedin.jsp
NAV-loggedout.jsp
登录-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
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>

这里我为tiles-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

多页Angularjs应用程序架构

1 个答案: