gpt4 book ai didi

javascript - 多页面 Angularjs 应用架构

转载 作者:行者123 更新时间:2023-11-30 10:02:20 24 4
gpt4 key购买 nike

<分区>

我有一个在后端使用 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 的功能。

您推荐哪些策略和架构来使该项目更易于维护和理解?

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com