搜尋

首頁 >web前端 >js教程 >SpringMvc+AngularJs應如何使用

SpringMvc+AngularJs應如何使用

php中世界最好的语言
php中世界最好的语言原創
2018-03-06 16:23:531591瀏覽

這次給大家帶來SpringMvc+AngularJs應如何使用，SpringMvc+AngularJs使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

前端框架分段繁雜，框架本身也是日新月異，但是不免還是有很多好的框架，例如jQuery，但是jQuery本身的很多類庫有比較雜亂，AngularJs和jQuery都作為前端框架，都有自己適合的場景，本文主要講解AngularJs和SpringMvc的整合，程式碼來自於GitHub，自己下載下來看了一下，寫點自己對於整合的理解。

目錄

1.為什麼使用AngularJs

2.SpringMvc和AngularJs整合使用

3.總​​結

一、為什麼要使用AngulaJs

AngularJS透過為開發者呈現一個更高層次的抽象來簡化應用的開發。如同其他的抽象技術一樣，這也會損失一部分彈性。換句話說，並不是所有的應用都適合用AngularJS來做。 AngularJS主要考慮的是建構CRUD應用。幸運的是，至少90%的WEB應用都是CRUD應用。

二、SpringMvc和AngularJs整合使用

專案結構

SpringMvc+AngularJs應如何使用

使用JavaConfig配置Spring

使用thymeleaf作為模板取代JSP

使用BootStrap

使用AngularJs

使用JavaConfig配置Spring

SpringMvc+AngularJs應如何使用

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

這個設定類別是用來取代web.xml檔案的，主要是註冊監聽器，Web的相關設定

包含了AppConfig和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);
    }
}

繼承了WebMvcConfigurerAdapter

重寫了三個方法，分別配置了Handler，資源攔截和Converter

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

這裡配置Thymeleaf模板

AngularJs的使用

項目結構

SpringMvc+AngularJs應如何使用

重點解釋下這裡面的東西，在IndexController中預設會將頁面跳到index.html頁面，index.html頁面時這樣的：

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

這裡引入了許多js檔案

注意

這是AngularJs的執行流程：從index.html開始，找到app.js文件，從app.js檔案中根據路徑找到對應的controller.js文件，controller.js檔案將從後台獲得資料返回到對應的html頁面進行展示

模組是angularJs很重要的概念

var AngularSpringApp = {};
var App = angular.module(&#39;AngularSpringApp&#39;, [&#39;AngularSpringApp.filters&#39;, &#39;AngularSpringApp.services&#39;, &#39;AngularSpringApp.directives&#39;]);// Declare app level module which depends on filters, and servicesApp.config([&#39;$routeProvider&#39;, function ($routeProvider) {
    $routeProvider.when(&#39;/cars&#39;, {        templateUrl: &#39;cars/layout&#39;,        controller: CarController
    });
    $routeProvider.when(&#39;/trains&#39;, {        templateUrl: &#39;trains/layout&#39;,        controller: TrainController
    });  
    $routeProvider.when(&#39;/railwaystations&#39;, {        templateUrl: &#39;railwaystations/layout&#39;,        controller: RailwayStationController
    });
    $routeProvider.otherwise({redirectTo: &#39;/cars&#39;});
}]);

根據路徑找到相應的controller和template模板

var CarController = function($scope, $http) {
    $scope.fetchCarsList = function() {
        $http.get(&#39;cars/carlist.json&#39;).success(function(carList){
            $scope.cars = carList;
        });
    };
    $scope.addNewCar = function(newCar) {
        $http.post(&#39;cars/addCar/&#39; + newCar).success(function() {
            $scope.fetchCarsList();
        });
        $scope.carName = &#39;&#39;;
    };
    $scope.removeCar = function(car) {
        $http.delete(&#39;cars/removeCar/&#39; + car).success(function() {
            $scope.fetchCarsList();
        });
    };
    $scope.removeAllCars = function() {
        $http.delete(&#39;cars/removeAllCars&#39;).success(function() {
            $scope.fetchCarsList();
        });
    };
    $scope.fetchCarsList();
};

使用$http服務向後台發送ajax請求，獲取數據

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

使用相應的標籤接收數據和控制顯示等操作

SpringMvc+AngularJs應如何使用

三、 總結

介面有點樸素,但是無法掩飾AngularJs帶來的這種方便快捷的操作，我們不需要在過度關注 DOM操作，這種從前端引入後端的想法也是一次創新，目前我也只是懂點皮毛，很多理念和用法也不會使用，這篇文章算是給AngularJs開個頭。

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

html裡table表資料如何轉換為Json格式

HTML定義多個class屬性無效

以上是SpringMvc+AngularJs應如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：Jenkins+Node.js的持續集成下一篇：Jenkins+Node.js的持續集成

相關文章

看更多