CODEWITHSUNDEEP
angularjsspring-bootangularjs-routing
Piotr Żak
Piotr Żak

Reputation: 2413

Angular routing in Spring Boot web application

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:

  1. 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.?

  2. Do I still need Controller to provide my starting page with all ngRout'ings?

  3. Mby I'm wrong so please give me an advice how to do ngRouting right.

Thank You for any help!

Upvotes: 3

Views: 5466

Answers (1)

Yannic B&#252;rgmann
Yannic B&#252;rgmann

Reputation: 6581

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.

Upvotes: 6

Related Questions