SpringMVC簡單整合Angular2的示例
本文介紹了SpringMVC簡單整合Angular2的示例,分享給大家,具體如下:
angular使用的是官方的快速開始的例子

將文件全部拷貝到springmvc的項目中,拷貝過程中可能出現(xiàn)文件路徑太長而失敗,那就先對整個文件壓縮,然后拷貝壓縮過后的文件,然后解壓縮即可。目錄結(jié)構(gòu)如下,我是拷貝到angular目錄下的

spring配置文件設(shè)置路徑

然后再html頁面中如angular官方所示,引入文件

這里面需要對這些文件的路徑進(jìn)行配置
主要是systemjs.config文件中需要修改兩個地方

這樣項目就可以運(yùn)行了
但是這樣能運(yùn)行,是因為我們已經(jīng)把Typescript編譯成js文件了,我們不可能每次修改ts文件,然后編譯一下,再運(yùn)行項目,所以我們需要自動編譯Typescript為javascript
由于我使用的idea編輯器,有自帶的編輯轉(zhuǎn)換工具,所以只需要進(jìn)行簡單的配置即可(前提是本機(jī)安裝了nodejs與Typescript依賴)
File-》Settings-》Languages&Frameworks-》node.js and NPM 選擇本機(jī)已經(jīng)安裝的node.js

File-》Settings-》Languages&Frameworks-》TypeScript

typescript version最好選擇本機(jī)下載的npm的typescript依賴,選擇lib文件夾即可
-p web\WEB-INF\angular 這個命令是表示編譯制定的目錄,若果沒有,則搜索項目根路徑,由于我們放在angular目錄中,所以需要進(jìn)行設(shè)置
做到這一步就可以在編輯器里進(jìn)行編譯了,但是還做不到自動編譯
我們熱部署到tomcat的步驟,一般都是make,然后打包,然后啟動項目,做到自動編譯,只需要在make之前,對Typescript進(jìn)行編譯即可

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
AngulerJS學(xué)習(xí)之按需動態(tài)加載文件
本篇文章主要介紹了AngulerJS學(xué)習(xí)之按需動態(tài)加載文件,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
Angularjs注入攔截器實現(xiàn)Loading效果
angularjs作為一個全ajax的框架,對于請求,如果頁面上不做任何操作的話,在結(jié)果反回來之前,頁面是沒有任何響應(yīng)的,不像普通的HTTP請求,會有進(jìn)度條之類2015-12-12
Angular8基礎(chǔ)應(yīng)用之表單及其驗證
這篇文章主要給大家介紹了關(guān)于Angular8基礎(chǔ)應(yīng)用之表單及其驗證的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Angular8具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
angular4自定義表單控件[(ngModel)]的實現(xiàn)
這篇文章主要介紹了angular4自定義表單控件[(ngModel)]的實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
Angular如何在應(yīng)用初始化時運(yùn)行代碼詳解
這篇文章主要給大家介紹了關(guān)于Angular如何在應(yīng)用初始化時運(yùn)行代碼的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-06-06

