$routeProvider 和 $stateProvider 有什么区别

AngularJS

$routeProvider和$stateProvider是AngularJS中用于路由管理的两个服务。它们的作用是定义不同的路由规则，使得在不同的URL中能够加载不同的视图和控制器。虽然它们的目的是相同的，但是它们在用法和功能上有一些区别。

$routeProvider是AngularJS的原始路由提供者，它是AngularJS 1.x版本中用于定义路由规则的主要方式。它使用when方法来定义不同URL路径所对应的视图和控制器。$routeProvider通过$routeProvider.when(path, route)方法来定义路由规则，其中path是URL路径，route是一个对象，包含了视图和控制器的定义。例如：

Javascript
$routeProvider
  .when('/home', {
    templateUrl: 'views/home.html',
    controller: 'HomeController'
  })
  .when('/about', {
    templateUrl: 'views/about.html',
    controller: 'AboutController'
  })
  .otherwise({
    redirectTo: '/home'
  });

上述代码定义了两个路由规则，当访问/home路径时，会加载home.html视图和HomeController控制器，当访问/about路径时，会加载about.html视图和AboutController控制器。如果访问的路径不匹配任何已定义的规则，则会重定向到/home路径。

$stateProvider是AngularUI Router提供的一种路由方式，它是在AngularJS原生路由的基础上进行扩展的。$stateProvider使用state方法来定义路由规则，它的用法更加灵活且功能更加强大。$stateProvider通过$stateProvider.state(name, state)方法来定义路由规则，其中name是状态的名称，state是一个对象，包含了视图和控制器的定义。例如：

Javascript
$stateProvider
  .state('home', {
    url: '/home',
    templateUrl: 'views/home.html',
    controller: 'HomeController'
  })
  .state('about', {
    url: '/about',
    templateUrl: 'views/about.html',
    controller: 'AboutController'
  })
  .state('otherwise', {
    url: '*path',
    templateUrl: 'views/home.html',
    controller: 'HomeController'
  });

上述代码定义了两个路由规则，与$routeProvider相比，$stateProvider使用了更加直观的语法来定义路由规则。它通过url属性来定义URL路径，通过templateUrl属性来定义视图模板，通过controller属性来定义控制器。与$routeProvider不同的是，$stateProvider还可以定义更复杂的路由规则，例如嵌套路由、多视图等。

使用$routeProvider和$stateProvider的案例代码

Javascript
// 使用$routeProvider的案例代码
angular.module('myApp', ['ngRoute'])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/home', {
        templateUrl: 'views/home.html',
        controller: 'HomeController'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutController'
      })
      .otherwise({
        redirectTo: '/home'
      });
  }]);
// 使用$stateProvider的案例代码
angular.module('myApp', ['ui.router'])
  .config(['$stateProvider', function($stateProvider) {
    $stateProvider
      .state('home', {
        url: '/home',
        templateUrl: 'views/home.html',
        controller: 'HomeController'
      })
      .state('about', {
        url: '/about',
        templateUrl: 'views/about.html',
        controller: 'AboutController'
      })
      .state('otherwise', {
        url: '*path',
        templateUrl: 'views/home.html',
        controller: 'HomeController'
      });
  }]);

区别

$routeProvider是AngularJS原生提供的路由服务，使用较为简单，适用于简单的路由需求；$stateProvider是AngularUI Router提供的路由服务，功能更加强大，适用于复杂的路由需求。

使用$routeProvider时，需要注入ngRoute模块；使用$stateProvider时，需要注入ui.router模块。

$routeProvider使用when方法来定义路由规则；$stateProvider使用state方法来定义路由规则。

$routeProvider的路由规则较为简单，不支持嵌套路由等复杂功能；$stateProvider支持嵌套路由、多视图等更复杂的路由功能。

，$routeProvider和$stateProvider都是AngularJS中用于路由管理的重要服务，开发者可以根据自己的需求选择合适的路由方式来定义路由规则。