11

Node.js を使用して、AngularJS を使用した Hello World ビルドを Heroku にプッシュしようとしています。しかし、複数のビュー（部分）があります。

最初に ngRoute を使用せずに Hello World をデプロイしました。つまり、パーシャルを使用しませんでした。それはうまくスムーズでした。次に、単純なパーシャルを 2 つプッシュしてみました。しかし、問題はアプリケーションをホストしていると同時にパーシャルを要求していると思います。私はそれが正しいアプローチではないことを知っており、あなたのアドバイスが欲しい.

これは私の index.html です:

<!DOCTYPE html>
<html ng-app="main">
<head>
    <meta name="name" content="something">
    <title></title>
</head>
<body>
    <section ng-view=""></section>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-route.min.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript" charset="utf-8">
    angular.module('main', ['ngRoute'])
    .config(['$routeProvider', '$http', function ($routeProvider, $http){
        console.log('hola');
        $routeProvider
        .when('/', {
            resolve: **??? I tried with templateUrl but did not work either**
            ,controller: 'indexCtrl'
        })
        .when('/second', {
            resolve: **???**
            ,controller: 'secondCtrl'
        })
        .otherwise({
            redirectTo: '/'
        });
    }])
    .controller('indexCtrl', ['$scope', function ($scope){
        $scope.helloWorld = "Hello World";
    }])
    .controller('secondCtrl', ['$scope', function ($scope){
        $scope.helloWorld = "World Hello";
    }]);
    </script>
</body>
</html>

部分的な「templates/second.html」

<h1>{{ helloWorld }}<h1>
<a href="#/" title="">Go to First</a>

部分的な「templates/index.html」

<h1>{{ helloWorld }}<h1>
<a href="#/second" title="">Go to Second</a>

私のエクスプレスアプリ：

var express = require('express'),
app = express();
app.set('view engine', 'html');
app.get('/', function(req, res) {
    res.sendfile('index.html', {root: __dirname })
});
app.get('/index', function (req, res){
    res.sendfile('templates/index.html', {root: __dirname })
});
app.get('/second', function (req, res){
    res.sendfile('templates/second.html', {root: __dirname })
});
var server = app.listen(process.env.PORT || 80);

そして明らかに、Profile:

web: node index.js

これまでに見つけたすべてのチュートリアルは Yeoman を使用していますが、Yeoman やその他の足場 (それが何であるか) ツールを使用したくありません。

Q: パーシャルを保存している同じ Heroku アプリケーションで AngularJS アプリをホストすることは可能ですか? もしそうなら、私は何を間違っていますか？そうでない場合、最善のアプローチは何ですか？

4

1 に答える 1

18

うーん、なぜ反対票を投じたのかわかりません。しかし、とにかく、この例を見て問題を見つけました。

実際の問題は、エクスプレスでディレクトリを「公開」していなかったことです。

app.use(express.static(__dirname));

ここはハローワールド

index.html

<!DOCTYPE html>
<html ng-app="main">
<head>
    <meta name="name" content="something">
    <title></title>
</head>
<body>
    <section ng-view=""></section>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-route.min.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript" charset="utf-8">
    angular.module('main', ['ngRoute'])
    .config(['$routeProvider', function ($routeProvider){
        console.log('hola');
        $routeProvider
        .when('/', {
            templateUrl: 'templates/index.html'
            ,controller: 'indexCtrl'
        })
        .when('/second', {
            templateUrl: 'templates/second.html'
            ,controller: 'secondCtrl'
        })
        .otherwise({
            redirectTo: '/'
        });
    }])
    .controller('indexCtrl', ['$scope', function ($scope){
        $scope.helloWorld = "Hello World";
    }])
    .controller('secondCtrl', ['$scope', function ($scope){
        $scope.helloWorld = "World Hello";
    }]);
    </script>
</body>
</html>

サーバー / index.js

var express = require('express'),
app = express();

app.use(express.static(__dirname));
app.get('/', function(req, res) {
    res.sendfile('index.html', {root: __dirname })
});
var server = app.listen(process.env.PORT || 80);

プロフィール

web: node index.js

テンプレート/index.html

<h1>{{ helloWorld }}<h1>
<a href="#/second" title="">Go to Second</a>

テンプレート/second.html

<h1>{{ helloWorld }}<h1>
<a href="#/" title="">Go to First</a>

これが誰かに役立つことを願っています。

私の質問に答えるために。はい、可能です。私が間違っていたのは、テンプレート(ファイル)にアクセスできないことです。アクセスできるものにセキュリティを強化したい場合は、たとえば public という名前のフォルダーを作成できます。次に、そのディレクトリを静的にします。

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

次に、RESTful であっても、アプリケーションと通信するためのさまざまなルートを持つこともできます。お気に入り：

app.get('/users', function(req, res) {
    res.json({...});
});
于 2014-11-23T04:47:29.960 に答える