bk129 bk129 - 4 months ago 9
AngularJS Question

i am getting error like this in angular js Uncaught Error: [$injector:modulerr]

I am having a problem with Angular JS receiving an error : Uncaught Error: [$injector:modulerr]. My JS-file looks

this is my app js

var app = angular.module(' myApp', ['ngRoute']);
app.config(["$routeProvider", function($routeProvider) {
$routeProvider

.state('home', {
url: '/home',
abstract: true,
templateUrl: 'templates/home.html',
controller: 'homeCtrl'
});
otherwise('/home');
}]);


this is my index page

<div ng-app="myApp">
<div ng-view></div>
</div>

<script src="js/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script type="text/javascript" src="lib/controller.js"></script>
<script type="text/javascript" src="lib/app.js"></script>
<script type="text/javascript" src="lib/directives.js"></script>


this is my controller js

var app = angular.module('myApp',[]);
app.controller('homeCtrl', function($scope)
{
$scope.names = [{nickname:'n',fullname:'nakama'}];
});


this is my home page

<div>
<ul>
<li ng-repeat="x in names">
{{x.nickname + '<-means->' + x.fullname}}
</li>
</ul>
</div>

Answer

Load your app.js before your controller.js

 <script src="js/angular.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
 <!--Load this first-->
 <script type="text/javascript" src="lib/app.js"></script>
 <script type="text/javascript" src="lib/controller.js"></script>
 <script type="text/javascript" src="lib/directives.js"></script>