多頁Angularjs應用程序體系結構

Question

我有一個使用後端的Spring和前端的AngularJS構建的項目。我有一個導航欄，其內容根據用戶的登錄狀態進行更改。它有四個頁面，這是JSP：

• 索引頁（已註銷）
• 關於頁面
• 聯繫人頁面（輸入/輸出登錄）（輸入/輸出
• 服務頁面登錄（記錄在/出
• 產品頁面（登錄）

和額外的JSP文件爲：

• nav.jsp
• NAV-loggedin.jsp
• NAV-loggedout.jsp
• 登錄-popup.jsp

我使用彈簧安全作出認證，並有我曾經JSTL的JSP文件標籤根據認證和授權顯示或隱藏按鈕。

我NAV-的loggedIn之間進出如下切換：

<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> 

在這裏，我把從地磚，定義文件的網頁內容和腳本。

我的問題是，代碼的大小已經越來越大，比我們預期的還要多，所以我想以純粹的客戶端呈現的方式構建我的代碼。

我想以推薦的方式重新構建所有客戶端代碼，其中每個控制器和服務都有不同的js文件。我知道angular更適合單頁面應用，但我想使用angular的功能。

你推薦哪些策略和體系結構來使這個項目更易於維護和理解？

Answer 1

爲了獲得更好的可維護性和擴展性，您可能希望嘗試將您的Spring JSP轉換爲RESTful Web Service並將Angular Resources改爲使用invoke calls添加到API。

爲了安排您的角的應用程序，我想基於功能性，區劃（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