2015-09-24 48 views
6

我目前有一個基礎「選項卡」離子/角應用程序。如何將Node.js實現爲Ionic/Angular應用程序?

ionic start testproject tabs

我已經先行一步,做一個npm install得到一些在項目目錄中的基本節點模塊。

我對如何一起使用Angular和Express以及如何設置節點/服務器端的事情有些困惑。我試着看了一大堆教程,發現自己在混音中迷失了一些,所以我希望有人會擁有一些可能會幫助我朝正確方向發展的資源。

因爲Angular和Express都做MVC/MV * - 它開始變得非常混亂,至於什麼是什麼。我很困惑設置以及如何讓他們一起談話。

請讓我知道我可以給予什麼其他信息,因爲我不知道還有什麼。 (該項目是相當裸露的骨頭。)

非常感謝你!

+0

有大量的MEAN堆棧教程;從其中一個開始。如果你沒有做任何需要長期持久性的事情,你可以跳過M部分。 –

回答

8

標準角Web App的

當建立一個MEAN web應用程序,你應該通過創建一個快捷發電機的Express應用程序啓動這些命令(假設你有節點和快遞安裝全球)

$表達MYAPP

構建應用程序

$ CD MYAPP

進入應用

$ NPM安裝

package.json文件安裝依賴

文件結構

. 
├── app.js 
├── bin 
│   └── www 
├── models 
│   └── home.js 
├── node_modules 
├── package.json 
├── public // your Angular app goes here 
├── README.md 
├── routes 
│   ├── home.js 
│   └── users.js 
└── views 

所以上面我們可以看到應用程序的基本結構。運行Express生成器後應該有類似的東西。您將您的角度應用程序,並把它納入公共文件夾,然後運行服務器

$ DEBUG = MYAPP NPM啓動

離子

有離子程序,你想要的應用程序一個電話,有人會,因爲你不需要將應用程序添加到公用文件夾在這裏。您將使用Express來創建API以供您的應用程序調用。您可以創建一個server.js文件的簡單網頁API,您可以用

$節點運行server.js

在你的角度工廠及服務您可以直接$http調用您的API。

更新

目前工作的一個樣板分割回,平均應用的前端,這意味着你將能夠起到完全相​​同的後端你的Android應用,iOS應用和Web應用程序。

它的工作正在進行中,但您可以隨時查看想法或開始自己獨立的前後端MEAN堆棧。 https://github.com/joeLloyd/MEANBoilerPlate

8

看起來你被術語MVC及其含義所困惑。 MVC(模型,視圖,控制器)只是應用程序結構的一般模式。

當寫有棱有角,你實際上是寫兩個應用程序(在大多數情況下)的Web應用程序:

您的前端應用程序,在瀏覽器中運行,使用HTML的一個,JS和CSS(和框架,如角度在他們上面),向用戶顯示數據並允許他們與之交互。後端應用程序,即在您的服務器上運行的應用程序(例如在節點或Spring或RubyOnRails上),存儲數據,提供服務並計算業務邏輯。

這兩個應用程序都可以獨立使用MVC模式進行結構化。但是這並不影響它們如何一起工作 - 它們完全獨立並使用HTTP協議進行通信(在前端使用AJAX)。因此,對於角度前端應用程序,後端應用程序是否在節點上運行或其他任何內容都無關緊要。

只是爲了解釋的名稱INT帽子背景:

節點是一個後臺框架,運行服務器,做業務邏輯和談話的數據庫。 Express是Node的一個模塊,可以更輕鬆地在Node中編寫HTTP API。

Ionic和Angular是前端框架。它們允許您更輕鬆地創建前端應用程序。

我希望有一點幫助,它是一個非常大的主題,它不可能在合理大小的StackOverflow答案中解釋所有的問題。

+1

非常感謝。我希望我能接受這兩個答案,因爲這真的幫助我從根本上理解了我的一個誤解 - 認爲這是一個單一的「應用程序」。喬·勞埃德的回答幫助我理解了文件結構,這將是未來使用的一個很好的參考。我之前已經構建了一個Mongo-Express-Node應用程序,但是我缺乏這兩個前端和後端應用程序之間的根本區別,這真的有助於澄清! (我最終接受了基於誰的代表人數較少的答案,因爲他們同樣有幫助。) – Lindsay

相關問題