So verwenden Sie SpringMvc+AngularJs

Dieses Mal zeige ich Ihnen, wie Sie SpringMvc+AngularJs verwenden und welche Vorsichtsmaßnahmen bei der Verwendung von SpringMvc+AngularJs gelten. Hier sind praktische Fälle, werfen wir einen Blick darauf.

Front-End-Frameworks sind segmentiert und kompliziert, und die Frameworks selbst ändern sich von Tag zu Tag. Es gibt jedoch immer noch viele gute Frameworks wie jQuery, aber viele der eigenen Klassenbibliotheken von jQuery sind relativ chaotisch. AngularJs und jQuery sind beide Front-End-Frameworks. In diesem Artikel wird hauptsächlich die Integration von AngularJs und SpringMvc entsprechend dem für Sie geeigneten Szenario erläutert. Laden Sie ihn herunter, schauen Sie sich ihn selbst an und schreiben Sie Ihr eigenes Verständnis auf der Integration.

Inhaltsverzeichnis

1. Warum AngularJs verwenden?

3. Zusammenfassung

? Die Verwendung von AngulaJs

AngularJS vereinfacht die Anwendungsentwicklung, indem es Entwicklern ein höheres Abstraktionsniveau bietet. Wie bei anderen Abstraktionstechniken geht auch hier etwas Flexibilität verloren. Mit anderen Worten: Nicht alle Anwendungen sind für AngularJS geeignet. AngularJS befasst sich hauptsächlich mit der Erstellung von CRUD-Anwendungen. Glücklicherweise sind mindestens 90 % der WEB-Anwendungen CRUD-Anwendungen.

2. Integrieren Sie SpringMvc und AngularJs mit

Projektstruktur

Verwenden Sie JavaConfig, um Spring zu konfigurieren

Verwenden Sie thymeleaf als eine Vorlage anstelle von JSP

verwenden Sie

BootStrap

verwenden Sie AngularJs

verwenden Sie JavaConfig, um Spring zu konfigurieren

Diese Konfigurationsklasse wird verwendet, um die Datei web.xml zu ersetzen, hauptsächlich um den Listener zu registrieren. Die zugehörige Konfiguration des Webs

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("/");
    } 
}

umfasst zwei Klassen: AppConfig und WebMvcConfig

erbt WebMvcConfigurerAdapter

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

schreibt drei Methoden neu und konfiguriert Handler, Ressourcenabfang bzw. Konverter

Konfigurieren Sie hier die Thymeleaf-Vorlage

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

Verwendung von AngularJs

Projektstruktur

Konzentrieren wir uns auf die Erläuterung der Dinge hier. In IndexController springt die Seite standardmäßig zur Seite index.html :

Hier werden viele js-Dateien vorgestellt

<!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>

Hinweis

Dies ist der Ausführungsprozess von AngularJs: Von index.html Suchen Sie zunächst die Datei app.js und suchen Sie die entsprechende Datei controller.js entsprechend dem Pfad in der Datei app.js. Die Datei controller.js ruft Daten aus dem Hintergrund ab und gibt sie an die entsprechende HTML-Seite zurück zur Anzeige

Das Modul ist AngularJs Sehr wichtiges Konzept

Suchen Sie den entsprechenden Controller und die entsprechende Vorlage entsprechend dem Pfad

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

Verwenden Sie zum Senden den $http-Dienst eine Ajax-Anfrage an den Hintergrund, um Daten abzurufen

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

Verwenden Sie die entsprechenden Tags, um Daten zu empfangen und die Anzeige und andere Vorgänge zu steuern

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

3 🎜>

Die Schnittstelle ist etwas einfach, aber sie kann die Art der Probleme, die AngularJs mit sich bringt, nicht verbergen. Durch die praktische und schnelle Bedienung müssen wir

DOM-Operationen

nicht allzu viel Aufmerksamkeit schenken Die Einführung des Backends vom Frontend aus ist ebenfalls eine Innovation. Derzeit weiß ich nur wenig darüber und weiß nicht, wie man viele Konzepte und Verwendungen verwendet. Dieser Artikel ist eine gute Einführung in AngularJs.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So konvertieren Sie Tabellendaten in HTML in das Json-Format

Definieren mehrerer Klassenattribute in HTML Ungültig

Das obige ist der detaillierte Inhalt vonSo verwenden Sie SpringMvc+AngularJs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!