Why is the external JavaScript file not responding to AngularJS?

Question

This angularJS file does not display the value of the expression as" Full Name: John Doe"; instead it displays "Full Name: {{firstName + " " + lastName}}". What might I have missed?

<!DOCTYPE html>
<html>

<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>    
</head>

<body>

<div ng-app="" ng-controller="personController">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script src="C:\Users\Vincent\Documents\Python\angularjs\StraightAngularJS\personController.js"></script>

</body>
</html>


<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>

<body>

<div ng-app="" ng-controller="personController">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

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

</body>
</html>

End of AngularJS file

Below is its external javaScript file: personController.js

function personController($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe",
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
}

try using proper controller constructor per docs. Support for global functions has been dropped. Also better to use relative path to your script file — charlietfl
– charlietfl, Commented Dec 24, 2014 at 3:02
Before you start wondering why the script doesn't work, make sure it is loaded at the first place! If you are using Chrome, check the sources tab to find whether your file personController.js is there. Btw, why do you have two body tag there?... — Joy
– Joy, Commented Dec 24, 2014 at 3:30

gehleh · Accepted Answer · 2014-12-24 04:47:27Z

1

This is likely because you're including your script tag to the app <script src="personController.js"></script> outside of the scope of the div containing your ng-app.

As shown in this JSfiddle, the code does work correctly, so there's nothing else wrong.

Hope this helps.

edited Dec 24, 2014 at 4:47

answered Dec 24, 2014 at 4:34

gehleh

1,2111 gold badge9 silver badges5 bronze badges

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

1 Comment

TheUnit Over a year ago

Also learnt, relative file location of external jsp file not necessary.

Paul · Accepted Answer · 2014-12-24 05:20:53Z

0

This issue may be due to browser restriction for CORS (Cross Origin Resource Sharing). To know more about CORS, read - http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Using Chrome you can disable the security check by launching Chrome with the following parameter, which will allow the browser to load files from different domains:

chrome --disable-web-security

If you are trying to load the controller from local disk.

<script src="C:\Users\[user-name]\Documents\Python\angularjs\StraightAngularJS\personController.js"></script>

Launching Chrome with the following parameter is required:

chrome --allow-file-access-from-files

But please note that, this is not the recommended way and you better use a http server to load your resources.

edited Dec 24, 2014 at 5:20

Paul

7314 silver badges11 bronze badges

answered Dec 24, 2014 at 3:09

Rabi

2,23019 silver badges18 bronze badges

Collectives™ on Stack Overflow

Why is the external JavaScript file not responding to AngularJS?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related