I'm using SystemJs as the module-loader. I suppose there's a way to bundle
the static files but I haven't learned how to do that yet. So for the
moment I'm handling each static folder separately (a separate app.use()
call for each one). Here's what I ended up with (server.js):
var express = require('express');
var path = require('path');
//Store the full path to the project folder in a global variable.
global.appRootObtainedFromServerJs = path.resolve(__dirname);
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var app = express();
//Handle static files in the /app folder
var strAppFolder = path.join(__dirname, '/app');
app.use('/app', express.static(strAppFolder));
//Handle any static files in the folder /public
var strPublicFolder =path.join(__dirname, '/public');
app.use(express.static(strPublicFolder));
//Handle any static files in the folder /node_modules/@angular
var strAngularFolder = path.join(__dirname, '/node_modules/@angular');
app.use("/node_modules/@angular", express.static(strAngularFolder));
//Handle static files in /node_modules/rxjs
var strRxJsFolder = path.join(__dirname, '/node_modules/rxjs');
app.use("/node_modules/rxjs", express.static(strRxJsFolder));
//Set the folder for storing html files (Views)
app.set('views', path.join(__dirname, 'views'));
//For Views use an html templating-engine named 'ejs'.
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: false
}));
app.use(cookieParser());
var controllerForIndexPage = require('./routes/index');
var controllerForTo_Do_Page = require('./routes/todos');
app.use('/', controllerForIndexPage);
app.use('/api/v1/', controllerForTo_Do_Page);
app.use('/favicon.ico', function(req, res, next) {
res.writeHead(200, {
'Content-Type':'image/x-icon'
})
});
var server = app.listen(3000, function() {
var host = 'localhost';
var port = server.address().port;
console.log('App listening at http://%s:%s', host, port);
});
module.exports = app;
I handled main.js manually instead of putting it in the public folder.
router.get('/mainjs*', function(req, res, next){
var strPathToFile = path.join(appRootObtainedFromServerJs, 'main.js');
res.sendFile(strPathToFile);
});
index.html
<!DOCTYPE html>
<html>
<head>
<title>Router Sample</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.css"/>
<!-- Polyfill(s) for older browsers -->
<script src="https://unpkg.com/core-js/client/shim.min.js";></script>
<script src="https://unpkg.com/[email protected]?main=browser";></script>
<script src="https://unpkg.com/[email protected]";></script>
<script
src="https://unpkg.com/[email protected]/dist/system.src.js";></script>
<script src="systemjs.config.js"></script>
<script>
System.import('mainjs').catch(function(err) {console.error(err)});
</script>
</head>
<body>
<my-app>loading this stuff now today...</my-app>
</body>
</html>
systemjs.config.js
(function (global) {
System.config({
paths: {//Set up 'npm' as a short name for the 'node_modules/' folder.
'npm:': 'node_modules/'
},
map: {
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser':
'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic':
'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'rxjs': 'npm:rxjs',
},
packages: {
app: {
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
}
});
})(this);
I don't think my Angular versions are up to date, I will need to check on
it.
package.json
{
"name": "ng2do-mean-app",
"version": "1.0.0",
"description": "Web App",
"main": "server.js",
"author": "jal",
"license": "MIT",
"private": true,
"dependencies": {
"body-parser": "^1.16.1",
"cookie-parser": "^1.4.3",
"ejs": "^2.5.6",
"express": "^4.14.1",
"mongojs": "^2.4.0",
"morgan": "^1.8.1",
"path": "^0.12.7",
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"@angular/upgrade": "2.0.0",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23",
"angular2-in-memory-web-api": "0.0.20",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"@types/core-js": "^0.9.35",
"concurrently": "^2.2.0",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",
"gulp-connect": "^5.0.0",
"gulp-less": "^3.3.0",
"gulp-typescript": "^3.1.5",
"typescript": "^2.0.2"
},
"scripts": {
"postinstall": "typings install"
}
}
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
