CODEWITHSUNDEEP
javascriptangularjsnode.jsexpressmean-stack
Radoslav Naidenov
Radoslav Naidenov

Reputation: 807

Javascript files can't be found and loaded

I am following a tutorial, which uses the MEAN stack. I got to the point where I'm supposed to start using Node. Everything is installed and I've put the angular and bootstrap scripts in the respective folder. The problem is that none of these files are found when I try to run the application in localhost:3000.

The errors I'm getting:

The errors I'm getting

The directory structure of my project:

The directory structure of my project

This is the code I've got so far :

index.ejs

<!DOCTYPE html>
<html ng-app = "flapperNews">

<link rel="stylesheet" type="text/css" href="../public/stylesheets/bootstrap.css">

<style>
    .glyphicon-thumbs-up {
        cursor : pointer;
    }
</style>



<head>
    <title></title>
</head>

<body>

<div class = "row">

    <div class = "col-md-6 col-md-offset-3"> 

        <ui-view></ui-view>

     </div>
</div>

<script type="text/ng-template" id = "/home.html">
    <div class = "row">
        <div class = "col-md-6 col-md-offset-3">
            <div class = "page-header">
                 <h1>Flapper News</h1>
            </div>
        </div>
    </div>

    <div ng-repeat="post in posts | orderBy:'-upvotes'">
        <span class="glyphicon glyphicon-thumbs-up" ng-click="upvote(post)"></span>
            {{post.upvotes}}
        <span style="font-size:20px; margin-left:10px;">
            <a ng-show="post.link" href="{{post.link}}">
                {{post.title}}
            </a>
            <span ng-hide="post.link">
                {{post.title}}
            </span>
        </span>

        <span>
            <a href="#/posts/{{$index}}">Comments</a>
        </span>

    </div>

    <form ng-submit="addPost()" style="margin-top:30px;">
        <h3>Add a new post</h3>

        <div class="form-group">
            <input type="text" class="form-control" placeholder="Title" ng-model="newPost.title"></input>
        </div>
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Link" ng-model="newPost.link"></input>
        </div>
        <button type="submit" class="btn btn-primary">Post</button>

    </form>
</script>

<script type="text/ng-template" id="/posts.html">
    <div class = "page-header">
        <h3> 
            <a ng-show="post.link" href="{{post.link}}">{{post.title}}</a>
            <span ng-hide = "post.link">{{post.title}}</span>
        </h3>
    </div>

    <div ng-repeat = "comment in post.comments | orderBy : '-upvotes'">
        <span class = "glyphicon glyphicon-thumbs-up" ng-click = "upvote(comment)">
            {{comment.upvotes}} - by {{comment.author}}
        </span>
        <span style="font-size:20px; margin-left:10px;">
            {{comment.body}}
        </span>

    </div>

    <form ng-submit = addComment() style = "margin-top:30px;">
        <h3>Add a new comment</h3>


        <div class = "form-group">
            <input type="text" class = "form-control" ng-model = "body" placeholder="Comment">
            <button type="submit" class = "btn btn-primary">Post</button>
        </div>
    </form>
</script>

</body>

<script src = "../public/javascripts/angular.min.js"></script>
<script src = "../public/javascripts/mean.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="../public/javascripts/angular-ui-router.js"></script>

<script src="../public/javascripts/bootstrap.min.js"></script>

</html>

mean.js

var app = angular.module("flapperNews",['ui.router','ui.bootstrap']);

// Injecting the posts service into the controller so
// we can access its data
app.controller ("mainCtrl",function ($scope,posts) {
    // Binding the scope.posts variable in our controller 
    // to the posts array in our service
    $scope.posts = posts.posts;

    $scope.addPost = function () {
        if ($scope.newPost.title === "" || !$scope.newPost.title) {
            return;
        }
        else {
            $scope.posts.push({title : $scope.newPost.title ,link : $scope.newPost.link,upvotes : "0",
  comments: [
    {author: 'Joe', body: 'Cool post!', upvotes: 0},
    {author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
  ]
        });
            $scope.newPost.title = "";
            $scope.newPost.link = "";
        }


    }

    $scope.upvote = function (post) {
        post.upvotes ++ ;
    }

});

app.controller("postsCtrl",function ($scope,$stateParams,posts) {

    $scope.post = posts.posts[$stateParams.id];

    $scope.addComment  = function () {
        if ($scope.body === "") {
            return;
        }
        else {
                $scope.post.comments.push({
                body : $scope.body,
                author : "user",
                upvotes : 0
            });
        $scope.body = "";
        }
    }

});

// We're creating an object with an array property called posts
app.factory("posts",[function () {
    var o = {
            posts : []
        };
    return o;
}])

app.config (["$stateProvider","$urlRouterProvider",function ($stateProvider,$urlRouterProvier) {
// Configuring a home state
    $stateProvider
        .state("home",{
            url: "/home",
            templateUrl : "/home.html",
            controller : "mainCtrl"
        })
        .state("posts",{
            // id is a route parameter
            url : "/posts/{id}",
            templateUrl : "/posts.html",
            controller : "postsCtrl"
        });

    $urlRouterProvier.otherwise("home");
}]);

Upvotes: 3

Views: 51

Answers (3)

yaboiduke
yaboiduke

Reputation: 670

You needn't reference your assets with the publicfolder in your path

<link rel="stylesheet" type="text/css" href="../public/stylesheets/bootstrap.css">

Assuming you have set your public folder in your expressserver as below (your app.js in this case), you should see a line similar to below

 app.use(express.static('public'));

This is where the default location for public assets i.e your css etc are defined.Rather just do

 <link rel="stylesheet" type="text/css" href="stylesheets/bootstrap.css">

As express will navigate to the defined public folder by default.

Upvotes: 4

BrTkCa
BrTkCa

Reputation: 4783

If you using the express routes you need to set static path in app.js, something like:

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

And in index.ejs:

<link rel="stylesheet" type="text/css" href="/public/stylesheets/bootstrap.css"

Upvotes: 0

joh04667
joh04667

Reputation: 7427

Is app.js your server file? If so, is it in your public folder? Apologies, but it's hard to tell from the picture.

If that's the case, you don't need to include public in your filepaths.

Also, are you serving up a static folder? (using app.use(express.static('public')); It's good practice to do so -- what this does is serve only the public folder - all paths in the html will be relative to this folder, as if it was the directory. Doing this means you could also take the public out of your filepaths. It's good practice, as I said, because generally you want to reveal as little of your server structure as possible - serving only one static folder like this helps.

Upvotes: 0

Related Questions