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 Web

includes 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 here

Usage of AngularJs

Project 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 here

Note

This 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. Summary

The 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

DOM operation, this idea of ​​introducing the back-end from the front-end is also an innovation. At present, I only know a little bit about it, and I don’t know how to use many concepts and usages. This article is a beginning for AngularJs.

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!