Convert routing from a state provider to a route provider

Question

Convert routing from a state provider to a route provider

I have the following code in my config.JS that works fine:

function config($stateProvider, $urlRouterProvider, $ocLazyLoadProvider, IdleProvider, KeepaliveProvider, adalAuthenticationServiceProvider, $httpProvider) { // Configure Idle settings IdleProvider.idle(5); // in seconds IdleProvider.timeout(120); // in seconds $urlRouterProvider.otherwise("/dashboards/dashboard_1"); $ocLazyLoadProvider.config({ // Set to true if you want to see what and when is dynamically loaded debug: true }); $stateProvider .state('dashboards', { abstract: true, url: "/dashboards", templateUrl: "views/common/content.html", }) .state('dashboards.dashboard_1', { url: "/dashboard_1", templateUrl: "views/dashboard_1.html", resolve: { loadPlugin: function ($ocLazyLoad) { return $ocLazyLoad.load([ { serie: true, name: 'angular-flot', files: [ 'js/plugins/flot/jquery.flot.js', 'js/plugins/flot/jquery.flot.time.js', 'js/plugins/flot/jquery.flot.tooltip.min.js', 'js/plugins/flot/jquery.flot.spline.js', 'js/plugins/flot/jquery.flot.resize.js', 'js/plugins/flot/jquery.flot.pie.js', 'js/plugins/flot/curvedLines.js', 'js/plugins/flot/angular-flot.js', ] }, { name: 'angles', files: ['js/plugins/chartJs/angles.js', 'js/plugins/chartJs/Chart.min.js'] }, { name: 'angular-peity', files: ['js/plugins/peity/jquery.peity.min.js', 'js/plugins/peity/angular-peity.js'] } ]); } } })

When I try to convert it to use a route provider like this:

 function config($stateProvider, $urlRouterProvider, $ocLazyLoadProvider, IdleProvider, KeepaliveProvider, adalAuthenticationServiceProvider, $httpProvider) { // Configure Idle settings IdleProvider.idle(5); // in seconds IdleProvider.timeout(120); // in seconds //$urlRouterProvider.otherwise("/dashboards/dashboard_1"); $ocLazyLoadProvider.config({ // Set to true if you want to see what and when is dynamically loaded debug: true }); $urlRouterProvider.when("/dashboard_1", { controller: "MainCtrl", templateUrl: "/views/dashboard_1.html", resolve: { loadPlugin: function ($ocLazyLoad) { return $ocLazyLoad.load([ { serie: true, name: 'angular-flot', files: [ 'js/plugins/flot/jquery.flot.js', 'js/plugins/flot/jquery.flot.time.js', 'js/plugins/flot/jquery.flot.tooltip.min.js', 'js/plugins/flot/jquery.flot.spline.js', 'js/plugins/flot/jquery.flot.resize.js', 'js/plugins/flot/jquery.flot.pie.js', 'js/plugins/flot/curvedLines.js', 'js/plugins/flot/angular-flot.js', ] }, { name: 'angles', files: ['js/plugins/chartJs/angles.js', 'js/plugins/chartJs/Chart.min.js'] }, { name: 'angular-peity', files: ['js/plugins/peity/jquery.peity.min.js', 'js/plugins/peity/angular-peity.js'] } ]); } } }).otherwise({ redirectTo: "/dashboard_1" });

App.js

 (function () { angular.module('inspinia', [ 'ui.router', // Routing 'oc.lazyLoad', // ocLazyLoad 'ui.bootstrap', // Ui Bootstrap 'pascalprecht.translate', // Angular Translate 'ngIdle', // Idle timer 'AdalAngular', // ADAL JS Angular 'ngRoute' // Routing ]) })();