1. 首頁
  2. 問答
  3. AngularJS + sails.js

AngularJS + sails.js

2014-02-21 40 views
49

我正在開發一個應用程序，可以利用sails.js爲後端和AngularJS爲前端。我想，我將創建使用角應用文書上士棱角發電機https://github.com/yeoman/generator-angular，有一次我與前端邏輯做了，我會用創建帆的應用程序，AngularJS + sails.js

  1. NPM安裝-g帆
  2. 帆新應用程序

然後我將所有的AngularJS文件轉移到Sails文件夾。

但事情是AngularJS創建了一個像這樣的文件夾層次結構https://github.com/rishy/angular-jade-stylus-seed，並且在運行「grunt server」時會創建一個包含最終生產版本的「dist」文件夾。

另一方面，在sails應用程序的「sails new app」文件夾層次結構之後。

  • API
    • 適配器/
    • 控制器/
    • 型號/
    • 政策/
    • 服務/
  • 資產
      個
    • 圖像/
    • JS/
    • 風格/
    • 的favicon.ico
    • 的robots.txt
  • 配置/
  • node_modules/
  • 意見
    • 家/
    • 403.ejs
    • 404.ejs
    • 500.ejs
    • layout.ejs
  • Gruntfile.js
  • app.js
  • 的package.json

所以，我的問題是：

  1. 現在，我該如何將我的Angular文件轉移到這個sails目錄，我該如何構建它？
  2. 由於sails使用「帆升降機」來啓動服務器，角度使用「grunt服務器」，我應該使用哪一個爲sailsJs + AngularJs應用啓動服務器，以及創建的「dist」文件夾如何在AngularJS之後？
  3. 我必須在Gruntfile.js中做什麼更改，因爲它現在應該包含來自Angular和Sails的代碼？
  4. 我應該在哪裏保留我的不同視圖和樣式文件，以及如何訪問Angular或Sails的表單？

我覺得很多人都面臨着類似的問題，因爲AngularJS和SailsJs目前都風靡一時。應該有一個強大的樣板來創建一個AngularJS + SailsJS應用程序，這個應用程序現在可惜了。

來源

2014-02-21 rishy

+0

BT任務配置W：你有沒有試過https://github.com/diegopamio/angular-sails-bind？我剛剛向全世界發佈了它，它可以幫助你（但不是與結構有關）。 –

回答

56

由於Sails是純粹的後端框架，而Angular純粹是前端，所以它們可以很好地協同工作。它可以得到一個有點混亂，當你把角產生了進去，但這裏是基本的步驟，如果你開始與Angular Seed應用和帆v0.10：

  1. 創建sails new myApp
    2. 新帆的應用
  2. 全殲​​文件夾
  3. 複製內容的角度種子的內容app文件夾放到​​
  4. 的myapp/views/layout.ejs內容與那些角種子app/index.html文件替換
  5. 削減所有非腳本標記的內容從layout.ejs文件（一切<body>標記之後和第一<script>標記之前，並使用它<body>標籤後更換內容的myApp/views/homepage.ejs
  6. 將<%-body%>在layout.ejs

然後，您可以使用sails lift啓動服務器，您將看到http://localhost:1337的Angular應用程序。我的put this on Github作爲參考。

使用此方法，您不需要對Gruntfile執行任何操作，也不會調用grunt server - 這僅適用於測試服務器的Angular應用程序，您將使用Sails替換它。 Sails grunt-sync任務仍然會受益，它會在您的前端資產發生變化時監視和同步。

如果您確實想使用Yeoman角度生成器，可以嘗試直接在您的Sails應用程序的assets文件夾中生成應用程序，並使用該文件夾內的生成器命令。我之前沒有使用它，所以我不知道dist文件夾的用途，但它似乎安裝了所有它安裝的節點模塊以支持測試Web服務器（這也是您不需要的，因爲你有帆）和測試套件（這總是很好）。我能看到的唯一問題是如果您需要Yeoman生成的Gruntfile中的一些任務。 Sails處理較少的編譯和CSS縮小（在生產模式下），但它對Jade或Stylus沒有任何作用，所以如果你真的需要它們，你必須將這些任務添加到Sails Gruntfile中。

來源

2014-02-22 08:25:07 sgress454

+0

Yeoman創建「dist」文件夾作爲應用程序的最終生產版本，在這種情況下爲Angular應用程序。所以，它包含類似於「Angular-Seed」的「app」目錄的文件。唯一不同的是，由於「dist」是生產版本，所有文件都已經通過縮小。所以，我猜想用Yeoman單獨開發我的前端邏輯會更合適，然後最後將「app」位置的dist目錄添加到sails/assets /目錄中。通過這種方式，我也可以使用Jade，Stylus，Coffee和Karma進行測試。你對此有何看法？ – rishy

+4

如果您正在創建一個單頁面應用程序，並且您只是將Sails用作API後端（即不提供大量視圖），那麼將Angular和Sails項目完全保留是完全正確的分離，甚至同時運行Sails和Angular測試服務器。或者，如果它不是單個頁面，但仍然需要所有的Angular generator生成器聲音和哨聲，那麼可以嘗試將Angular app目錄符號鏈接到Sails assets目錄中。我最好的建議是始終讓您的開發環境儘可能地類似於您最終部署的樣子！ – sgress454

+0

這一切聽起來都不必要的複雜和更多的工作，如果你對它有好處，但對於像我這樣的人來說，這很好。它就像歡迎錯誤，頭痛，喪失創造力和動力。 –

12

您的問題正是我爲什麼創建賽龍的原因：https://github.com/ryancp/sailng 這是一個使用最新的Sails 0.10.0-rc5的示例/樣板文件應用程序。

它還演示瞭如何使用Sails中的socket.io爲客戶端提供實時更新，而無需Ajax輪詢。

克隆它並按照說明更好地瞭解如何一起使用Sails和Angular。

來源

2014-04-10 02:26:07 Ryan

+1

+1有一個問題，需要哪個版本的Angular？運行涼亭安裝提供了幾個選項 –

+0

似乎目前不支持角1.3，選擇角1.2.x – octavian

4

我還爲Sails.js + Angular做了樣板「樣板/示例」應用程序。在我的解決方案中，它們分離到後端和前端（兩臺服務器）。

我的解決方案還演示了套接字通信+用戶間數據內的實時更新。

隨時嘗試一下。 https://github.com/tarlepp/angular-sailsjs-boilerplate

來源

2015-05-29 22:32:08 tarlepp

0

我有類似的用例。我用Yeoman生成了angularjs的項目結構。在這種情況下，我的解決方案是：

  1. 使用'grunt serve'將angularjs單頁應用程序生成爲縮小版本，並且所有應該位於'dist'文件夾下。

  2. 在sails.js項目routes.js，取消該配置代碼的觀點：

    '/'：{ 視圖： '主頁' }

  3. 下帆刪除所有文件.js視圖和資產文件夾。但是請確保您在刪除所有內容之前不需要任何資產文件夾中的文件。

  4. 將minified angularjs網站複製並粘貼到資產文件夾。

  5. 開始sails.js（帆升降），你可以在本地主機瀏覽您的網站的角度：1337

Sails.js現在也簡單提到這個方法http://sailsjs.org/documentation/concepts/views

來源

2015-08-16 08:06:34 afterglowlee

0

必須配置默認任務的角度DIST文件夾複製到的.tmp

請參閱本Sails Angular項目

來源

2017-07-27 12:43:17 Janka

相關問題

 相關問題