Angular.js not found, but no error on link

Question

I picked up Angular.js yesterday as part of an internship, and Node.js the day before, so I'm a complete beginner with these technologies.

Basically, I tried to make a really simple page with an input field which would print the input text right next to the field, like such. As you can see, it works in a jsfiddle.

But when I try this locally, I get a ReferrenceError at the angular.module call of my controller, and this error in my browser.

Here's my index.html:

<div ng-app="myApp">
<head>
</head>
<body>
    <div class="container" ng-controller="AppCtrl">
        <input ng-model="query"/>
        <span><b ng-bind="queryResult()"></b></span>
    </div>



    <!-- Scripts et liens css.-->
    <script src="./controller.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="./bower_components/jquery/dist/jquery.js"></script>
    <script src="./bower_components/angular/angular.js"></script>
    <script src="./bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
    <script src="./bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="./bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="./bower_components/jquery/dist/jquery.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
</body>

And my controller.js:

var myApp = angular.module("myApp", []);

myApp.controller('AppCtrl', function($scope) {
    $scope.query = "";
    $scope.queryResult = function(){
        return $scope.query;
    };
});

Any idea what I'm doing wrong ?

Why are you including twice jquery in your index.html ? You also need to include your controller after angularJS — Sparw
– Sparw, Commented Jun 1, 2016 at 12:02
A couple other issues aside from what was included in the answer below: 1) That <div> tag above the <head> section. 2) ng-app should probably be affixed to <body> instead. 3) Your CSS should go in your head section. 4) You're including angular, jQuery, and bootstrap multiple times. — J. Titus
– J. Titus, Commented Jun 1, 2016 at 12:05
It also looks like you're embedding angular twice (once from a CDN, once as a bower component.) Meanwhile, consider omitting jQuery altogether, especially while you're learning Angular; angular's own jqlite is nearly always sufficient. — Daniel Beck
– Daniel Beck, Commented Jun 1, 2016 at 12:05
Thanks everyone. It was apparently the order, as was said in the answer and comments. I feel like an idiot. As per the double includes, I got the includes from another similar file, and must have messed up the copy/paste. — Martin Locqueville
– Martin Locqueville, Commented Jun 1, 2016 at 12:12

Hadi · Accepted Answer · 2016-06-01 12:01:46Z

5

you should include

<script src="./controller.js"></script>

after angular js files

answered Jun 1, 2016 at 12:01

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

forethought · Accepted Answer · 2016-06-01 12:04:38Z

The order of your controller file and AngularJS CDN is the problem. Please add your JS file beneath AngularJS CDN.

And also You have added ng-app to a div which does not have a closing tag. It might cause problems too.

Try the following code:

<html ng-app="myApp">
<head>
</head>
<body>
    <div class="container" ng-controller="AppCtrl">
        <input ng-model="query"/>
        <span><b ng-bind="queryResult()"></b></span>
    </div>



    <!-- Scripts et liens css.-->
    <script src="./controller.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="./bower_components/jquery/dist/jquery.js"></script>
    <script src="./bower_components/angular/angular.js"></script>
    <script src="./bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
    <script src="./bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="./bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="./bower_components/jquery/dist/jquery.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
</body>
</html>

mlhuff12 · Accepted Answer · 2016-06-01 14:06:35Z

0

It looks like you are including jQuery after angular. jQuery should be first.

It also looks like you are including angular twice.

angular.min.js and angular.js

answered Jun 1, 2016 at 14:06

mlhuff12

608 bronze badges

Collectives™ on Stack Overflow

Angular.js not found, but no error on link

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related