Home > Article > Web Front-end > How to use SpringMvc+AngularJs
This time I will bring you how to use SpringMvc+AngularJs, what are the precautions when using SpringMvc+AngularJs, the following is a practical case, let's take a look.
The front-end framework is segmented and complicated, and the framework itself is changing with each passing day. However, there are still many good frameworks, such as jQuery, but many of jQuery's own class libraries are relatively messy. AngularJs and jQuery are both front-end frameworks. This article mainly explains the integration of AngularJs and SpringMvc according to the scenario that suits you. The code comes from GitHub. Download it and take a look at it yourself, and write down your own understanding of the integration.
Directory
1. Why use AngularJs
2. Integrate SpringMvc and AngularJs
3. Summary
1. Why Using AngulaJs
AngularJS simplifies application development by presenting developers with a higher level of abstraction. As with other abstraction techniques, some flexibility is lost. In other words, not all applications are suitable for AngularJS. The main concern of AngularJS is building CRUD applications. Fortunately, at least 90% of WEB applications are CRUD applications.
2. Integration of SpringMvc and AngularJs
Project structure
Use JavaConfig to configure Spring
Use thymeleaf as a template Instead of JSP
UseBootStrap
Use AngularJs
Configure Spring using JavaConfig
##
public class AppInitializer implements WebApplicationInitializer { public void onStartup(ServletContext servletContext) throws ServletException { AnnotationConfigWebApplicationContext rootContext = new AnnotationConfigWebApplicationContext(); rootContext.register(AppConfig.class); servletContext.addListener(new ContextLoaderListener(rootContext)); AnnotationConfigWebApplicationContext dispatcherContext = new AnnotationConfigWebApplicationContext(); dispatcherContext.register(WebMvcConfig.class); ServletRegistration.Dynamic dispatcher = servletContext.addServlet("dispatcher", new DispatcherServlet(dispatcherContext)); dispatcher.setLoadOnStartup(1); dispatcher.addMapping("/"); } }This configuration class is used to replace the web.xml file, mainly to register the listener. The related configuration of the Webincludes two classes: AppConfig and WebMvcConfig
@Configuration@EnableWebMvc@ComponentScan(basePackages = "com.xvitcoder.springmvcangularjs")@Import({ThymeleafConfig.class})public class WebMvcConfig extends WebMvcConfigurerAdapter { @Override public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) { configurer.enable(); } @Override public void addResourceHandlers(final ResourceHandlerRegistry registry) { registry.addResourceHandler("/resources/**").addResourceLocations("/resources/"); } @Override public void configureMessageConverters(List<HttpMessageConverter<?>> converters) { converters.add(new MappingJackson2HttpMessageConverter()); super.configureMessageConverters(converters); } }Inherits the WebMvcConfigurerAdapter
Rewritten three methods, configuring Handler, resource interception and Converter respectively
@Configurationpublic class ThymeleafConfig { @Bean public ServletContextTemplateResolver templateResolver() { ServletContextTemplateResolver resolver = new ServletContextTemplateResolver(); resolver.setPrefix("/WEB-INF/html/"); resolver.setSuffix(".html"); resolver.setTemplateMode("HTML5"); resolver.setCacheable(false); return resolver; } @Bean public SpringTemplateEngine templateEngine() { SpringTemplateEngine engine = new SpringTemplateEngine(); engine.setTemplateResolver(templateResolver()); return engine; } @Bean public ThymeleafViewResolver thymeleafViewResolver() { ThymeleafViewResolver resolver = new ThymeleafViewResolver(); resolver.setTemplateEngine(templateEngine()); return resolver; } }Configuring Thymeleaf template hereUsage of AngularJsProject structure
Let’s focus on explaining what’s inside. In IndexController, the page will jump to the index.html page by default. The index.html page looks like this:
<!doctype html><html lang="en" ng-app="AngularSpringApp"><head> <meta charset="utf-8"/> <title>Service App</title> <link rel="stylesheet" href="resources/css/app.css"/> <link rel="stylesheet" href="resources/bootstrap/css/bootstrap.min.css" /></head><body><div id="wrapper"> <ul class="menu"> <li><a href="#/cars">Cars</a></li> <li><a href="#/trains">Trains</a></li> <li><a href="#/railwaystations">Railway Station</a></li> </ul> <hr class="" /> <div ng-view=""></div></div><script src="resources/js/lib/angular/angular.js"></script><script src="resources/js/app.js"></script><script src="resources/js/services.js"></script><script src="resources/js/controllers/RailwayStationController.js"></script><script src="resources/js/controllers/CarController.js"></script><script src="resources/js/controllers/TrainController.js"></script><script src="resources/js/filters.js"></script><script src="resources/js/directives.js"></script></body>A lot of js files are introduced hereNoteThis is the execution process of AngularJs: start from index.html, find the app.js file, Find the corresponding controller.js file according to the path from the app.js file. The controller.js file will obtain the data from the background and return it to the corresponding html page for display Module is a very important concept in angularJs
var AngularSpringApp = {}; var App = angular.module('AngularSpringApp', ['AngularSpringApp.filters', 'AngularSpringApp.services', 'AngularSpringApp.directives']);// Declare app level module which depends on filters, and servicesApp.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/cars', { templateUrl: 'cars/layout', controller: CarController }); $routeProvider.when('/trains', { templateUrl: 'trains/layout', controller: TrainController }); $routeProvider.when('/railwaystations', { templateUrl: 'railwaystations/layout', controller: RailwayStationController }); $routeProvider.otherwise({redirectTo: '/cars'}); }]);Find the corresponding controller and template according to the path
var CarController = function($scope, $http) { $scope.fetchCarsList = function() { $http.get('cars/carlist.json').success(function(carList){ $scope.cars = carList; }); }; $scope.addNewCar = function(newCar) { $http.post('cars/addCar/' + newCar).success(function() { $scope.fetchCarsList(); }); $scope.carName = ''; }; $scope.removeCar = function(car) { $http.delete('cars/removeCar/' + car).success(function() { $scope.fetchCarsList(); }); }; $scope.removeAllCars = function() { $http.delete('cars/removeAllCars').success(function() { $scope.fetchCarsList(); }); }; $scope.fetchCarsList(); };Use the $http service to send an ajax request to the background to obtain data
<div class="input-append"> <input style="width:358px; margin-left: 100px;" class="span2" type="text" ng-model="carName" required="required" min="1" /> <button class="btn btn-primary" ng-disabled="!carName" ng-click="addNewCar(carName)">Add Car</button></div><h3 style="margin-left:100px;">Car List</h3><div class="alert alert-info" style="width:400px;margin-left:100px;" ng-show="cars.length == 0"> No cars found</div><table class="table table-bordered table-striped" style="width:450px; margin-left: 100px;" ng-show="cars.length > 0"> <thead> <tr> <th style="text-align: center; width: 25px;">Action</th> <th style="text-align: center;">Car Name</th> </tr> </thead> <tbody> <tr ng-repeat="car in cars"> <td style="width:70px;text-align:center;"><button class="btn btn-mini btn-danger" ng-click="removeCar(car)">Remove</button></td> <td>{{car}}</td> </tr> </tbody></table><button style="margin-left:100px;" class="btn btn-danger" ng-show="cars.length > 1" ng-click="removeAllCars()">Remove All Cars</button>Use the corresponding tag to receive data and control display and other operations 3. SummaryThe interface is a bit simple, but it cannot hide the convenient and fast operation brought by AngularJs. We don’t need to pay too much attention I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website! Related reading:
How to convert table data in HTML to Json format
Defining multiple class attributes in HTML invalid
The above is the detailed content of How to use SpringMvc+AngularJs. For more information, please follow other related articles on the PHP Chinese website!