Radoslav Naidenov Radoslav Naidenov - 2 months ago 7
AngularJS Question

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");
}]);

Answer

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.

Comments