GET error MEAN App

Question

Ich habe gelernt, wie man den MEAN-Stack benutzt, um Web-Apps zu erstellen und bis jetzt hat es viel Spaß gemacht. Anstatt yeoman generators oder npm app zu verwenden, um meinen Code für mich zu generieren, habe ich meine ganze App von Grund auf neu aufgebaut. Auf diese Weise weiß ich, wie sich jedes Teil verbindet und was mit meiner App passiert. Ich war gerade erst das vordere und hinteres Ende meiner App zu verbinden, wenn ich an der Entwicklerkonsole und sah

GET http://blog.dev/bower_components/angular/angular.js 

Nicht nur eckig, aber jede andere Ressource Ich habe (Modernizr, Winkelstrecken, Mootools, restangular , etc ...). Wenn Sie den yeoman-Winkelgenerator verwenden, sollten Sie den Befehl grunt serve ausführen, um die Winkelseite zu starten. Da ich die App von Grund auf neu erstellt habe und ich npm für mein Build-Tool verwende, wusste ich nicht, wie ich den Frontend-Server aufbauen soll. Also ging ich einfach mit einem einfachen nginx virtuellen Host, der auf meine index.html verweist. Hier ist die config:

server { 
     listen 80; 

     server_name blog.dev; 

     root /home/michael/Workspace/blog/app; 
     index index.html index.htm; 

     location/{ 
       try_files $uri $uri/ =404; 
     } 
} 

Ich bin mir nicht sicher, was andere Variablen könnte die Situation werden, zu beeinflussen, so dass, wenn ich etwas verpasst mir bitte sagen, und ich werde glücklich sein, Sie zu geben, was Sie brauchen!

Answer 1

Wenn Sie den Mittelwert-Stack verwenden, sollten Sie in der Lage sein, sowohl das Back-End als auch das Front-End direkt mit dem Knoten zu versorgen.

Ich bin mir Ihrer Projektstruktur nicht sicher, aber hier ist die Struktur für eine, an der ich gerade arbeite.

/bin --contains a file called www.js (used to launch app) 
/data 
/models 
/node_modules 
/public -- contains my angular implementation 
/routes -- contains express routes 
/temp 
/upload 
/views 
app.js -- main configuration for express 
api.js -- my apis 
package.json 

in den /bin/www.js Datei, die Sie den Code haben Ihren Knoten Server zu starten.

var app = require('../app'); 

app.set('port', process.env.PORT || 3000); 

var server = app.listen(app.get('port'), function() { 
debug('Express server listening on port ' + server.address().port); 
});   

Sie müssen auch die Einrichtung auszudrücken und Ihre Routen sehen so gut auf Strecken ersten im Routen-Verzeichnis ich eine Datei index.js

In dieser Datei mit dem Namen haben, definiere ich eine Route, führt zu meiner angular index.html Seite.

var express = require('express'); 
var router = express.Router(); 

/* GET home page. */ 
router.get('/', function(req, res) { 
res.redirect('/pages/index.html'); 
}); 

module.exports = router; 

Und natürlich müssen Sie Express einrichten.

process.env.TMPDIR = 'tmp'; // to avoid the EXDEV rename error, see   http://stackoverflow.com/q/21071303/76173 

var express = require('express'); 
var path = require('path'); 
var favicon = require('static-favicon'); 
var logger = require('morgan'); 
var cookieParser = require('cookie-parser'); 
var bodyParser = require('body-parser'); 
var multer = require('multer'); 
var flow = require('./flow-node.js')('tmp'); 
var multipart = require('connect-multiparty'); 
var multipartMiddleware = multipart(); 
var uuid = require('uuid'); 
var mongoose = require('mongoose'); 
var session = require('express-session'); 

var routes = require('./routes/index'); 

var app = express(); 

app.use(favicon()); 
app.use(logger('dev')); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded()); 
app.use(cookieParser()); 
app.use(session({genid: function(req) { return uuid.v4()}, secret: 'XXXXXXXXXXX', 
    saveUninitialized: true, 
    resave: true})); 
app.use(express.static(path.join(__dirname, 'public'))); 

app.use('/', routes); 
app.use('/users', users); 

module.exports = app; 

Nimmt man nun an Sie Ihre Angular Dateien und Javascript im ‚öffentlichen‘ Verzeichnis irgendwo haben, sollten Sie in der Lage sein, Knoten mit dem folgenden Befehl zu starten.

node bin/www 

Und der Punkt Ihres Browsers http://localhost:3000 und in der Wirtschaft sein.

Hoffe, dass dies hilft und glücklich zu lernen.