gpt4 book ai didi

angularjs - Spring Boot Web 应用程序中的 Angular 路由

转载 作者:行者123 更新时间:2023-12-03 09:30:46 25 4
gpt4 key购买 nike

我正在使用 angular 和 spring boot 开发一些项目,但我遇到了一些令人困惑的情况:

我有 Spring Controller 与我的应用程序共享 View 文件名

@Controller
public class OfferViewController {

@RequestMapping(value = "/addOffer", method = RequestMethod.GET)
public String addView() {
return "html/offer/addOffer";
}

@RequestMapping(value = "/showOffer/{offerId}")
public String showOffer(@PathVariable("offerId") String offerId){
return "html/offer/showOffer";
}
}

我还有一些其他 Controller 来处理 REST 调用:

@RestController
public class OfferRestController {

private OfferRepository offerRepository;

@Autowired
public OfferRestController(OfferRepository offerRepository) {
this.offerRepository = offerRepository;
}

@RequestMapping(value = "/showOfferJson/{offerId}", method = GET, produces = APPLICATION_JSON_VALUE)
public Offer showOffertest(@PathVariable("offerId") String offerId) {
Offer offer = offerRepository.findOne(offerId);
return offer;
}

@RequestMapping(value = "/saveOffer", method = POST)
public ResponseEntity<Offer> saveOffer(@RequestBody Offer offer) {
Offer offerSaved = offerRepository.save(offer);
return new ResponseEntity<Offer>(offerSaved, HttpStatus.OK);
}
}

我使用 Angular 来开发我的 UI。

当我开始阅读 Angular (单页应用程序的东西)路由可能性时,我发现自己很困惑,因为我假设我不再需要 OfferViewController

我的问题是:

  1. 我应该有一个单独的 index.html 页面来管理所有 ng-routes 吗?例如 ngRoute 首先到 addOffer.html 第二到 contact.html 等等?

  2. 我还需要 Controller 为我的起始页提供所有 ngRout'ings 吗?

  3. Mby 我错了所以请给我一个如何正确执行 ngRouting 的建议。

感谢您的帮助!

最佳答案

让我们从:什么是单页应用程序开始?

单页应用程序是由一个 HTML 页面组成的页面。因此,后端只请求一个 HTML 文件,其余路由应由前端管理。对于单页应用程序的更详细解释,我相信网络上有很多相关信息。

AngularJS 的路由是如何工作的?

去往不同路线的 Angular 路径在“#”之后。所以它们在 url 的片段部分,这部分不会传输到服务器。所以不需要在后端有一个 @Controller 来提供不同的 html。

要根据当前路由显示不同的内容,您可以指定应在所需路由中显示的 Controller 和 partial.html 文件。

phonecatApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);

此代码示例出自 AngularJS Tutorial - Routing Part .它显示了如何指定路由以及应在该路由上显示哪些内容。

此代码片段告诉 Angular 将部分 HTML 文件包含到每个使用 ng-view 指令的元素中。

所以你的 index.html 看起来像这样(再次从 docs 中复制出来)

<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>

<div ng-view></div>

</body>
</html>

如果您访问 yourdomain.com/#/phones 现在它会加载您的 index.html 并且 angular 将文件“/partials/phone-list.html”中包含的 html 包含到 div 中使用 ng-view-指令

什么是 REST?

我认为没有人知道这个问题的确切答案,但您所做的绝对不是 REST。它只是 HTTP 调用。您的端点看起来像 RPC。第一步可能是使用接受 GET 请求的端点/offers/{id} 和接受 POST 请求的端点/offers。如果您想提供一种方法来一次公开所有报价,请添加一个端点/offers 以接受 GET 请求。

关于angularjs - Spring Boot Web 应用程序中的 Angular 路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34368928/

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