angularJS with nodeJS

Question

at last time I have learn use AngularJS and NodeJs, but I have a few problems.

First: I'd like loading.. for instance index.html or other file, now I do this manual and simplest how I can, but even then I have problem with type file which are include in index.html I receive:

Resource interpreted as Stylesheet but transferred with MIME type text/html:...

How can I correct this ? below code.

    'use strict';

var http = require('http');
var fs = require('fs');
var mysql = require('mysql');


var render = function(response, fileName, code, httpCode){
  var code = code || 'utf8';
  var httpCode = httpCode || 200;

  fs.readFile(fileName, code, function(err, data){

      if(err) { return console.log(err); }
      response.writeHead(httpCode, {'Content-type': 'text/html; charset='+code});
      response.write(data);
      response.end();
  });

};


http.createServer(function(req, res){
    render(res, 'index.html');
}).listen(9999, '127.0.0.1');

console.log('Server running');

html:

 <!doctype html> <html class="no-js"><head>
     <meta charset="utf-8">
     <title></title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width">
     <link rel="stylesheet" type='text/css' href="styles/main.css">
     </head><body></body></html>

Can I use nodejs server with gruntjs ? if yes, how I can do it ? Do somebody know any tutorial only angular + node ? it's mean I know quite good angularJS, but I can't use it with nodeJS..

why don't you try to use a view engine / express combination? — pedrommuller
– pedrommuller, Commented Sep 22, 2014 at 15:00

Himmet Avsar · Accepted Answer · 2014-09-22 15:20:45Z

1

The problem is that your browser requested a css file and you returned a file with the MIME type text/html. You would have to handle all the possible types of files (js, html, txt, css, ...).

I would recommend you to use an existing module like express, which will save you a lot of time. After installing express, initalize a static file server by doing following:

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

answered Sep 22, 2014 at 15:20

Himmet Avsar

1,53116 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jacek Kaczmarek Over a year ago

Hmm okey, probably I understand :) but I have one more question maybe two.. is exist some alternative to express or this is most popular solution ? and perhaps do you have some good tutorial for me or any introduction ?

Himmet Avsar Over a year ago

I have not used any alternatives yet but I think express is the most popular module. It is also being developed and improved constantly. The express website is very well documented: expressjs.com. Good luck.

Rohan Chandane · Accepted Answer · 2014-09-22 15:26:26Z

1

This is how my folder structure look like of Angular JS + Node JS (with Express JS)

ProjectTitle
|_app
  |_bower_components
  |_images
  |_scripts
  |_styles
  |_views
  |_index.html
  |_favicon.ico
|_routes
|_test
|_.bowerrc
|_.jshintignore
|_.jshintrc
|_bower.json
|_Gruntfile.js
|_package.json
|_README.md
|_server.js

3 imp things to notice here

/app - contains angular static app including all its dependant styles, scripts & images

/app/script - angular javascript files

/server.js - node js web server code, here is sample code

var express = require('express'),
http = require('http'),
path = require('path');

var app = express();

// all environments
app.configure(function() {
    app.set('port', process.env.PORT || 3000);
    app.use(express.logger('dev'));
    app.use(express.static(path.join(__dirname, 'app'))); // here you are mentioning which directory should be static directory for the project, in this case 'app'
    app.use(express.favicon());
    app.use(express.json());
    app.use(express.urlencoded());
    app.use(express.methodOverride());
    app.use(app.router);
});

http.createServer(app).listen(app.get('port'), function() {
    console.log('Express server listening on port ' + app.get('port'));
});

Start node js server using

$ node server.js

It will start express server, and you can access it by typing in browser window

localhost:3000

It will be good to look at Yeoman and install Angular Generator. This is just to setup proper angular js project without error. If you have your own structure thats fine.

answered Sep 22, 2014 at 15:26

Rohan Chandane

3674 silver badges16 bronze badges

3 Comments

Jacek Kaczmarek Over a year ago

Thank you for reply :) I use Yeoman :) and my files/directory structure is very similar to yours. And this solution was very good as long as I learn angularJS and I wrote some simple app's, but now when I want include to my project nodeJS I can't reconcile all ;\ hmm I don't use express and I never read about this.. so, my question whether Can I use nodeJS + angularJS without express ?

Jacek Kaczmarek Over a year ago

And I'd like run server.js by gruntJS, because auto-refresh is very important for me.

Rohan Chandane Over a year ago

There are benefits of using express js over just node js. Nodejs has bunch of core packages, express js a framework build upon those to make things simpler for further development. here you will get some idea about it. More on that, to get auto-refresh feature, you can use Supervisor or Forever, which will make your development easier

Collectives™ on Stack Overflow

angularJS with nodeJS

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related