Angular routing in Spring Boot web application

Question

I'm developing some project using angular and spring boot and I have some confussing situation:

I have Spring Controller to share view file names with my application

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

And I have some other controller to handle REST calls:

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

I use angular for develope my UI.

I find myself confused when I start to read about routing possibilities in angular (single page application stuff) so as I assume i dont need OfferViewController any more.

My question are:

Should I have an single index.html page to manage all ng-routes? For example ngRoute first to addOffer.html second to contact.html etc.?
Do I still need Controller to provide my starting page with all ngRout'ings?
Mby I'm wrong so please give me an advice how to do ngRouting right.

Thank You for any help!

You don't need it to handle routes like it's doing now. But it is better if this controller would allow HTML5 routing by responding with landing page for every request (except static files like CSS, JS, images). — dfsq
– dfsq, Commented Dec 19, 2015 at 9:01
I hope I answered all of your questions. If you have more questions please comment under the answer. — Yannic Bürgmann
– Yannic Bürgmann, Commented Dec 19, 2015 at 17:06
Refer to github.com/spring-guides/tut-spring-security-and-angular-js/… — EpicPandaForce
– EpicPandaForce, Commented Oct 13, 2016 at 14:09

Yannic Bürgmann · Accepted Answer · 2015-12-19 17:04:01Z

6

Lets start with: What is a single page application?

A single page application is a page consisting on one single HTML-page. So there is only one HTML-File requested from your backend and the rest of the routing should be managed of the frontend. For more detailed exaplanation of a single page application I am sure there is a lot of information in the web about that.

How does routing with AngularJS work?

Angular pathes to go to different routes are after the '#'. So they are in the fragment part of the url and this part is not transfered to the server. So there is no need to have a @Controller in the backend to serve different html.

To show different content depending on the current route you can specify controller and partial.html files which should be shown at the required route.

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'
  });
}]);

this code example is right out of the AngularJS Tutorial - Routing Part. It shows how to specify a route and which content should be shown at this route.

This code snippet tells angular to include the partial HTML-File into every Element which uses the ng-view directive.

so your index.html could look like this (again copied out of the 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>

if you visit yourdomain.com/#/phones now it loads your index.html and angular includes the html contained in the file "/partials/phone-list.html" into the div which uses the ng-view-directive

What is REST?

I think no one knows the EXACT answer to this question but what you do is definitly NOT REST. It's simply HTTP calls. Your endpoint looks like RPC. A first step could be to use an endpoint /offers/{id} which accepts a GET-Request and an endpoint /offers which accepts a POST-Request. If you want to provide a way to expose all of your offers at once add an endpoint /offers which accepts a GET-Request.

edited Dec 19, 2015 at 17:04

answered Dec 19, 2015 at 16:58

Yannic Bürgmann

6,5916 gold badges46 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Piotr Żak Over a year ago

Thank You for response it highlight me how it should work. If You have a while please look at another question of mine stackoverflow.com/questions/34370442/…

Yannic Bürgmann Over a year ago

I will have a look at it. If your project is available on github it would be nice to get the link for it so i can make it work and upload it as one of my examples on my github account (reduced to the essential content to demonstrate an angularJS application with a spring boot backend)

PrabaharanKathiresan Over a year ago

very late.. but nice explanation

Collectives™ on Stack Overflow

Angular routing in Spring Boot web application

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related