SpringMVC簡(jiǎn)單整合Angular2的示例
本文介紹了SpringMVC簡(jiǎn)單整合Angular2的示例，分享給大家，具體如下：
angular使用的是官方的快速開始的例子
將文件全部拷貝到springmvc的項(xiàng)目中，拷貝過(guò)程中可能出現(xiàn)文件路徑太長(zhǎng)而失敗，那就先對(duì)整個(gè)文件壓縮，然后拷貝壓縮過(guò)后的文件，然后解壓縮即可。目錄結(jié)構(gòu)如下，我是拷貝到angular目錄下的
spring配置文件設(shè)置路徑
然后再html頁(yè)面中如angular官方所示，引入文件
這里面需要對(duì)這些文件的路徑進(jìn)行配置
主要是systemjs.config文件中需要修改兩個(gè)地方
這樣項(xiàng)目就可以運(yùn)行了
但是這樣能運(yùn)行，是因?yàn)槲覀円呀?jīng)把Typescript編譯成js文件了，我們不可能每次修改ts文件，然后編譯一下，再運(yùn)行項(xiàng)目，所以我們需要自動(dòng)編譯Typescript為javascript
由于我使用的idea編輯器，有自帶的編輯轉(zhuǎn)換工具，所以只需要進(jìn)行簡(jiǎ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 這個(gè)命令是表示編譯制定的目錄，若果沒(méi)有，則搜索項(xiàng)目根路徑，由于我們放在angular目錄中，所以需要進(jìn)行設(shè)置
做到這一步就可以在編輯器里進(jìn)行編譯了，但是還做不到自動(dòng)編譯
我們熱部署到tomcat的步驟，一般都是make，然后打包，然后啟動(dòng)項(xiàng)目，做到自動(dòng)編譯，只需要在make之前，對(duì)Typescript進(jìn)行編譯即可
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
AngulerJS學(xué)習(xí)之按需動(dòng)態(tài)加載文件
本篇文章主要介紹了AngulerJS學(xué)習(xí)之按需動(dòng)態(tài)加載文件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
Angularjs注入攔截器實(shí)現(xiàn)Loading效果
angularjs作為一個(gè)全ajax的框架，對(duì)于請(qǐng)求，如果頁(yè)面上不做任何操作的話，在結(jié)果反回來(lái)之前，頁(yè)面是沒(méi)有任何響應(yīng)的，不像普通的HTTP請(qǐng)求，會(huì)有進(jìn)度條之類2015-12-12
我們?cè)趹?yīng)用的頁(yè)面或者組件需要加載數(shù)據(jù)時(shí)，瀏覽器和angular渲染頁(yè)面都需要消耗一定的時(shí)間。這里的間隔可能很小，甚至讓人感覺不到區(qū)別；但也可能很長(zhǎng)，這樣會(huì)導(dǎo)致讓我們的用戶看到了沒(méi)有被渲染過(guò)的頁(yè)面。本文將介紹Angular.js中處理頁(yè)面閃爍的方法。2017-03-03
AngularJS中的指令實(shí)踐開發(fā)指南(二)
這篇文章主要介紹了AngularJS中的指令實(shí)踐指南(二)的相關(guān)資料,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了Angular如何由模板生成DOM樹的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
AngularJS實(shí)現(xiàn)的回到頂部指令功能實(shí)例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的回到頂部指令功能,結(jié)合實(shí)例形式分析了AngularJS返回到頂部功能的具體步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了Angular4編程之表單響應(yīng)功能,結(jié)合實(shí)例形式分析了Angular4表單響應(yīng)功能的具體實(shí)現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
Angular8基礎(chǔ)應(yīng)用之表單及其驗(yàn)證
這篇文章主要給大家介紹了關(guān)于Angular8基礎(chǔ)應(yīng)用之表單及其驗(yàn)證的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Angular8具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08![angular4自定義表單控件[(ngModel)]的實(shí)現(xiàn)](http://img.jbzj.com/images/xgimg/bcimg8.png)
angular4自定義表單控件[(ngModel)]的實(shí)現(xiàn)
這篇文章主要介紹了angular4自定義表單控件[(ngModel)]的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
Angular如何在應(yīng)用初始化時(shí)運(yùn)行代碼詳解
這篇文章主要給大家介紹了關(guān)于Angular如何在應(yīng)用初始化時(shí)運(yùn)行代碼的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-06-06