Jquery, bootstrap not loading

Question

But seems like jquery or angular or boostrap.min.js does not load properly. The file location is correct but still it shows me

Uncaught SyntaxError: Unexpected token <

for all the js files I've included in main.html

Here's my main.html

<html ng-app='ContactsApp'>
        <head>
            <title> My first Angular Project </title>
            <base href='/'> 
            <link rel="stylesheet" type="text/css" href="src/boostrap.min.css">
        </head>
        <body>
            <div class = 'container'>

                    <div class='page-header'>

                            <h1> Contacts: {{message}}</h1> 
                    </div>
            </div>

<script src = 'app/bower_components/jquery/jquery.min.js'></script>
<script src = 'app/bower_components/bootstrap/js/boostrap.min.js'></script>
<script src = 'app/bower_components/angular/angular.min.js'></script>
<script src= 'public/app.js'></script>
        </body>
</html>

Here's my app.js

angular.module('ContactsApp', [])
.run(function ($rootScope){

    $rootscope.message = "Hello Angular..";
});

Here's my server.js

var express = require('express'),
    app = express();
//app object is express application 
app 
        .use(express.static('./public'))
        .get('*',function(req,res){
                res.sendfile('public/main.html');
        })
        .listen(3000);

the code looks ok.. are you sure those files were pulled down by bower? do they exist in those directories with js inside? — Austin Greco
– Austin Greco, Commented Apr 24, 2015 at 17:35
how do I make sure that those files were pulled down by bower? Yes they do exist in those directories. The path is surely not wrong. — stry
– stry, Commented Apr 24, 2015 at 17:37
One potential source for problems is a typo ` boostrap.min.js `. I left the typo intentionally since it might be part of the problem. — ryanyuyu
– ryanyuyu, Commented Jul 1, 2015 at 13:24

Wahid Kadwaikar · Accepted Answer · 2015-04-24 17:55:52Z

Do you have jQuery, bootstrap, angular files in proper folder as linked in your project? Let us assume you don't and let's try that by linking those files online. Then your main.html would look like:

<html ng-app="ContactsApp">
        <head>
            <title> My first Angular Project </title>
            <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
            <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css.map">
        </head>
        <body>
            <div class = 'container'>

                    <div class='page-header'>

                            <h1 ng-cloak> Contacts: {{message}}</h1> 
                    </div>
            </div>

        <script src= 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
        <script src= 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js'></script>
        <script src= 'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js'></script>
        <script src= 'public/app.js'></script>
        </body>
</html>

And your app.js would look like:

angular.module('ContactsApp', [])
.run(function ($rootScope){

    $rootScope.message = "Hello Angular..";
});

The problem with you current app.js is that the 'S' of $rootScope.message is not capitalised.

I hope this helps.

Austin Greco · Accepted Answer · 2015-04-24 17:56:13Z

1

I would double check your paths for the scripts. Based on your express routes, if the js file can't be found it will respond with public/main.html. Then the browser would try to load that as a script, which would give the syntax error about <

answered Apr 24, 2015 at 17:56

Austin Greco

33.6k6 gold badges60 silver badges61 bronze badges

Collectives™ on Stack Overflow

Jquery, bootstrap not loading

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related