Using Ui-view Lead To Failed To Instantiate Module Ui.router

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.m

Solution 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>