AngularJs 中 $routeProvider 与 $stateProvider 的区别

https://stackoverflow.com/questions/27645202/what-is-the-difference-between-routeprovider-and-stateprovider-in-angularjs

Both do same work as like they used for routing purpose in SPA.

1. Angular Routing - per $routeProvider docs

URLs to controllers and views (HTML partials). It watches $location.url() and tries to map the path to an existing route definition.

HTML

<div ng-view></div>

Above tag will render the template from the $routeProvider.when() condition which you had mentioned in .config (configuration phase) of angular

Limitations:-

• The page can only contain single ng-view on page
• If your SPA has multiple small components on page which you wanted to render based on some condition, In such scenario $routeProvider fails.(for achieving the same we need to go for directive like ng-include, ng-switch, ng-if, ng-show actually which looks bad to have them in SPA)
• You can not relate between two routes like parent and child relationship.
• You cannot show and hide a part view based on url pattern.

---

2. ui-router - per $stateProvider docs

AngularUI Router is a routing framework for AngularJS, which allows you to organize the parts of your interface into a state machine. UI-Router is organized around states, which may optionally have routes, as well as other behavior, attached.

Multiple & Named Views

Another great feature is the ability to have multiple ui-views view per template.

While multiple parallel views are a powerful feature, you'll often be able to manage your interfaces more effectively by nesting your views, and pairing those views with nested states.

HTML

<div ui-view>
    <div ui-view='header'></div>
    <div ui-view='content'></div>
    <div ui-view='footer'></div>
</div>

The majority of ui-router's power is it can manages nested state & views.

Pros

• You can have multiple ui-view on single page
• various view can be nested in each other and maintain by defining state in routing phase.
• We can have child & parent relationship here, simply like inheritance in state, also you could define sibling states.
• You could change the ui-view="some" of state just by using absolute routing using @ with state name.
• Other way you could relative routing using only @ to change ui-view="some", This will replace the ui-view rather than checking it is nested or not.
• Here you could use ui-sref to create a href URL dynamically on the basis of URL mentioned in a state, also you could give a state params in the json format.

For more Information Angular ui-router

For better flexibility with various nested view with states, I'd prefer you to go for ui-router




https://stackoverflow.com/questions/33144690/what-is-diff-between-routeprovider-stateprovider-in-angularjs

Basically, $stateProvider, as the name suggests, allows you to have different states of one route. Meaning that you can give the state a name, different controller, different view without having to use a direct href to a route. Here you can see the differences in the code for $stateProvider and $routeProvider:

$routeProvider
        .when('/first/', {
            templateUrl: 'app/views/first.html',
            controller: 'FirstController'
        })
});

As you can see, the route definition is the url path in that example.

While, $stateProvider gives you a lot more flexibility, like in here:

 $stateProvider
         .state("thisIsTheSecondPage", {
                    url: "/second/",
                    templateUrl: '/app/views/second.html',
                    controller: 'SecondController'
                });

With ui-router and $stateProvider you can use nested views, which are far more complex than regular ngRoute routes.From a more personal point of view, using <a ui-sref="stateName"> is easier than having to use <a href="#/routename">.