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
– Tyler, Commented Jan 31, 2018 at 22:28
@Tyler ,The HTML file looks the same just remove <script> whats between </script> (Add whats removed without the tags) to a .js file. ( I will edit question) — Tony Tannous
– Tony Tannous, Commented Jan 31, 2018 at 22:39
Possible duplicate of How can you access external JavaScript arrays in an html file? — Heretic Monkey
– Heretic Monkey, Commented Jan 31, 2018 at 22:52
@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
– Tyler, Commented Jan 31, 2018 at 23:04

Tyler · Accepted Answer · 2018-01-31 23:00:37Z

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, 2018 at 23:00

answered Jan 31, 2018 at 22:52

Tyler

1,0491 gold badge8 silver badges20 bronze badges

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

2 Comments

Tyler Over a year ago

@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.

user9107868 Over a year ago

This may be different between raw js and angular. @Tyler

Collectives™ on Stack Overflow

Move a script to its own js file

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related