Wie hoste ich eine AngularJS-App in Heroku mit Node.js OHNE yeoman?

Question

Nov 22, 2014, 06:01 AM

express heroku node.js angularjs angularjs-ng-route

Wie hoste ich eine AngularJS-App in Heroku mit Node.js OHNE yeoman?

Ich versuche mit Node.js einen Hello World Build mit AngularJS in Heroku zu pushen. ABER mit mehreren Ansichten (Teilansichten).

Ich habe zum ersten Mal eine Hello World ohne ngRoute implementiert, dh ohne Teilbereiche. Das war gut und glatt. Dann habe ich versucht, 2 einfache Teiltöne zu drücken. Ich glaube jedoch, dass das Problem darin besteht, die Anwendung zu hosten und gleichzeitig nach Teilbereichen zu fragen. Ich weiß, dass es nicht der richtige Ansatz ist, und ich möchte Ihren Rat.

Das ist meine 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>

Partial 'templates / second.html'

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

Partial 'templates / index.html'

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

Meine Express-App:

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

nd offensichtlich, Procfile:

web: node index.js

Alle Tutorials, die ich bisher gefunden habe, verwenden Yeoman, aber ich möchte Yeoman oder ein anderes Gerüst-Tool (wenn das das ist, was das ist) nicht verwenden.

F: Kann ich eine AngularJS-App in derselben Heroku-Anwendung hosten, in der ich die Teilergebnisse speichere? Wenn ja, was mache ich falsch? Wenn nicht, was ist der beste Ansatz?