Переход от ngRoute/$routeProvider к ui-router/$urlRouterProvider

Я хочу начать использовать Angular ui-router вместо 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 застревает в цикле. Я подозреваю правило .otherwise("/home"). Я правильно указываю handler, как если бы они были шаблонами URL?

Если я комментирую .when() s, ничего не работает, кроме "/customer/:username". Должен ли я определять состояние для каждого маршрута? Если да, то в чем смысл иметь как $urlRouterProvider, так и $stateProvider? На вопрос по-другому, что каждый должен делать?

Ответы

Ответ 1

Вот базовый пример, который я сделал некоторое время назад, с контроллерами с именами в конфигурации ui-router и одним вложенным маршрутом (вторая вкладка): http://plnkr.co/edit/2DuSin?p=preview

template: можно изменить на templateUrl:  указать файл 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: {}
      });
});

контроллеры:

app.controller('FirstCtrl', ['$scope', '$stateParams', '$state',  function($scope,$stateParams,$state){

}]);

app.controller('SecondCtrl', ['$scope', '$stateParams', '$state', function($scope,  $stateParams, $state){
    $scope.things = ["A", "Set", "Of", "Things"];
}]);

Ответ 2

Это должно сработать для вас. В противном случае функция является частью службы $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');
}

]);