Angular 在 Spring 引导 Web 应用程序中路由

Question

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

我有 Spring 控制器与我的应用程序共享视图文件名

@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";
    }
}

我还有一些其他控制器来处理 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。

我的问题是：

我应该有一个 index.html 页面来管理所有 ng-routes 吗？例如 ngRoute first to addOffer.html second to contact.html etc.?
我还需要 Controller 为我的起始页提供所有 ngRout'ings 吗？
Mby 我错了所以请给我一个如何正确执行 ngRouting 的建议。

感谢您的帮助！

Answer 1

让我们从以下开始：什么是单页应用程序？

单页应用程序是包含一个 HTML 页面的页面。所以只有一个 HTML-File 从你的后端请求，其余的路由应该由前端管理。对于单页应用程序的更详细解释，我相信网络上有很多关于它的信息。

路由如何使用 AngularJS 工作？

Angular 去往不同路线的路径在'#'之后。所以它们在 url 的片段部分并且这部分没有传输到服务器。所以后端不需要@Controller来服务不同的html.

要根据当前路线显示不同的内容，您可以指定控制器和 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-File 包含到每个使用 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.[=51= 中的 html ]" 到使用 ng-view-指令

的 div

什么是 REST？

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

Angular 在 Spring 引导 Web 应用程序中路由

Angular routing in Spring Boot web application

angularjs

angularjs-routing

spring-boot