web-dev-qa-db-ja.com

AngularJS + sails.js

バックエンドにはsails.jsを、フロントエンドにはAngularJSを利用できるアプリを開発しています。 Angular Yeoman-angular generator https://github.com/yeoman/generator-angular 、フロントエンドロジックが完了したら、次を使用してセールアプリを作成します。

  1. npm install -g sails
  2. 帆の新しいアプリ

そして、すべてのAngularJSファイルをSailsフォルダーに転送します。

ただし、AngularJSが作成するのは、次のようなフォルダー階層を作成することです https://github.com/rishy/angular-jade-stylus-seed 以降「grunt server」を実行すると、最終製品版を含む「dist」フォルダーが作成されます。

一方、「sails new app」の後には、sailsアプリのフォルダー階層が似ています。

  • api
    • アダプター/
    • コントローラー/
    • モデル/
    • ポリシー/
    • サービス/
  • 資産
    • 画像/
    • js /
    • スタイル/
    • favicon.ico
    • robots.txt
  • config /
  • node_modules /
  • ビュー
    • ホーム/
    • 403.ejs
    • 404.ejs
    • 500.ejs
    • layout.ejs
  • Gruntfile.js
  • app.js
  • package.JSON

だから、私の質問は：

  1. ここで、Angularファイルをこのsailsディレクトリに転送し、どのように構成すればよいですか？
  2. Sailsは「sails lift」を使用してサーバーを起動し、angularは「grunt server」を使用します。これは、sailsJs + AngularJsアプリのサーバーを起動するときに使用します。 AngularJSの後に作成される「dist」フォルダ
  3. Gruntfile.jsには、AngularとSailsの両方のコードが含まれているはずなので、どのような変更を加える必要がありますか？
  4. さまざまなビューとスタイルファイルをどこに保存し、それらのフォームにどのようにアクセスする必要がありますかAngularまたはSailsから？

現在、AngularJSとSailsJsが大流行しているため、多くの人がこの同様の問題に直面していると思います。 AngularJS + SailsJSアプリを作成するための堅牢なボイラープレートが必要ですが、残念ながら今はありません。

javascriptnode.jsangularjsyeomansails.js
50
rishy

Sailsは純粋にバックエンドのフレームワークであり、Angularは純粋にフロントエンドであるため、うまく連携できます。 Angularジェネレーターを組み込むと少し混乱する可能性がありますが、 Angular Seed アプリとSails v0.10から始める場合の基本的な手順は次のとおりです。

  1. sails new myAppを使用して新しいSailsアプリを作成します
  2. myApp/assetsフォルダーの内容を消去します
  3. Angular Seed appフォルダーの内容をmyApp/assetsにコピーします
  4. myapp/views/layout.ejsの内容をAngular Seed app/index.htmlファイルの内容に置き換えます
  5. layout.ejsファイルからすべての非スクリプトタグコンテンツ（<body>タグの後、最初の<script>タグの前のすべてをカットし、それを使用してmyApp/views/homepage.ejsのコンテンツを置き換えます。
  6. <%-body%>の<body>タグの後にlayout.ejsを配置します

その後、sails liftを使用してサーバーを起動すると、http://localhost:1337にAngularアプリが表示されます。

これをGithubに置いてください を参照してください。

このメソッドを使用すると、Gruntfileに対して何もする必要がなく、grunt serverを呼び出すことはありません。これは、テストサーバーでAngularアプリをテストするためだけのものです。セイルに置き換えます。フロントエンドアセットが変更されると、それを監視および同期するSailsのgrunt-syncタスクの利点を引き続き利用できます。

Yeoman Angularジェネレーターを本当に使用する場合は、Sailsアプリのassetsフォルダーにアプリを直接生成し、そのフォルダー内からジェネレーターコマンドを使用してみてください。以前は使用していなかったので、distフォルダーの用途はわかりませんが、インストールするすべてのノードモジュールがテストWebサーバーをサポートするために存在するようです（これも必要ありません。 Sails）とテストスイート（常にNice）があります。私が見ることができる唯一の問題は、Yeomanが生成するGruntfileのタスクのいくつかが必要かどうかです。 Sailsは（プロダクションモードで）少ないコンパイルとCSSミニフィケーションを処理しますが、JadeやStylusでは何もしません。したがって、本当に必要な場合は、これらのタスクをSails Gruntfileに追加する必要があります。

56
sgress454

あなたの質問こそが、私がSailngを作成した理由です。 https://github.com/ryancp/sailng これは、最新のSails 0.10.0-rc5を使用するexample/boilerplateアプリケーションです。

また、Sails内でsocket.ioを使用して、Ajaxポーリングなしでリアルタイムの更新をクライアントに提供する方法も示します。

クローンを作成し、指示に従ってSailsとAngularを一緒に使用する方法のより良いアイデアを取得します。

12
Ryan

また、Sails.js + Angularのサンプル「定型/例」アプリも作成しました。私のソリューションでは、これらはバックエンドとフロントエンド（2台のサーバー）に分離されています。

私のソリューションは、ユーザー間のデータ内でのソケット通信とライブ更新も示しています。

試してみてください。 https://github.com/tarlepp/angular-sailsjs-boilerplate

4
tarlepp

私はあなたと同じようなユースケースを持っています。 Yeomanを使用して、angularjsのプロジェクト構造を生成しました。この状況で、私の解決策は次のとおりです。

  1. 'grunt serve'を使用して、angularjsシングルページアプリを縮小バージョンに生成し、すべてを 'dist'フォルダーの下に配置します。

  2. Sails.jsプロジェクトのroutes.jsで、ビューの構成コードを削除します。

    「/」：{ビュー：「ホームページ」}

  3. Sails.jsビューおよびアセットフォルダーの下にあるすべてのファイルを削除します。ただし、すべてを削除する前に、アセットフォルダーにファイルが必要ないことを確認してください。

  4. 縮小されたanglejs Webサイトをアセットフォルダーにコピーアンドペーストします。

  5. Sails.js（セールリフト）を起動すると、angular localhost：1337のWebサイトを閲覧できます

Sails.jsはこのメソッドについても簡単に言及しました http://sailsjs.org/documentation/concepts/views

0
afterglowlee

デフォルトのタスクを設定して、angular distフォルダーを.tmpにコピーする必要があります

このタスクの設定を参照してください Sails Angular プロジェクト

0
Janka