While learning angular-js, I came across the following error:
Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
The error seems to be straightforward that the module is not loaded. However, I cross-checked and found that module was there in the script and should have been loaded. My code looked like below:
<table ng-app="myApp" ng-controller="testController">
<tr ng-repeat="x in lstStrings">
<td>{{ x }}</td>
</tr>
</table>
<script type="text/javascript">
var angApp = angular.module('myApp');
angApp.controller('testController', function ($scope, $http) {
$http.get('http://localhost:57964/api/test/getstringslist')
.then(function (response) {
$scope.lstStrings = response.data;
});
});
</script>
Then while comparing the code with some of the samples, I found that a very minor but very effective mistake which was causing the issues. The issue was that I was missing the second parameter of the angular.module function, So the missing part was the one highlighted below:
<script type="text/javascript">
var angApp = angular.module('myApp', []);
angApp.controller('testController', function ($scope, $http) {
$http.get('http://localhost:57964/api/test/getstringslist')
.then(function (response) {
$scope.lstStrings = response.data;
});
});
</script>
See how small the issue was, but it was the one that was breaking the application. As per official angular documentation, the second parameter is:
This array is the list of modules
This is a required parameter and can be specified as blank, if there is no dependency of other modules, on this one. Hope this helps somebody else also...!!! Happy coding.
Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
The error seems to be straightforward that the module is not loaded. However, I cross-checked and found that module was there in the script and should have been loaded. My code looked like below:
<table ng-app="myApp" ng-controller="testController">
<tr ng-repeat="x in lstStrings">
<td>{{ x }}</td>
</tr>
</table>
<script type="text/javascript">
var angApp = angular.module('myApp');
angApp.controller('testController', function ($scope, $http) {
$http.get('http://localhost:57964/api/test/getstringslist')
.then(function (response) {
$scope.lstStrings = response.data;
});
});
</script>
Then while comparing the code with some of the samples, I found that a very minor but very effective mistake which was causing the issues. The issue was that I was missing the second parameter of the angular.module function, So the missing part was the one highlighted below:
<script type="text/javascript">
var angApp = angular.module('myApp', []);
angApp.controller('testController', function ($scope, $http) {
$http.get('http://localhost:57964/api/test/getstringslist')
.then(function (response) {
$scope.lstStrings = response.data;
});
});
</script>
See how small the issue was, but it was the one that was breaking the application. As per official angular documentation, the second parameter is:
This array is the list of modules
myApp
depends on.This is a required parameter and can be specified as blank, if there is no dependency of other modules, on this one. Hope this helps somebody else also...!!! Happy coding.
No comments:
Post a Comment