Using $routeProvider with $stateProvider

Question

in beginning I was just using $routeProvider as follows and it was giving me what I wanted.

angular.module('angularProject', ['angularProject.filters', 'angularProject.services', 'angularProject.directives', 'angularProject.controllers'])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/home', {
        title: 'Home',
        templateUrl: 'partials/home.html',
        controller: 'homeCtrl'
      })
      .otherwise({redirectTo: '/home'});
  }]);

But when I also wanted to use $stateProvider as follows it is not giving me errors but also not allowing me to change state..

var myapp=angular.module('angularProject', ['ui.bootstrap','ui.router','angularProject.filters', 'angularProject.services', 'angularProject.directives', 'angularProject.controllers'])
  myapp.config(['$routeProvider', '$stateProvider',function($routeProvider,$stateProvider) {
    $routeProvider
      .when('/home', {
        title: 'Home',
        templateUrl: 'views/home.html',
        controller: 'homeCtrl'
      })
      .otherwise('/home');
    $stateProvider
        // .state('index', {
            // url: "",
            // views: {
                // "viewA": {
                    // template: "index.viewA"
                // },
                // "viewB": {
                    // template: "index.viewB"
                // }
            // }
        // })
        .state('route1', {
            url: "/route1",
            views: {
                "viewA": {
                    template: "route1.viewA"
                },
                "viewB": {
                    template: "route1.viewB"
                }
            }
        })
        .state('route2', {
            url: "/route2",
            views: {
                "viewA": {
                    template: "route2.viewA"
                },
                "viewB": {
                    template: "route2.viewB"
                }
            }
        })
     // .otherwise({redirectTo: '/home'});
  }]);

Any help on how to use $stateProvider with $routeProvider would be appreciated..

score 10 · Accepted Answer · answered Nov 10 '13 at 10:22

10

I don't think it's possible and I don't think that ui.router was built to be used with ngRoute.
According to the ui-router docs, you should use ui-router's own implementation of $routeProvider, called $urlRouterProvider.

answered Nov 10 '13 at 10:22

gion_13

41,171
10
96
108

3

Mostly correct: they aren't intended to be used together, however, `ui.router` exposes a `$routeProvider` as part of its compatibility layer for use when migrating from `ngRoute`. The `$urlRouterProvider` *is* for managing URLs, but mainly only for redirects and `otherwise()` (catch-all) URLs. – Nate Abele Nov 11 '13 at 00:36
1

Yah .. You both are right..But $stateProvider is for changing internal views of your interface..Wt about root url , and specifying that this controller should be used...For Example I want to use it this way.. $urlRouterProvider.otherwise('/home'); $urlRouterProvider .when('/home', { title: 'Home', templateUrl: 'views/home.html', controller: 'homeCtrl' }) – pawan9977 Nov 11 '13 at 04:57
I resolved the problem guys..I guess I was using $urlrouterProvider wrong way..Thank u so much for suggestions.. – pawan9977 Nov 11 '13 at 06:38
1

Can you use routeProvider to handle auth, ie hide views from non logged in users? – Nikos Apr 07 '14 at 16:15

Using $routeProvider with $stateProvider

1 Answers1

Linked