Recently, I've been diving into Angularjs and attempting to organize this plunker by splitting it across different files using ui-view.
Let's take a look at my app.js
'use strict';
angular.module('Main', []);
angular.module('plunker', ['angularCharts', 'Main', 'ui.router']);
angular.module('plunker').config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '',
templateUrl: 'main.html',
})
$urlRouterProvider.otherwise('app')
});
Now, onto my index.html which includes ui-view
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-charts</title>
<link rel="stylesheet" href="style.css" />
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="52333c35273e33207c382112637c607c60">[email protected]</a>" src="http://code.angularjs.org/1.2.2/angular.js" data-semver="1.2.2"></script>
<script data-require="d3@*" data-semver="3.3.11" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.3.11/d3.js"></script>
<script type="text/javascript" src="https://rawgit.com/chinmaymk/angular-charts/bower/dist/angular-charts.min.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ui-view=""></div>
</body>
</html>
Moving on to my controller
'use strict';
angular.module('Main').controller('MainCntrl', [
function MainCtrl($scope) {
...
}]);
However, upon running my project, an error popped up in the console log:
Uncaught Error: [$injector:modulerr] Failed to instantiate module plunker due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router due to:
Error: [$injector:nomod] Module 'ui.router' 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.
http://errors.angularjs.org/1.2.2/$injector/nomod?p0=ui.router
at https://code.angularjs.org/1.2.2/angular.js:78:12
at https://code.angularjs.org/1.2.2/angular.js:1522:17
at ensure (https://code.angularjs.org/1.2.2/angular.js:1447:38)
at module (https://code.angularjs.org/1.2.2/angular.js:1520:14)
at https://code.angularjs.org/1.2.2/angular.js:3544:22
at Array.forEach (native)
at forEach (https://code.angularjs.org/1.2.2/angular.js:300:11)
at loadModules (https://code.angularjs.org/1.2.2/angular.js:3538:5)
at https://code.angularjs.org/1.2.2/angular.js:3545:40
at Array.forEach (native)
http://errors.angularjs.org/1.2.2/$injector/modulerr?p0=ui.router&p1=Error%…F1.2.2%2Fangular.js%3A3545%3A40%0A%20%20%20%20at%20Array.forEach%20(native)
at https://code.angularjs.org/1.2.2/angular.js:78:12
at https://code.angularjs.org/1.2.2/angular.js:3572:15
at Array.forEach (native)
at forEach (https://code.angularjs.org/1.2.2/angular.js:300:11)
at loadModules (https://code.angularjs.org/1.2.2/angular.js:3538:5)
at https://code.angularjs.org/1.2.2/angular.js:3545:40
at Array.forEach (native)
at forEach (https://code.angularjs.org/1.2.2/angular.js:300:11)
at loadModules (https://code.angularjs.org/1.2.2/angular.js:3538:5)
at createInjector (https://code.angularjs.org/1.2.2/angular.js:3478:11)
http://errors.angularjs.org/1.2.2/$injector/modulerr?p0=plunker&p1=Error%3A…ector%20(https%3A%2F%2Fcode.angularjs.org%2F1.2.2%2Fangular.js%3A3478%3A11)
What could be causing this issue?