从ngRoute / $ routeProvider迁移到ui-router / $ urlRouterProvider

debugcn 发表于 Dev

nshew13

我想开始使用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是否正确指定了s，就像它们是模板URL一样？

如果我将.when()s注释掉，除了，其他任何方法都不会起作用"/customer/:username"。是否必须为每条路线都定义一个状态？如果是这样，同时拥有$urlRouterProvider和有$stateProvider什么意义？问的不同，每个人应该做什么？

厚脸皮

这是我之前做的一个基本示例，在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"];
}]);

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。