angular2+node.js express打包部署的實(shí)戰(zhàn)
Angular2我自己還在摸索學(xué)習(xí)中，本文介紹了angular2+node.js express打包部署的實(shí)戰(zhàn)，分享給大家，也給自己留個(gè)筆記
angular是客戶端js,Node.js 是服務(wù)端JS,建立SPA 網(wǎng)站需要把這兩者統(tǒng)一到一起。
1、angular2項(xiàng)目創(chuàng)建,使用angular-cli
ng new mypos
2、使用express命令行工具創(chuàng)建express項(xiàng)目。
express --view=hbs
3、angular2 中 需要引用到第三方庫(kù) 例如 jQuery,bootstrape,
index.html中需要添加應(yīng)用，然后文件需要拷貝到assets目錄
<linkrel="stylesheet"type="text/css"href="/assets/primeng/resources/themes/bootstrap/theme.css" rel="external nofollow" /> <linkrel="stylesheet"type="text/css"href="/assets/primeng/resources/primeng.min.css" rel="external nofollow" /> <linkrel="stylesheet"type="text/css"href="/assets/primeng/resources/font-awesome.min.css" rel="external nofollow" /> <scriptsrc="/assets/jquery.min.js"></script> <linktype="text/css"href="/assets/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet"> <scriptsrc="/assets/bootstrap/js/bootstrap.min.js"></script>
4、修改angular-cli.json //指定為express的靜態(tài)文件目錄。
"outDir":"express/public/"
5、打包
ng build --prod
6、進(jìn)入express運(yùn)行目錄
npm start
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Angular實(shí)現(xiàn)的簡(jiǎn)單定時(shí)器功能示例
這篇文章主要介紹了Angular實(shí)現(xiàn)的簡(jiǎn)單定時(shí)器功能,結(jié)合實(shí)例形式分析了AngularJS定時(shí)器功能的簡(jiǎn)單實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下2017-12-12
AngularJS實(shí)現(xiàn)按鈕提示與點(diǎn)擊變色效果
這篇文章給大家介紹了如何利用AngularJS實(shí)現(xiàn)按鈕提示與點(diǎn)擊變色的效果，文中提供了實(shí)例代碼，對(duì)大家學(xué)習(xí)AngularJS具有一定的參考借鑒價(jià)值，下面來(lái)一起看看吧。2016-09-09
Angular5中狀態(tài)管理的實(shí)現(xiàn)
這篇文章主要介紹了Angular5中狀態(tài)管理的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
ui-router中使用ocLazyLoad和resolve的具體方法
這篇文章主要介紹了ui-router中使用ocLazyLoad和resolve的具體方法，詳細(xì)的介紹了ocLazyLoad和resolve的具體用法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-10-10
今天小編就為大家分享一篇angularJS1 url中攜帶參數(shù)的獲取方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
詳解基于Bootstrap+angular的一個(gè)豆瓣電影app
本篇文章主要介紹了基于Bootstrap+angular的一個(gè)豆瓣電影app ，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-06-06
簡(jiǎn)單談?wù)剅equire模塊化jquery和angular的問(wèn)題
下面小編就為大家?guī)?lái)一篇簡(jiǎn)單談?wù)剅equire模塊化jquery和angular的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
AngularJS自定義過(guò)濾器用法經(jīng)典實(shí)例總結(jié)
這篇文章主要介紹了AngularJS自定義過(guò)濾器用法,結(jié)合實(shí)例形式總結(jié)分析了AngularJS自定義過(guò)濾器進(jìn)行包含、替換、篩選、過(guò)濾、排序等操作相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2018-05-05
簡(jiǎn)單說(shuō)說(shuō)angular.json文件的使用
這篇文章主要介紹了簡(jiǎn)單說(shuō)說(shuō)angular.json文件的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
Angularjs之如何在跨域請(qǐng)求中傳輸Cookie的方法
跨域傳輸Cookie是需要后臺(tái)和前臺(tái)同時(shí)做相關(guān)處理才能解決的，這篇文章主要介紹了Angularjs之如何在跨域請(qǐng)求中傳輸Cookie的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06