Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Otherwise functinality like $routeProvider #208

Closed
SmithSamuelM opened this issue Jun 26, 2013 · 15 comments
Closed

Otherwise functinality like $routeProvider #208

SmithSamuelM opened this issue Jun 26, 2013 · 15 comments
Labels
docs

Comments

@SmithSamuelM
Copy link

How do I implement the equivalent of the angular $routeProvider ".otherwise" route
as a catchall to any other urls that user might input?

as in
.otherwise redirectTo: "#{base}/app/home"
@laurelnaiad
Copy link

You can inject $urlRouterProvider in the same place you inject $stateProvider and configure it like this:
https://github.com/angular-ui/ui-router/blob/0.0.1/sample/index.html#L54

      $urlRouterProvider
        .otherwise('/');

angular.js is in a bit of flux when it comes to treatment of appBase as they try to work out the kinks of operating in html5 and hash mode and dealing with subdirectories... it's a strangely difficult challenge. Is the issue just that you didn't know about $urlRouterProvider or that you're struggling with the path of the redirect?.... only asking because I know it's confusing and want to make sure which issue(s) is (are) relevant to you.

@SmithSamuelM
Copy link
Author

I saw some references in comments to urlRouterProvider but did not see it mentioned in the docs so I am trying to figure out the best way to replicate the functionality in angular $routeProvider as a first step to migrating an app to use ui-router.

So is the syntax the same? Does urlRouterProvider support the redirectTo: property
could I do?

$urlRouterProvider.otherwise({redirectTo: "/demo/app/home"});

Or do I need to use some other syntax to get the same result of redirecting any unmatched urls to a specified url

@laurelnaiad
Copy link

What did you try that didn't work?

@SmithSamuelM
Copy link
Author

I tried

(javascript version of the coffeescript)

$urlRouterProvider.otherwise({
redirectTo: "" + base + "/app/home"
});

And I get this error

Uncaught Error: 'rule' must be a function from MainApp router.js:425
$UrlRouterProvider.otherwise router.js:425
mainApp.controller.$scope.location main.js:21
invoke angular.js:2897
(anonymous function) angular.js:2816
forEach angular.js:130
loadModules angular.js:2802
createInjector angular.js:2744
resumeBootstrapInternal angular.js:978
bootstrap angular.js:993
angularInit angular.js:954
(anonymous function) angular.js:14843
trigger angular.js:1757
(anonymous function) angular.js:1992
forEach angular.js:130
eventHandler

I find it somewhat confusing that the example you example code above https://github.com/angular-ui/ui-router/blob/0.0.1/sample/index.html#L54
uses all three services: $routeProvider, $urlRouterProvider, and $stateProvider.

begs the question of when to use one versus the other etc.

@SmithSamuelM
Copy link
Author

So I played around and it appears that this syntax works

$urlRouterProvider.otherwise("" + base + "/app/home");

In other words urlRouterProvider does not support the {redirectTo: url}) signature like routeProvider

@laurelnaiad
Copy link

begs the question of when to use one versus the other etc.

I'm glad you figured it out. I wish it were simpler, too! :) Give ui-router a chance... it might take a little change but I bet you'll find it worth your while!

@SmithSamuelM
Copy link
Author

I found the following in another comment. It should be in the docs or example as standard practice as many will be migrating from routeProvider and want the simplest use case that maps.
#89
Quoting:

Use $stateProvider to set up all your states and then $urlRouterProvider to set up a single otherwise.

$urlRouterProvider.otherwise("/"); // this will send any non-valid url back to "/'
or
$urlRouterProvider.otherwise("/myhomeurl"); // this will send any non-valid url back to "/myhomeurl', assuming thats the entry point of your app

Also if using angular-unstable 1.1.5 will need to add
to 

 <head>
      ...
      <base href="/"></base>
     ...
 </head>

See http://stackoverflow.com/questions/17200231/how-to-set-default-url-route

Thanks for the help.

@laurelnaiad
Copy link

That was my stack overflow answer. It's a quirk in Angular 1.1.5 and has nothing to do with ui-router and nothing to do with "otherwise" functionality, even though the question was posed that way.

@nateabele
Copy link
Contributor

Flagging this as a docs issue for @timkindberg.

@timkindberg
Copy link
Contributor

Added to FAQ. https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#issue-my-assets-and-templates-are-not-loading

@timkindberg
Copy link
Contributor

@SmithSamuelM Is this able to be closed now?

@SmithSamuelM
Copy link
Author

Yes

@kpraczyk
Copy link

define(['angular', 'app'], function(angular, app) {

return app.config(['$routeProvider', '$stateProvider', '$urlRouterProvider',
function($routeProvider, $stateProvider, $urlRouterProvider) {

    var changeActiveLink = function() {
        var pageKey = this.pageKey;
        $(".pagekey").toggleClass("is-active", false);
        $(".pagekey_" + pageKey).toggleClass("is-active", true);
    }

    $stateProvider.state('home', {
        controller : 'HomeCtrl',
        url : "/home",
        pageKey : 'HOME',
        views : {
            "contentView" : {
                templateUrl : 'app/partials/home.html'
            }
        },
        onEnter : changeActiveLink

    });
    $stateProvider.state('contact', {
        controller : 'ContactCtrl',
        url : "/contact",
        controller : 'ContactCtrl',
        pageKey : 'CONTACT',
        views : {
            "contentView" : {
                templateUrl : 'app/partials/contact.html'
            }
        },
        onEnter : changeActiveLink
    });

    $stateProvider.state('home.subMenu', {
        controller : 'HomeCtrl',
        url : "/home/:homeId",
        pageKey : 'CONTACT',
        controller : 'ContactCtrl',
        views : {
            "contentView" : {
                templateUrl : 'app/partials/home.html'
            }
        },
        onEnter : changeActiveLink
    });

    $stateProvider.state('projects', {
        controller : 'HomeCtrl',
        url : "/projects",
        pageKey : 'PROJECTS',
        controller : 'ContactCtrl',
        views : {
            "contentView" : {
                templateUrl : 'app/partials/projects.html'
            }
        },
        onEnter : changeActiveLink
    });

}]).run(['$state',
function($state) {
    $state.transitionTo('home');
}]);

});

@kpraczyk
Copy link

this is what you looking for:
.run(['$state',
function($state) {
$state.transitionTo('home');
}]);

@SmithSamuelM
Copy link
Author

What part is the "otherwise"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
docs
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@nateabele @timkindberg @SmithSamuelM @laurelnaiad @kpraczyk