16

Node.js と ExpressJS を使用して RESTful サービスを作成しました。ここで、View パーツを実装したいと思います。このために、AngularJS を選択しました。

ここでの問題は、フォルダー構造を整理する方法と、AngularJS を Node.js および ExpressJS と統合する方法がわからないことです。

このビデオを見ましたが、サンプル ソース コードはありません。

CRUDdy を手に入れよう: AngularJS と Node.js フェラーリの例

プロジェクトのフォルダー構造

ここに画像の説明を入力

ExpressJS ファイル

var express = require('express'),
http = require('http'),
path = require('path'),
photos = require('./routes/photos');

var app = express();

app.configure(function () {
    app.use(express.logger('dev'));     /* 'default', 'short', 'tiny', 'dev' */
    app.use(express.bodyParser());
    app.use(app.router);
});

app.get('/photos', photos.findAll);
app.get('/view1', photos.index);

AngularJS:

 // Declare app level module which depends on filters, and services
 angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
    $routeProvider.otherwise({redirectTo: '/view1'});
  }]);

URL http://www.domain/view1にアクセスすると、 が表示されますindex.html。しかし、私は404コードを取得しています。

詳細情報が必要な場合はお知らせください。

4

2 に答える 2

34

AngularJS を使用して単一ページのエクスペリエンスを実装している場合は、毎回同じフロントエンド コードを提供し、AngularJS に URL の処理とコンテンツの表示を引き継がせる必要があります。

2 つのルーティング システムを管理していることを思い出してください。1 つはフロントエンド用、もう 1 つはバックエンド用です。Express ルートはデータにマップされ、通常は JSON 形式で返されます。(html を直接レンダリングすることもできます。オプション #1 を参照してください。) Angular ルートは、テンプレートとコントローラーにマップされます。

オプション1：

フロントエンド コード (HTML/CSS/JS/AngularJS) を提供する静的フォルダーを設定します。

app.use(express.static(__dirname + '/public'));

サンプル コードについては、次を参照してください。

ディレクトリ構造:

public/
  index.html
  js/
    angular.js
  css/
  partials/
     partial1.html
     partial2.html

app/
node_modules/
routes/
web-server.js

オプション #2:

フロントエンド コードとバックエンド コードを別々のサーバーで提供します。

これは、2 台のマシンを用意する必要があるという意味ではありません。

これは、 Apacheを使用してローカル マシンで実行可能なセットアップです。

ディレクトリ構造:

public/
  index.html
  js/
    angular.js
  css/
  partials/
     partial1.html
     partial2.html
node/
  app/
  node_modules/
  routes/
  web-server.js

ホストファイルを設定する

    127.0.0.1       domain.dev

public/ を指すようにhttp://domain.dev/を設定します

<VirtualHost *:80>
  DocumentRoot "/path/to/public"
  ServerName domain.dev
  ServerAlias www.domain.dev
</VirtualHost>

実行中のノード Web サーバーを指すようにhttp://api.domain.dev/をセットアップします。

<VirtualHost *:80>
  ServerName api.domain.dev
  ProxyPreserveHost on
  ProxyPass / http://localhost:3000/
</VirtualHost>

(出典: http://www.chrisshiplet.com/2013/how-to-use-node-js-with-apache-on-port-80/ )

Apache を起動 (または再起動) し、ノード サーバーを実行します。

node web-server.js

角ルート:

 angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 
   'myApp.controllers'])
   .config(['$routeProvider', function($routeProvider) {
     $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
     $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
     $routeProvider.otherwise({redirectTo: '/view1'});
 }]);

index.html:

   <!DOCTYPE html> 
   <html>
     <head><title>Angular/Node exmaple</title></head>
     <body>
       <div id="main" ng-view></div>
     </body>
   </html>

特急ルート：

app.get('/', photos.index);
app.get('/photos', photos.findAll);

$http または $resource サービスを介して、Angular コントローラーでこれらのルートにアクセスします。

$http.get('http://api.domain.dev/photos').success(successCallback);

その他のリソース:

于 2013-07-03T18:24:38.087 に答える
4

次のようなファイル構造を持つ既存のAngularプロジェクトがありました(大まかに):

/
  app/
    img/
    scripts/
    styles/
    templates/
    index.html
  test/

新しい高速アプリを作成し、/public から既存のコンテンツをすべて削除した後、app ディレクトリのコンテンツを高速で /public ディレクトリにコピーしました。

次に、エクスプレスの app.js ファイルで、デフォルトの構成に次の変更を加えました。

var express = require('express');
var routes = require('./routes');
// ** required my route module
var menu = require('./routes/menu'); 
var http = require('http');
var path = require('path');

var app = express();

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
// ** I moved this above the app.router line below, so that static routes take precedence
app.use(express.static(path.join(__dirname, 'public'))); 
app.use(app.router);


// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

// ** removed the default index route
// app.get('/', routes.index); 
// ** defined my route
app.get('/api/menu', menu.list); 

http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

次に、ルート ファイルを Express で記述し、Angular サービスの URL を新しい API を使用するように変更しました。

また、仕様をどこに配置するかを決定したり、バウアーとノードの依存関係をマージしたりするなど、さらに多くの作業がありましたが、これはおそらく私の状況に固有すぎて、この回答に含めることはできませんが、誰かが役立つと思う場合は喜んで共有します.

于 2013-12-06T12:47:54.303 に答える