Angularjs 从ngRoute/$routeProvider迁移到ui路由器/$urlRouterProvider

我想开始使用Angular的ui路由器而不是ngRoute。最初，我的应用程序配置看起来像

myApp.config(["$routeProvider",
    function($routeProvider) {
        $routeProvider
            .when("/search", {
                templateUrl: "partials/customerSearch.html"
            })
            .when("/home", {
                templateUrl: "partials/home.html"
            })
            .when("/login", {
                templateUrl: "partials/login.html",
                controller:  "LoginCtrl"
            })
            .otherwise({
                redirectTo: "/home"
            })
        ;
    }
]);

我交换了库，并更改了配置。我知道我仍然可以使用

$routeProvider

，但这似乎是一个遗留的解决方法

myApp.config(["$urlRouterProvider", "$stateProvider",
    function($urlRouterProvider, $stateProvider) {
        $urlRouterProvider
            .when("/search", "partials/customerSearch.html")
            .when("/home",   "partials/home.html")
            .when("/login",  "partials/login.html")
            .otherwise("/home")
        ;
        $stateProvider
            .state({
                name:        "customer",
                url:         "/customer/:username",
                templateUrl: "partials/customer.html"
            })
            .state({
                parent:      "customer",
                name:        "details",
                url:         "/details",
                templateUrl: "partials/customerDetails.html"
            })
        ;

    }
]);

这给了我一些错误，似乎表明

$digest

卡在了一个循环中。我怀疑

。否则（“/home”）

规则。我是否正确地指定了

处理程序

s，就好像它们是模板URL一样

---

如果我注释掉

.when（）

s，则除了

“/customer/：username”

之外，没有任何功能。是否必须为每条路线定义一个状态？如果是这样，同时拥有

$urlRouterProvider

和

$stateProvider

有什么意义？问不同的问题，每个人应该做什么？

这里是一个基本的例子，我不久前做的，在ui路由器配置中使用名称间隔控制器，以及一个嵌套路由（第二个选项卡）：

模板：

可以更改为

模板URL:

指向HTML文件

var app = angular.module('plunker', ['ui.bootstrap', 'ui.bootstrap.tpls','ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
    .state('state1', {
      url: "/",
      template: 'Hello from the first Tab!',
      controller: 'FirstCtrl',
      data:{}
    })
    .state('state2', {
      url: "/route2",
      template: 'Hello from the 2nd Tab!<br>' +
                '<a ui-sref="state2.list">Show List</a><div ui-view></div>',
      controller: 'SecondCtrl',
      data: {}
    })
      .state('state2.list', {
        url: '/list',
        template: '<h2>Nest list state</h2><ul><li ng-repeat="thing in things">{{thing}}</li></ul>',
        controller: 'SecondCtrl',
        data: {}
      });
});

---

这应该适合你。否则函数是$urlRouteProvider服务的一部分。如果遇到问题，请查看有关如何定义用作$stateProvider.state（）函数参数的对象的教程。在这里，我只关注于在哪里放置其他路线

myApp.config(['$stateProvider','$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {

    $stateProvider
        .state({
            name:        'customer',
            url:         '/customer/:username',
            templateUrl: 'partials/customer.html',
            controller: 'YourCtrl'
        })
        .state({
            parent:      'customer',
            name:        'details',
            url:         '/details',
            templateUrl: '/partials/customerDetails.html',
            controller: 'YourCtrl'
        });

     $urlRouteProvider.otherwise('home');
}

---

]))

踢到路边。查看ui路由器github上演示plnkr列表中的配置。您的.states未列出控制器，但“/customer/：username”将在控制器中调用$scope。我发现了以下内容：。它显示了一个

controller

属性，但示例看起来都像模拟控制器（匿名函数）。我试着使用我的一个控制器的名称，引用和不引用，但这似乎不起作用。此外，该应用程序似乎仍然没有路由。不知何故，我错过了wiki中非常清晰标记的“控制器”部分：。谢谢你逗我。我仍然不清楚如何使用

$urlRouterProvider

，或者我是否需要为每个以前的路由定义一个状态（在您的回答中也被问到）…那么，我是否需要为每个“页面”/“视图”（我以前有路由的地方）都定义一个状态？$urlRouterProvider主要用作别名还是符号链接？最后一个问题：我如何拥有可选参数，以便

/search

和

/search/：fn/：ln

进入同一视图？是的，为每个URL（URL的嵌套）创建一个新的.state，它具有与路由类似的功能/用途，但具有更多的超级功能，并且在“state”的更高抽象级别上工作。如果

/search/:fn/:ln

等嵌套状态被设置为

url:

我仍然不清楚

$urlRouterProvider

或“可选参数”，则会转到相同的视图，但我认为后者至少是一个单独的beast（）。感谢您的帮助。使用

urlRouterProvider。否则

如果有人键入或拼写错误URL，他们可以重定向到404页面或跳转到根URL<代码>数据：{}可用于对象生成页面平铺等，如：

数据：{pageTitle:'Search'}

myApp.config(['$stateProvider','$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {

    $stateProvider
        .state({
            name:        'customer',
            url:         '/customer/:username',
            templateUrl: 'partials/customer.html',
            controller: 'YourCtrl'
        })
        .state({
            parent:      'customer',
            name:        'details',
            url:         '/details',
            templateUrl: '/partials/customerDetails.html',
            controller: 'YourCtrl'
        });

     $urlRouteProvider.otherwise('home');
}