Como hospedar um aplicativo AngularJS no Heroku usando o Node.js SEM o yeoman?

Question

Nov 22, 2014, 06:01 AM

angularjs-ng-route angularjs node.js express heroku

Como hospedar um aplicativo AngularJS no Heroku usando o Node.js SEM o yeoman?

Estou tentando inserir uma compilação Hello World com AngularJS no Heroku usando Node.js. MAS com várias visualizações (parciais).

Primeiro implantei um Hello World sem usar o ngRoute, o que significa: sem parciais. Isso foi bom e suave. Então, tentei empurrar 2 parciais simples. Mas acredito que o problema esteja hospedando o aplicativo e, ao mesmo tempo, solicitando parciais. Sei que não é a abordagem correta e quero seu conselho.

Este é o meu 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>

Parcial 'templates / second.html'

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

Parcial 'templates / index.html'

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

Meu aplicativo expresso:

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);

E obviamente, Procfile:

web: node index.js

Todos os tutoriais que encontrei até agora usam o Yeoman, mas não quero usar o Yeoman ou qualquer outra ferramenta de andaime (se é isso que é isso).

P: É possível hospedar um aplicativo AngularJS no mesmo aplicativo Heroku em que estou armazenando as parciais? Se sim, o que estou fazendo de errado? Caso contrário, qual é a melhor abordagem?