web-dev-qa-db-ja.com

ngRoute / $ routeProviderからui-router / $ urlRouterProviderへの移行

NgRouteの代わりにAngularのui-routerを使い始めたいと思います。元々、私のアプリ構成は次のようになりました

_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"
            })
        ;
    }
]);
_

ライブラリを交換し、構成を変更しました。私は理解していますcouldまだ_$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")ルールが疑われます。テンプレートURLであるかのように、handlersを正しく指定していますか？

.when() sをコメントアウトすると、_"/customer/:username"_以外は機能しません。ルートごとに状態を定義する必要がありますか？もしそうなら、_$urlRouterProvider_と_$stateProvider_の両方を持つことのポイントは何ですか？別の質問をすると、それぞれが何をすべきか？

angularjsroutesangular-ui-routerngroute
14
nshew

これは私が少し前に作った基本的な例で、ui-router configに名前間隔のコントローラーがあり、1つのネストされたルート（2番目のタブ）があります： http://plnkr.co/edit/2DuSin？p =プレビュー

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"];
}]);
13
cheekybastard

これはあなたのためにうまくいくはずです。それ以外の場合、関数は$ 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');
}

]）;

0
Dun