After spending a considerable amount of time working on AngularJS, I encountered an error stating that Angular is being used before it was defined. Despite watching several instructional videos and thoroughly reviewing the documentation, even with just the first line in the JS file, the error persists. In the index file, I have ensured that Angular 1.6.2 is called as the first file before anything else. This confusion arises from being told that it is being used before being defined.
Here is my HTML code:
<!doctype html>
<html ng-app="weatherApp">
<head>
<!-- Bootstrap 3 Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- AngularJS -->
<script src="//code.angularjs.org/1.6.2/angular.min.js"></script>
<script src="//code.angularjs.org/1.6.2/angular-route.min.js"></script>
<script src="//code.angularjs.org/1.6.2/angular-resource.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
<div class="container">
<div>
<div id="web-api">
<h1>test</h1>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>
And here is the corresponding JS code:
// MODULE - WEATHER
var weatherApp = angular.module('weatherApp', ['ngRoute', 'ngResource']);
weatherApp.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
// ROUTING
weatherApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.htm',
controller: 'homeController'
})
});
weatherApp.controller('homeController', ['$scope', function($scope) {
}]);
weatherApp.controller('forecastController', ['$scope', function($scope) {
}]);