To implement Rest & Angular client in MVC4, you need to :
1- Create the rest controller
@RestController
public class ReleasesReportController {
@RequestMapping("/releases")
public List<Release> getReleases(){
List<Release> releases=new ArrayList<Release>();
Release release1 =new Release();
release1.setName("Strong bad");
Release release2 =new Release();
release2.setName("Back to the feature");
Release release3 =new Release();
release3.setName("Trogdor");
releases.add(release1);
releases.add(release2);
releases.add(release3);
return releases;
}
}
2- Add JSON mapping to the WebAppInitializer class
@Override
public void onStartup(ServletContext servletContext) throws ServletException {
WebApplicationContext context = getContext();
servletContext.addListener(new ContextLoaderListener(context));
ServletRegistration.Dynamic dispatcher = servletContext.addServlet("DispatcherServlet", new DispatcherServlet(context));
dispatcher.setLoadOnStartup(1);
dispatcher.addMapping("*.html");
dispatcher.addMapping("*.pdf");
dispatcher.addMapping("*.json");
}
3- Bind it to the front end
<html ng-app>
<head>
<title> Hello Releases Tracker</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" > </script>
<script type="text/javascript" src="releases.js"></script>
</head>
<body>
<div ng-controller="Releases">
I have {{releases.length}} releases !
<ul class="releases-container">
<li ng-repeat="release in releases">
{{release.name}}
</li>
</ul>
</div>
</body>
</html>
4- Create the angular file (releases.js) under src/main/webapp folder
function Releases($scope, $http){
$http.get('http://localhost:8080/ReleaseTracker/releases.json').
success(function(data){
$scope.releases=data;
});
}
1- Create the rest controller
@RestController
public class ReleasesReportController {
@RequestMapping("/releases")
public List<Release> getReleases(){
List<Release> releases=new ArrayList<Release>();
Release release1 =new Release();
release1.setName("Strong bad");
Release release2 =new Release();
release2.setName("Back to the feature");
Release release3 =new Release();
release3.setName("Trogdor");
releases.add(release1);
releases.add(release2);
releases.add(release3);
return releases;
}
}
2- Add JSON mapping to the WebAppInitializer class
@Override
public void onStartup(ServletContext servletContext) throws ServletException {
WebApplicationContext context = getContext();
servletContext.addListener(new ContextLoaderListener(context));
ServletRegistration.Dynamic dispatcher = servletContext.addServlet("DispatcherServlet", new DispatcherServlet(context));
dispatcher.setLoadOnStartup(1);
dispatcher.addMapping("*.html");
dispatcher.addMapping("*.pdf");
dispatcher.addMapping("*.json");
}
3- Bind it to the front end
<html ng-app>
<head>
<title> Hello Releases Tracker</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" > </script>
<script type="text/javascript" src="releases.js"></script>
</head>
<body>
<div ng-controller="Releases">
I have {{releases.length}} releases !
<ul class="releases-container">
<li ng-repeat="release in releases">
{{release.name}}
</li>
</ul>
</div>
</body>
</html>
4- Create the angular file (releases.js) under src/main/webapp folder
function Releases($scope, $http){
$http.get('http://localhost:8080/ReleaseTracker/releases.json').
success(function(data){
$scope.releases=data;
});
}
No comments:
Post a Comment