当前位置:  开发笔记 > 前端 > 正文

Spring Boot Web应用程序中的角度路由

如何解决《SpringBootWeb应用程序中的角度路由》经验,为你挑选了1个好方法。

我正在开发一些使用角度和弹簧靴的项目,我有一些令人困惑的情况:

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

@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 saveOffer(@RequestBody Offer offer) {
        Offer offerSaved = offerRepository.save(offer);
        return new ResponseEntity(offerSaved, HttpStatus.OK);
    }
}

我使用angular来开发我的UI.

当我开始阅读角度(单页面应用程序)中的路由可能性时,我发现自己很困惑,所以我认为我不再需要OfferViewController.

我的问题是:

    我应该有一个index.html页面来管理所有ng-routes吗?例如,ngRoute首先将addOffer.html第二个添加到contact.html等?

    我是否仍需要Controller为我的起始页面提供所有ngRout'ings?

    Mby我错了所以请给我一个如何做ngRouting正确的建议.

感谢您的任何帮助!



1> Yannic Klem..:

让我们先来看看:什么是单页应用程序?

单页面应用程序是一个页面,包含在一个HTML页面上.因此,只有一个HTML-File从您的后端请求,其余的路由应该由前端管理.对于单页应用程序的更详细的说明,我确信网络上有很多关于这一点的信息.

如何使用AngularJS进行路由?

转到不同路线的角度路径是在'#'之后.所以它们位于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教程 - 路由部分之外.它显示了如何指定路由以及应在此路由中显示哪些内容.

此代码段告诉angular将部分HTML-File包含到使用该ng-view指令的每个Element中.

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




  
  
  
  



  

如果您访问yourdomain.com/#/phones现在它载入您的index.html和角度包括使用该文件中包含的"/partials/phone-list.html"到DIV的HTML ng-view-directive

什么是REST?

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

推荐阅读
黄晓敏3023
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有