I am a newcomer to Angular and I encountered an issue while trying to implement routeProvider in my app. The error message that keeps appearing is:
Uncaught Error: [$injector:modulerr] Failed to create module 'app' due to: Error: [$injector:nomod] Module 'app' is not available! You may have misspelled the module name or forgotten to load it properly. When registering a module, make sure to specify dependencies as the second argument.
This is how my index.html is structured:
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
The contents of my app.js are as follows:
var myApp = angular.module('app', ['ngRoute']);
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'components/splash.html',
controller: 'segmentListCtrl'
})
.otherwise({
redirectTo: '/'
});
});
myApp.controller('segmentListCtrl', ['$scope', '$http', function ($scope, $http){
$http.get('data/segments.json').success(function (data){
$scope.segmentList = data;
});
}]);
Below is the content of the splash.html which serves as the template for my routing:
<div id="splash" class="row" ng-controller="segmentListCtrl">
<div class="columns segment" ng-repeat="segment in segmentList">
<a href="#">
<h2>{{segment.title}}</h2>
<h5>{{segment.sub}}</h5>
</a>
</div>
</div>
Everything was functioning smoothly before attempting to integrate ng-route. However, after breaking it down into parts, I started encountering this error which I can't seem to resolve. Appreciate any guidance provided on this matter!