Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Lucas Santos
Lucas Santos
19,315 Points

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

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

1 Answer

Seth Kroger
Seth Kroger
56,403 Points

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)

Lucas Santos
Lucas Santos
19,315 Points

I thought this was going to translate text into html?

var fileContents = fs.readFileSync(templateName + '.html', {encoding: "utf8"});

and in common html a script tag works so my thought was it was going to work fine.

Ok so lets say I create a new route called scripts, how would I serve a javascript file through there? In the course it did not go over how to serve a javascript file.