【发布时间】:2014-08-26 15:27:09
【问题描述】:
我正在学习使用 Restify 构建一个 Restful API 并使用 Angular。
下面是我的结构:
Project
page_admin
core.js
index.html
node_modules
restify
mongojs
server.js
我已经设置了服务器并实现了几个 API 调用。
以下新闻 API 在浏览器中返回 JSON 数据列表:
`http://localhost:8080/news`
`[{"_id":"53b2a2c3373551813dfe8b91","title":"first","subtitle":"foobar","textbody":"","postedOn":"2014-07-01T12:00:03.215Z"},{"_id":"53b2a122373551813dfe8b8e","title":"my second","subtitle":"my second title","textbody":"node is cool","postedOn":"2014-07-01T11:53:06.389Z"},{"_id":"53b2a0cd373551813dfe8b8d","title":"delay announcement","subtitle":"sub ","textbody":"I am the text body","postedOn":"2014-07-01T11:51:41.678Z"}]`
这是我处理客户端路由的代码:
server.get('/', restify.serveStatic({
'directory': './page_admin',
'default': 'index.html'
}));
我的 index.html 很简单:
<!-- index.html -->
<!doctype html>
<!-- ASSIGN OUR ANGULAR MODULE -->
<html ng-app="bluesky">
<head>
<!-- META -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->
<title>My test app</title>
<!-- SCROLLS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><!-- load bootstrap -->
<style>
html { overflow-y:scroll; }
body { padding-top:50px; }
#todo-list { margin-bottom:30px; }
</style>
<!-- SPELLS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><!-- load angular -->
<script src="core.js"></script>
</head>
<!-- SET THE CONTROLLER AND GET ALL TODOS -->
<body ng-controller="mainController">
<div class="container">
<!-- HEADER AND TODO COUNT -->
<div class="jumbotron text-center">
<h1>My example is working <span class="label label-info">{{ news.length }}</span></h1>
</div>
<!-- TODO LIST -->
<div id="todo-list" class="row">
<div class="col-sm-4 col-sm-offset-4">
<!-- LOOP OVER THE TODOS IN $scope.todos -->
<div class="checkbox" ng-repeat="new in news">
<label>
<input type="checkbox" ng-click="deleteTodo(new._id)"> {{ new.subtitle }}
</label>
</div>
</div>
</div>
</div>
</body>
</html>
core.js 是这样的:
var bluesky = angular.module('bluesky', []);
function mainController($scope, $http) {
$scope.formData = {};
$http.get('/news')
.success(function(data) {
$scope.news = data;
console.log(data);
})
.error(function(data) {
console.log('Error: ' + data);
});
}
当我尝试导航到:http://localhost:8080
我得到了我的索引页,但它显示了我:
'My example is working {{ news.length }}
在控制台中,我看到以下错误:
GET `http://localhost:8080/core.js` 404 (Not Found)
localhost/:24
Uncaught Error: No module: bluesky
angular.min.js:18
我刚刚错过了什么,所以角度没有检索数据?
================================================ ===============
更新
如果我直接将core.js放在里面,那就可以了。
但是,如何解决这个 404 not found 问题?只是不想在索引页面中包含所有的js文件。
【问题讨论】:
-
您的索引文件中指定的 core.js 的位置似乎不正确。仔细检查路径。
-
正如它所说,它找不到你的 core.js 文件
-
page_admin 文件夹里的文件 ryt
-
嗨 Sam,试过了,但还是不行
标签: javascript json node.js angularjs restify