angularjs - Javascript files can't be found and loaded -
i following tutorial, uses mean stack. got point i'm supposed start using node. installed , i've put angular , bootstrap scripts in respective folder. problem none of these files found when try run application in localhost:3000.
the errors i'm getting:
the directory structure of project:
this code i've got 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 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}} - {{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 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 posts service controller // can access data app.controller ("mainctrl",function ($scope,posts) { // binding scope.posts variable in our controller // 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 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 object array property called posts app.factory("posts",[function () { var o = { posts : [] }; return o; }]) app.config (["$stateprovider","$urlrouterprovider",function ($stateprovider,$urlrouterprovier) { // configuring home state $stateprovider .state("home",{ url: "/home", templateurl : "/home.html", controller : "mainctrl" }) .state("posts",{ // id route parameter url : "/posts/{id}", templateurl : "/posts.html", controller : "postsctrl" }); $urlrouterprovier.otherwise("home"); }]);
you needn't reference assets publicfolder in path
<link rel="stylesheet" type="text/css" href="../public/stylesheets/bootstrap.css"> assuming have set public folder in expressserver below (your app.js in case), should see line similar below
app.use(express.static('public')); this default location public assets i.e css etc defined.rather do
<link rel="stylesheet" type="text/css" href="stylesheets/bootstrap.css"> as express navigate defined public folder default.
Comments
Post a Comment