SpringMvc+AngularJs를 사용하는 방법-JS 튜토리얼-php.cn

이번에는 SpringMvc+AngularJs 사용법과 SpringMvc+AngularJs 사용 시 주의사항에 대해 알려드리겠습니다.

프런트엔드 프레임워크는 세분화되고 복잡하며 프레임워크 자체는 날이 갈수록 변하고 있습니다. 그러나 jQuery와 같은 좋은 프레임워크는 여전히 많이 있지만 jQuery의 자체 클래스 라이브러리 중 상당수는 상대적으로 지저분합니다. 이 기사에서는 주로 AngularJs와 SpringMvc의 통합을 설명합니다. 코드는 GitHub에서 다운로드하여 살펴보고 통합에 대한 자신의 이해를 기록합니다.

1. AngularJ를 사용하는 이유

2. SpringMvc와 AngularJs를 통합하여 사용하는 이유

1. AngulaJs를 사용하는 이유

AngularJS는 개발자 개발에 더 높은 수준의 추상화를 제공하여 애플리케이션을 단순화합니다. 다른 추상화 기술과 마찬가지로 일부 유연성이 손실됩니다. 즉, 모든 애플리케이션이 AngularJS에 적합한 것은 아닙니다. AngularJS는 주로 CRUD 애플리케이션 구축과 관련이 있습니다. 다행스럽게도 WEB 애플리케이션의 최소 90%는 CRUD 애플리케이션입니다. G 2. Springmvc와 AngularJS 통합 사용

프로젝트 구조

JavaConfig를 사용하여 Spring 구성

SpringMvc+AngularJs를 사용하는 방법 JSP 대신 Thymeleaf를 템플릿으로 사용

Bootstrap

사용 AngularJS JavaConfig를 사용하여 Spring 구성

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

로그인 후 복사

이 구성 클래스는 웹을 대체하는 데 사용됩니다. 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에서 페이지는 기본적으로 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를 사용하는 방법 모듈은 AngleJs에서 매우 중요한 개념입니다

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

에 너무 많은 관심을 기울일 필요가 없습니다. 프론트엔드에서 백엔드를 도입한다는 아이디어도 현재로서는 혁신입니다. 어떻게 사용하는지, 어떻게 사용하는지 잘 모르겠습니다. 이 글은 AngularJ의 시작입니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

SpringMvc+AngularJs를 사용하는 방법 관련 읽기: