Move a script to its own js file

Question

I want to move the angular to its own .js file, so I looked at Using an HTML button to call a JavaScript function.

<input id="clickMe" type="button" value="clickme" onclick="doFunction();" />

As far as I understand, an event has to be triggered when I click on the button, so I tried following this example on w3schools

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="count = count + 1">Click Me!</button>

<p>{{ count }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
});
</script> 

</body>
</html>

It simply counts the number of times a button has been clicked and it works. However, when I move the <script> to its own .js, the function is not found. Am I missing something? a dependency perhaps?

New files:

HTML:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="count = count + 1">Click Me!</button>

<p>{{ count }}</p>

</div>

</body>
</html>

.js

<script>
var app = angular.module('myApp', ['ngRoute']);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
});
</script>

What is the actual error you are getting? And what does your html look like when you move the angularjs code to its own file? — Tyler, Jan 31 '18 at 22:28
@Tyler ,The HTML file looks the same just remove `` (Add whats removed without the tags) to a .js file. ( I will edit question) — Tony Tannous, Jan 31 '18 at 22:39
Possible duplicate of [How can you access external JavaScript arrays in an html file?](https://stackoverflow.com/questions/46531704/how-can-you-access-external-javascript-arrays-in-an-html-file) — Heretic Monkey, Jan 31 '18 at 22:52
@MikeMcCaughan I do agree it is very similar, but with angularjs, you do need to be aware that it should be below the angular script. — Tyler, Jan 31 '18 at 22:54
Note: the `` tag does not use or need a closing slash and never has. — Rob, Jan 31 '18 at 22:54
@Tyler Is that really a huge leap to ask someone to make? How about https://stackoverflow.com/q/36988823/215552 then? Or https://stackoverflow.com/q/29035843/215552? Or https://stackoverflow.com/q/34729022/215552? I could go on... — Heretic Monkey, Jan 31 '18 at 23:00
@MikeMcCaughan I've seen it cause plenty of people issues. I'm not trying to start a flame war, only pointing out that the question(s) you linked aren't exact duplicates of this one. — Tyler, Jan 31 '18 at 23:04

Tyler · Accepted Answer · 2018-01-31T23:00:37.357

2

So two problems.

First, in your .js file you can remove the <script> tags. You only need this for javascript in html files.

Second, in your .html file, you need to add a reference to your script file. This needs to go below the angular script since it is dependent on that script, so just add, <script src="[link to your script file]"></script> to your html right below the angular script.

.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="app.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="count = count + 1">Click Me!</button>

<p>{{ count }}</p>

</div>

</body>
</html>

app.js

var app = angular.module('myApp', ['ngRoute']);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
});

edited Jan 31 '18 at 23:00

answered Jan 31 '18 at 22:52

Tyler

1,029
1
8
20

@TheOneWhoMade I write angularjs apps for a living, this is the only way I've ever seen it included in a separate file. Your answer and I'm guessing your understanding of how browsers handle these sorts of things seems to be fundamentally flawed. I think you are confusing CORS requests with script tags. – Tyler Jan 31 '18 at 22:56
This may be different between raw js and angular. @Tyler – Jan 31 '18 at 22:57

Move a script to its own js file

1 Answers1