7

問題をできるだけ詳しく説明します。

Express で AngularJS を使用しようとしていますが、問題が発生しています。HTML ファイルを表示したい (テンプレート エンジンを使用しない)。これらの HTML ファイルには AngularJS ディレクティブが含まれます。
ただし、単純な HTML ファイル自体を表示することはできません。

ディレクトリ構造は次のとおりです。 

Root  
---->public  
-------->js  
------------>app.js  
------------>controllers.js  
---->views  
-------->index.html  
-------->partials  
------------>test.html  
---->app.js

の内容public/js/app.jsは次のとおりです。 

angular.module('myApp', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/', {templateUrl: 'partials/test.html', controller: IndexCtrl});
$routeProvider.otherwise({redirectTo: '/'});
}]);

の内容public/js/controllers/jsは次のとおりです。 

function IndexCtrl() {  
}

body タグの内容views/index.htmlは次のとおりです。 

<div ng-view></div>

それでおしまい。期待されるのは、AngularJS が上記のビューを test.html に置き換えることですviews/partials/test.html。その内容は次のとおりです。 

This is the test page!

段落タグで囲みます。それでおしまい！

最後に、ROOT/app.jsファイルの内容は次のとおりです。 

var express = require('express');

var app = module.exports = express();  

// Configuration

app.configure(function(){  
    app.set('views', __dirname + '/views');  
    app.engine('html', require('ejs').renderFile);  
    app.use(express.bodyParser());  
    app.use(express.methodOverride());  
    app.use(express.static(__dirname + '/public'));  
    app.use(app.router);  
});

app.configure('development', function(){  
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));  
});  

app.configure('production', function(){  
  app.use(express.errorHandler());  
});  

// routes

app.get('/', function(request, response) {  
    response.render('index.html');  
});  

// Start server

app.listen(3000, function(){  
  console.log("Express server listening on port %d in %s mode", this.address().port, app.settings.env);  
});

これ$node app.jsで、ルート フォルダーで実行すると、サーバーはエラーなしで起動します。ただしlocalhost:3000、ブラウザで にアクセスすると、URL が に変わりlocalhost:3000/#/、ページが動かなくなったりフリーズしたりします。Chrome でコンソール ログを確認することさえできません。
これが私が直面している問題です。私が間違っていることについての手がかりはありますか？

4

2 に答える 2

8

ついにそれを理解しました-髪を引っ張る多くの激しい瞬間の後!!
ページがフリーズする理由は次のとおりです (順を追って説明):

  1. ユーザーが localhost:3000 を起動します
  2. これは、エクスプレス サーバーに「/」を要求します。
  3. Express は index.html をレンダリングします
  4. AngularJS はテンプレート 'partials/test.html' をレンダリングします。
  5. ここで、私は大げさな推測をしています - AngularJS はページ「partials/test.html」に対して HTTP リクエストを行いました。

  6. ただし、express または app.js には、この GET 要求のハンドラーがないことがわかります。つまり、次のコードが欠落しています。

    app.get('partials/:name', function(request, response) {
    var name = request.params.name;
    response.render('partials/' + name);
    });

app.jsROOT ディレクトリ内。このコードを追加すると、ページは期待どおりにレンダリングされます。

于 2013-02-25T10:24:53.317 に答える
-1

この作業フィドルのデザインパターンに従ってみてください。以下に示すコード。テンプレートオプションをtemplateUrlに置き換えることができますが、それでも正常に機能するはずです。

var app = angular.module('app', []);

app.config(['$routeProvider', function($routeProvider){
    $routeProvider.when('/', {template: '<p>Index page</p>', controller: 'IndexCtrl'});
    $routeProvider.otherwise({redirect:'/'});
}]);

app.controller('IndexCtrl', function(){

});
于 2013-02-24T20:42:51.493 に答える