failed to include js file in my index.html running restify server

83 views

Skip to first unread message

Jimmy

unread,

Jul 6, 2014, 12:02:43 AM7/6/14

to res...@googlegroups.com

I am learning to use Restify to build a Restful API and work with Angular.

Below is my structure:

Project
  page_admin        
    core.js 
    index.html
  node_modules
    restify
    mongojs
  server.js

I had set up server and implemented several API calls.

Below news API return a list of JSON data in browser:

`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"}]`

here is my code to handle client side route:

server.get('/', restify.serveStatic({

    'directory': './page_admin',
    'default': 'index.html'
}));

My index.html is simple:

<!-- 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 is like this:

    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);

        });
    }

when I try to navigate to: http://localhost:8080

I got my index page but it shows me:

'My example is working {{ news.length }}

and in console, I saw following error:

    GET `http://localhost:8080/core.js` 404 (Not Found) 
    localhost/:24

    Uncaught Error: No module: bluesky 
    angular.min.js:18

if I directly put core.js in index.html, then I can get all JSON data and works fine.