using ui-view lead to Failed to instantiate module ui.router

Question

I'm learning Angularjs and I am trying to structure this plunker over different files and using ui-view .

So here is 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')
});

my index.html with 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="angular.js@1.2.2" 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>

my controller

'use strict';

angular.module('Main').controller('MainCntrl', [

function MainCtrl($scope) {
    ...
}]);

But when I run my project, I am getting this error 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 am I missing?

Answer 1

The documentation for ui.router states that it must be injected as a dependency in the application:

angular.module('plunker', ['angularCharts', 'Main', 'ui.router']);

You also need to refactor your route configuration properly:

angular.module('plunker').config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('app', {
            // The url needs to be defined as a directory
            url: '/',
            templateUrl: 'main.html',
        })
    // Redirect to the '/app' route.
    $urlRouterProvider.otherwise('/app')
});

This assumes you have included angular-ui-router.js as a script in your index page.

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.17/angular-ui-router.js"></script>

using ui-view lead to Failed to instantiate module ui.router

Question

1 answers

solution1
3 ACCPTED 2016-02-02 17:33:16

using ui-view lead to Failed to instantiate module ui.router

Question

1 answers

solution1 3 ACCPTED 2016-02-02 17:33:16

solution1
3 ACCPTED 2016-02-02 17:33:16