從ngRoute/$ routeProvider遷移到ui-router/$ 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卡在一個循環。我懷疑.otherwise("/home")規則。我是否正確指定了handler，就好像它們是模板網址一樣？

如果我註釋掉.when() s，除"/customer/:username"之外沒有任何工作。我必須爲每條路線定義一個狀態嗎？如果是這樣，$urlRouterProvider和$stateProvider都有什麼意義？有不同的提問，每個人應該做什麼？

來源

2014-02-21 N13

踢ngRoute到路邊。在ui-router github的demo plnkr列表中查看配置。您的.states沒有列出控制器，但「/ customer /：username」會在控制器中調用$ scope。 – cheekybastard

我發現這個：http://plnkr.co/edit/u18KQc?p=preview。它顯示了一個'controller'屬性，但樣本全都看起來像模擬控制器（匿名函數）。我嘗試使用我的控制器之一的名稱，無論是引用還是不引用，但這似乎不起作用。此外，該應用程序似乎仍然不是路由。 – N13

我不知何故錯過了wiki中非常明確標記的「控制器」部分：https：//github.com/angular-ui/ui-router/wiki#wiki-controllers。感謝你對我謙遜。我仍然不清楚如何處理'$ urlRouterProvider'，或者我是否需要爲每條以前的路由定義一個狀態（在您的答案中也有提問）。 – N13

這裏是一個基本的例子，我犯了一個前一段，與UI的路由器配置名稱間隔控制器，&一個嵌套路徑（第二標籤）：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"]; 
}]);

來源

2014-02-22 04:01:36 cheekybastard

那麼，我需要一個狀態，每個「頁面」/「視圖」，我曾經有一個路線？ $ urlRouterProvider主要用作別名還是符號鏈接？最終問：我如何使用可選參數，以便'/ search'和'/ search /：fn /：ln'進入相同的視圖？ – N13

是的，爲每個URL（＆網巢）創建一個新的.state，它具有與路由類似的功能/用途，但具有更多的超級權力，並且可以在更高的「狀態」抽象中工作。如果'.state' url被設置爲'url：「'' – cheekybastard

，'/ url /：fn /：ln'等嵌套狀態將會進入相同的視圖。我仍然不清楚'$ urlRouterProvider'，也沒有」可選「 params「，但我認爲後者至少是一個單獨的野獸（http://stackoverflow.com/q/21977598/356016）。感謝您的幫助。 – N13

這應該制定出適合您。其他功能是$ 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'); 
}

]）;

來源

2015-02-17 21:18:40 Dun

從ngRoute/$ routeProvider遷移到ui-router/$ urlRouterProvider

回答

相關問題