All geek questions in one place

Javascript files cannot be found and uploaded

I am following a tutorial that uses the MEAN stack. I got to the point that I should start using Node. Everything is installed, and I put the angular and bootstrap scripts in the appropriate folder. The problem is that none of these files were found when trying to run the application in localhost: 3000.

Errors I get:

The errors i get

The directory structure of my project:

Directory structure of my project

This is the code that I still have:

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");
}]);
+4
source share
3 answers

You do not need to reference your assets using a folder publicin your path

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

, public express, ( app.js ), ,

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

, css ..

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

express .

+4

app.js ? , public? , .

public .

, ? ( app.use(express.static('public')); - public - html , . , public . , , - , ​​ .

0

If you use express routes, you need to set the static path to app.js, for example:

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

And in index.ejs:

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

Source: https://habr.com/ru/post/1654388/

More articles:


All Articles