ホームページ > 記事 > ウェブフロントエンド > SpringMvc+AngularJsの使い方

SpringMvc+AngularJsの使い方

php中世界最好的语言オリジナル: 2018-03-06 16:23:531523ブラウズ

今回はSpringMvc+AngularJsの使い方と、SpringMvc+AngularJsを使う際の注意点についてお届けします。

フロントエンドフレームワークは細分化されており、フレームワーク自体も日々変化しています。ただし、jQuery などの優れたフレームワークはまだたくさんありますが、jQuery 独自のクラスライブラリの多くは比較的複雑です。両方のフロントエンドフレームワークにはそれぞれ適切なシナリオがあります。この記事では主に AngularJs と SpringMvc の統合について説明します。コードは GitHub からダウンロードして見て、統合についての私の理解を書きました。

1. AngularJs を使用する理由

2. SpringMvc と AngularJs を統合して使用する

1. AngularJs を使用する理由

AngularJS は開発者に高いレベルの抽象化を提供することでアプリケーションを簡素化します。他の抽象化手法と同様に、ある程度の柔軟性が失われます。言い換えれば、すべてのアプリケーションが AngularJS に適しているわけではありません。 AngularJS は主に CRUD アプリケーションの構築に関係します。幸いなことに、WEB アプリケーションの少なくとも 90% は CRUD アプリケーションです。 G 2. Springmvc と AngularJS の統合

を使用プロジェクト構造

JavaConfig を使用して Spring

SpringMvc+AngularJsの使い方を使用 JSP の代わりに Thymeleaf をテンプレートとして使用

を使用

Bootstrap

を使用 AngularJS を使用Spring を設定するには ig

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.Handler、リソースインターセプト、および Converter をそれぞれ設定するために使用されます

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

Thymeleaf テンプレートはここで設定されます

AngularJs の使用方法

プロジェクト構造

IndexController では、デフォルトでページがインデックスにジャンプします。 HTML ページ、index.html ページは次のようになります。

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

ここでは多くの js ファイルが紹介されています

注

これは AngularJs の実行プロセスです。index.html から開始して、app.js ファイルを見つけ、app.js ファイルからのパスに従って対応するcontroller.js ファイルを見つけます。controller.js ファイルバックグラウンドからデータを取得し、対応する HTML ページに返して表示します

SpringMvc+AngularJsの使い方モジュールは angularJs において非常に重要な概念です

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

パスに従って対応するコントローラーとテンプレートテンプレートを見つけます

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

$http サービスを使用して送信しますデータを取得するためにバックグラウンドに ajax リクエストを送信します

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

対応するタグを使用してデータを受信し、表示やその他の操作を制御します

3. 概要

インターフェース少しシンプルですが、便利で高速な機能を隠すことはできませんAngularJs によってもたらされる操作。

DOM 操作

にあまり注意を払う必要はありません。フロントエンドからバックエンドを導入するというアイデアも、現時点では 1 つだけ知っています。多くの概念について少し説明しますが、この記事は AngularJ の入門書です。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

SpringMvc+AngularJsの使い方関連書籍:

HTML のテーブルデータを Json 形式に変換する方法

HTML での複数のクラス属性の定義は無効です

以上がSpringMvc+AngularJsの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Jenkins+Node.js の継続的統合次の記事：Jenkins+Node.js の継続的統合

続きを見る