How can I use AngularJS with NodeJS? (not working)

Question

Hi,

So I just finished the NodeJs course and wanted to embed that knowledge with my AngularJS knowledge but Node seems to be giving me problems when I try to include any script file in my .html file.

These are my files below:

app.js (Where I create a node server)

var http = require('http');
var router = require('./routes.js');

http.createServer(function (request, response) {
    router.home(request, response);
    router.user(request, response);
}).listen(3000);
console.log("Starting APP");

routes.js (where I set up my home and user routes)

var commonHeaders = {'Content-Type': 'text/html'};
var render = require('./render');

function home(request, response){
    if(request.url == "/"){
        response.writeHead(200, commonHeaders);
        response.write("HOME");
        response.end();
    }
}


function user(request, response){
    var username = request.url.replace("/", "");
    if(username.length > 0){
        response.writeHead(200, commonHeaders);
        render.view("profile", username, response);
        response.end();
    }
}

module.exports.home = home;
module.exports.user = user;

render.js (where I render out the profile.html page)

var fs = require("fs");

function mergeValues(content, username) {
    content = content.replace("%username%", username);
    return content;
}

function view(templateName, username, response){
    var fileContents = fs.readFileSync(templateName + '.html', {encoding: "utf8"});
    var mergedContent = mergeValues(fileContents, username);
    response.write(mergedContent);
}

module.exports.view = view;

profile.html (simple dummy HTML)

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    h1 > span{color:red;}
    </style>
</head>
<body ng-controller="mainCtrl">
    <h1>Welcome <span>%username%</span></h1>

    <p>This is some content from the webpage. This is some content from the webpage. This is some content from the webpage. This is some content from the webpage. This is some content from the webpage. This is some content from the webpage.</p>

    <button ng-click="greet()">Click Here</button>


    <h1>{{name}}</h1>
    <script src="angular.js"></script>
    <script src="angular_app.js"></script>
</body>
</html>

So thats my entire code all pretty much basic and simple for testing purposes. Now you see how at the bottom of my profile.html I have angular.js included. So in Angular I usually create my modules in the app.js but since my node server is being created there I made a separate file just in case called angular_app.js which looks like this.

var $app = angular.module("myApp", []);

$app.controller("mainCtrl", function($scope){
    $scope.name = "BOB";
    $scope.greet = function(){
        alert("Hello");
    }
});

So this is where I am now, my Angular does not seem to work at all for some reason.

So I tried to inspect the element and look inside the angular.js file that I was including and for some VERY odd reason I do not see my angular script. Instead I see the HTML to my profile.html page

Why is this? how do you properly get another script to load in your HTML file like ANGULARJS with NODEJS because like I said when I inspect the element and look at the file it just shows me the HTML of my profile.html page and not the script that I expected.

Help is greatly appreciated, thank you.

Andrew Chalkley Huston Hedinger

Answer 1 · 2016-02-24T03:58:24Z

February 24, 2016 3:58am

If you are writing the basic server in node from scratch like that, it will only serve exactly what you tell it to and nothing else. While you have a home and user route, there's no route for serving the .js file. The only route for anything other that the root path is the user profile route, which simply uses whatever is in the path as a username. So when you request angular.js, the server will send you the profile for user "angular.js" If you want to serve the script file, you'll need to add another route (like /scripts/, or /static/) for that and add an extra condition to the user route so it won't serve the profile template.

Another option is if you are using a framework like Express that has support serving static files. (See the Express Basics course)

Welcome to the Treehouse Community

Looking to learn something new?

Lucas Santos

Lucas Santos

How can I use AngularJS with NodeJS? (not working)

1 Answer

Seth Kroger

Seth Kroger

Lucas Santos

Lucas Santos