CODEWITHSUNDEEP
node.jsangularjs
Jacek Kaczmarek
Jacek Kaczmarek

Reputation: 34

angularJS with nodeJS

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..

Upvotes: 1

Views: 1571

Answers (2)

Rohan Chandane
Rohan Chandane

Reputation: 367

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.

Upvotes: 1

Himmet Avsar
Himmet Avsar

Reputation: 1531

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

Upvotes: 1

Related Questions