Steps to integrate Spring MVC and AngularJS
概要
の組み合わせ,,en,そしてAngularJSは、質の高いWebベースのアプリケーションを作成するための最も強力な組み合わせの1つです。,,en,これは動的なWebアプリケーションを構築する際に特に当てはまります。,,en,シングルページアプリケーション,,en,柔軟性と疎結合は、2つのクライアントコンポーネントとサーバーコンポーネントの間で一般的です。,,en,彼らはまた、Webアプリケーションを問題なく実行させる責任があります。,,en,この記事で後述するいくつかの課題がありますが、それによって2つのフレームワークによって提供される品質が低下することはありません。,,en,Spring MVCとは,,en,春,,en,Webベースのアプリケーションの開発を容易にするフレームワークです。,,en,他のフレームワークもありますが,,en,Spring MVCのユニークさは、その柔軟性とモジュール性にあります。,,en,コンポーネントが連携して高品質のWebアプリケーションを作成している間,,en Spring MVC and AngularJS is one of the most powerful combinations to create quality web-based applications. This is especially applicable in building dynamic web apps or Single Page Applications. Certain features like modularity, open source, flexibility and loose coupling are common between the two client and server components. They are also responsible for making the web application run without glitches. There are a few challenges that are mentioned later in this article but that does not reduce the quality offered by the two frameworks.
What is Spring MVC?
The Spring モデル・ビュー・コントローラ (MVC) is a framework that facilitates the development of web-based applications. While there are other frameworks as well, Spring MVC’s uniqueness is in its flexibility and modularity. While its components work together to produce a quality web application, 各コンポーネントは独立した疎結合として扱うことができます,,en,つまり、各コンポーネントは交換可能で、持ち込むことを選択したコンポーネントと互換性があります。,,en,論理は3種類ありますが,,en,入力ロジック,,en,ビジネスの論理,,en,とUIロジック - フレームワーク内,,en,すべて独立しており、疎結合,,en,Spring MVCの主なコンポーネントは以下の通りです。,,en,これはWebアプリケーションデータをカプセル化し、通常WebアプリケーションデータはPlain Old Java Objectを構成します。,,en,Viewコンポーネントはモデルデータをレンダリングし、結果として,,en,HTML出力を生成します,,en,クライアントブラウザは通常、ファイルを処理して解釈することができます。,,en,Viewコンポーネントによって生成されます。,,en,Controllerコンポーネントはユーザーの要求または入力を受け取ります,,en,同じ処理を行い、レンダリングのためにViewコンポーネントに渡します。,,en. This means that each component is replaceable and compatible with any component you choose to bring in. Though there are three types of logic — input logic, business logic, and UI logic – in the framework, all are independent and loosely coupled. The main components of the Spring MVC are described below:
- モデル: This encapsulates the web application data and usually the web application data comprises the Plain Old Java Object (POJO).
- ビュー: The View component renders the model data and as a result, it generates the HTML output. The client browser is generally able to process and interpret the HTML generated by the View component.
- コントローラ: The Controller component receives the user requests or inputs, processes the same and passes it to the View component for rendering.
Angular JSとは,,en,AngularJSはオープンソースです。,,en,フロントエンド開発者が使用できるフロントエンドJavaScriptフレームワーク,,en,Webページにインタラクティブ機能を追加する,,en,単一ページアプリケーションの開発,,en,スパ,,en,フロントエンド開発者にとって、さまざまな理由で困難な課題となっています。,,en,GoogleがオープンソースのフロントエンドWebアプリケーションフレームワークとして開発したのは、フロントエンド開発者が直面するこのような問題を解決することを目的としています。,,en,AngularJSはSPAの開発とテストの両方を可能にし、クライアントサイドのモデルビューコントローラのためのフレームワークを提供します。,,en,モデル - ビュー - ビューモデル,,en,MVVM,,en,アーキテクチャ,,en,リッチインターネットアプリケーションで一般的に使用されるコンポーネントと同様に,,en,人気のある製品であり、すでにNBCなどのいくつかの有名な組織によって使用されています,,en,ウォルフラムアルファ,,en,Intel,,en,ウォルグリーン,,en?
The AngularJS is an open source, front-end JavaScript framework that allows front end developers to use JavaScript to add interactivity to their webpages.
Developing the Single Page Applications (SPA) has been a challenging task for front-end developers for various reasons. AngularJS, developed as an open source front-end web application framework by Google aims to solve such problems faced by the front-end developers. AngularJS allows both development and testing of SPAs and provides a framework for the client-side model–view–controller (MVC) and model–view–view model (MVVM) architectures, as well as components that are commonly used in rich Internet applications.
AngularJS has been a popular product and is already being used by several reputed organizations such as NBC, Wolfram Alpha, Intel, Walgreens, スプリントとABCのニュース,,en,資料によると,,en,AngularJSはトップです,,en,GitHubで最もスターのある、またはお気に入りのプロジェクトの一覧,,en,見なければならない,,en,春のブートビデオチュートリアル,,en,統合の原則,,en,このセクションでは、Spring MVCとAngularJSの統合に向けた主な原則またはアプローチについて説明します。,,en,統合する前に,,en,目的は同じですが、Spring MVCとAngular JSの役割は異なることを理解する必要があります。,,en,しながら,,en,Webベースのアプリケーションのサーバー側で機能するフレームワークを提供します。,,en,AngularJSは、クライアントまたはアプリケーションのフロントエンドで作業します。,,en,主な原則は,,en,モジュール契約,,en,Spring MVCとAngularJSはどちらもモジュール性に基づいて開発されているため、個々のモジュールは疎結合で交換可能です。,,en. According to sources, AngularJS is in the top 100 of the most starred or favorite projects on GitHub.
Must watch – Spring boot video tutorials
Integration Principles
This section discusses the main principles or approach towards the integration of Spring MVC with AngularJS. Before integrating, it needs to be understood that the roles of both Spring MVC and AngularJS are different though the objective is the same. While the Spring MVC will provide a framework that works for the server-end of the web-based application, the AngularJS will be working on the client or front-end of the application. The main principles are:
· Modularity agreement
Both the Spring MVC and AngularJS are developed on the basis of modularity which means that individual modules are loosely coupled and replaceable. However, これは、モジュールがサーバーまたはクライアント側で更新または置換されるときに留意する必要があります。,,en,他のコンポーネントは変更と互換性があります,,en,さもなければそれはデータフローをひどく混乱させるでしょう,,en,ソフトウェア設計者および設計者は、モジュールの互換性について慎重に注意を払う必要があります。,,en,情報の流れ,,en,Spring MVCとAngular JSの両方のMVCフレームワークの互換性と同様に、情報フローはクライアント/サーバーモデルの成功にとって重要です。,,en,互換性がないとエラーが発生し、ユーザーエクスペリエンスは悲惨なものになる可能性があります。,,en,データ型のサポート,,en,サーバー側とクライアント側の両方のアーキテクチャーと設計は、同じデータタイプをサポートする必要があります。,,en,Spring MVCとAngularJSフレームワークの両方とも、さまざまなデータ型と互換性がある必要があります。,,en,それだけでなく,,en, the other component is compatible with the change, else it will severely disrupt the data flow. So, software architects and designers need to be vigilant and careful about modular compatibility.
· Information flow
Information flow is critical to the success of the client-server model as is the compatibility of the MVC frameworks of both the Spring MVC and AngularJS. Lack of compatibility will result in errors and the user experience can be disastrous.
· Data type Support
The architecture and design at both the server and client ends must support the same data types and for that, both the Spring MVC with AngularJS frameworks need to be compatible with various data types. Not only that, 新しいデータ型がシステムに追加されたとき,,en,互換性は上向きのモバイルである必要があります,,en,Spring MVCとAngular JSの統合,,en,Spring MVCとAngularJSを統合したサンプルアプリケーションを作成します,,en,最初のコンポーネントは下記のコントローラファイルです。,,en,サンプルコントローラファイル,,en,パッケージcom.techalpine.spring.controller,,en,import org.springframework.http.HttpStatus,,en,import org.springframework.web.bind.annotation.RequestMethod,,en,import org.springframework.web.bind.annotation.ResponseBody,,en,import org.springframework.web.bind.annotation.ResponseStatus,,en,パブリッククラスSpringDemoController,,en,@自動EmpDetails empDetails,,en,springcontent,,en,method = RequestMethod.GET,,en,=を生成する,,en,application / xml,,en,アプリケーション/ JSON,,en,@ResponseStatus,,es,HttpStatus.OK,,en,公開@ResponseBody,,en,EmpDetails getUser,,en,EmpDetails empDetails =新しいEmpDetails,,en,empDetails.setUserName,,en,demouser,,fr,empDetails.setEmailId,,sm,demouser@gmail.com,,en,empDetailsを返す,,en, the compatibility must be upward mobile.
Integrating Spring MVC with Angular JS (Code)
In this section, we will build a sample application integrating Spring MVC and AngularJS. The first component is a controller file described below.
Listing 1: Sample controller file
[コード]
package com.techalpine.spring.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.ResponseStatus;
@Controller
public class SpringDemoController {
@Autowired EmpDetails empDetails;
@RequestMapping(値=”/springcontent”,
method=RequestMethod.GET,produces={“application/xml”, “application/json”})
@ResponseStatus(HttpStatus.OK)
public @ResponseBody
EmpDetails getUser() {
EmpDetails empDetails = new EmpDetails();
empDetails.setUserName(“DemoUser”);
empDetails.setEmailId(“demouser@gmail.com”);
return empDetails;
}
}
[/コード]
以下は従業員詳細のためのPOJOクラスです,,en,セッターメソッドとゲッターメソッドがあります。,,en,サンプルPOJOクラス,,en,従業員の詳細,,en,import javax.xml.bind.annotation.XmlAttribute,,en,パブリッククラスEmpDetails,,en,プライベート文字列empName,,en,プライベート文字列emailId,,en,@XmlAttribute,,en,public String getEmpName,,en,empNameを返す,,en,public void setEmpName,,en,this.empName = empName,,en,public String getEmailId,,en,emailIdを返す,,en,public void setEmailId,,sm,文字列emailId,,en,this.emailId = emailId,,en,3番目のコンポーネントは、すべてのマッピングを含むディスパッチャサーブレットxmlファイルです。,,en,ディスパッチャサーブレット,,en,www.springframework.org/schema/mvc/spring-mvc.xsd,,en,com.techalpine.spring.controller,,en,empDetails,,en,com.techalpine.spring.controller.EmpDetails,,en,アノテーション駆動型コンテンツネゴシエーションマネージャ=,,en,コンテンツマネージャ,,en,org.springframework.web.accept.ContentNegotiationManagerFactoryBean,,en,favorPathExtension,,en,ignoreAcceptHeader,,en,defaultContentType,,en,useJaf,,hi,mediaTypes,,en,入力キー=,,en,ジョンソン,,en,jspViewResolver,,en. It will have setter and getter methods.
Listing 2: Sample POJO class (Employee details)
[コード]
package com.techalpine.spring.controller;
import javax.xml.bind.annotation.XmlAttribute;
import javax.xml.bind.annotation.XmlRootElement;
@XmlRootElement
public class EmpDetails {
private String empName;
private String emailId;
@XmlAttribute
public String getEmpName() {
return empName;
}
public void setEmpName(String empName) {
this.empName = empName;
}
@XmlAttribute
public String getEmailId() {
return emailId;
}
public void setEmailId(String emailId) {
this.emailId = emailId;
}
}
[/コード]
Now the third component is a dispatcher servlet xml file containing all the mappings.
Listing 3: Dispatcher servlet
[コード]
<?XMLバージョン=”1.0″ エンコーディング=”UTF-8″?>
<beans xmlns=”HTTP://www.springframework.org/schema/beans”
xmlns:mvc=”HTTP://www.springframework.org/schema/mvc”
xmlns:context=”HTTP://www.springframework.org/schema/context”
xmlns:xsi=”HTTP://www.w3.org/2001/XMLSchema-instance”
xsi:schemaLocation=”HTTP://www.springframework.org/schema/beans
HTTP://www.springframework.org/schema/beans/spring-beans-3.0.xsd
HTTP://www.springframework.org/schema/mvc
HTTP://www.springframework.org/schema/mvc/spring-mvc.xsd
HTTP://www.springframework.org/schema/context
HTTP://www.springframework.org/schema/context/spring-context-3.0.xsd”>
<context:component-scan base-package=”com.techalpine.spring.controller” />
<bean id=”empDetails” class=”com.techalpine.spring.controller.EmpDetails”/>
<mvc:annotation-driven content-negotiation-manager=”contentManager”/>
<bean id=”contentManager”
class=”org.springframework.web.accept.ContentNegotiationManagerFactoryBean”>
<プロパティ名=”favorPathExtension” 値=”真”/>
<プロパティ名=”ignoreAcceptHeader” 値=”真” />
<プロパティ名=”defaultContentType” 値=”text/html” />
<プロパティ名=”useJaf” 値=”false”/>
<プロパティ名=”mediaTypes”>
<map>
<entry key=”html” 値=”text/html” />
<entry key=”json” 値=”application/json” />
<entry key=”XML” 値=”application/xml” />
</map>
</財産>
</bean>
<bean id=”jspViewResolver”
class=”org.springframework.web.servlet.view.InternalResourceViewResolver”>
<プロパティ名=”prefix” 値=”/WEB-INF/jsp/” />
<プロパティ名=”suffix” 値=”.JSP” />
</bean>
</beans>
[/コード]
これはAngularJSページであるフロントエンドコンポーネントです,,en,AngularJSページのサンプル,,en,アプリのhtml,,tl,Spring MVCを使用したデモアプリケーション,,en,gularJS,,lv,ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js,,en,関数HelloAngular,,en,http.get,,en,「http,,en,SpringExamples / springcontent.json ’,,en,scope.emp = data,,en,div-controller =,,tl,こんにちは,,en,Spring MVCとAngularJSデモ,,en,従業員名,,en,emp.userName,,en,電子メールID,,en,emp.emailId,,en,今ブラウザでページを動かしなさい,,en,制限と問題,,en,主な課題は、単一の組織がクライアントとサーバーの両方を管理する責任を負うことです。,,en,Spring MVCとAngularJSはどちらも多用途のコンポーネントであり、さまざまなモジュールを受け入れることができます,,en,クライアントとサーバーがシームレスに対話するように、互換性のあるコンポーネントとソフトウェアおよび論理ユニットのバージョンを見つけて保守することは大きな課題です。,,en.
Listing 4: Sample AngularJS page
[コード]
<!doctype html>
<html ng-app>
<head>
<title>Demo Application Using Spring MVC & gularJS</title>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js”></script>
<script>
function HelloAngular($scope, $HTTP) {
$http.get(‘http://ローカルホスト:8080/SpringExamples/springcontent.json’).
success(function(data) {
$scope.emp = data;
});
}
</script>
</head>
<body>
<div ng-controller=”HelloAngular”>
<h2>Spring MVC And AngularJS Demo</h2>
<p>Employee Name : {{emp.userName}}</p>
<p>EMail Id : {{emp.emailId}}</p>
</div>
</body>
</html>
[/コード]
Now run the page in browser. Following will be the output.
Spring MVC And AngularJS Demo
Employee Name: DemoUser
EMail Id: demouser@gmail.com
Limitations and problems
The main challenge comes when a single organization is tasked with the responsibility of managing both the client and server. Both the Spring MVC and AngularJS are versatile components and capable of accepting various modules. Now, it is a huge challenge to find and maintain compatible components and versions of software and logical units so that the client and server interact seamlessly. しばしば, さまざまなコンポーネントが交換または更新されたとき,,en,新しいコンポーネントに互換性があることを確認するのは難しいかもしれません,,en,それにもかかわらず課題,,en,2つのフレームワークを組み合わせても、優れたWebアプリケーションを開発するための最良の方法が提供されます。,,en,ソフトウェア開発者の観点から,,en,オープンソースアプリケーションは、パワー満載の機能と同じように魅力的な提案です。,,en,春のバッチ,,en,techalpine.com/steps-to-integrate-spring-mvc-and-angularjs,,en, it may be difficult to make sure that the new component is compatible.
You will also like to read – Interesting articles on Spring framework
結論
Challenges notwithstanding, the combination of the two frameworks still provides the best way to develop great web apps. From the perspective of software developers, the open source applications are an irresistible proposition as are the power-packed features.
