angularjs – 从ngRoute / $routeProvider迁移到ui-router / $ur

发布时间：2020-12-17 07:38:00 所属栏目：安全来源：网络整理

导读：我想开始使用Angular的ui路由器而不是ngRoute.最初,我的应用配置看起来像 myApp.config(["$routeProvider",function($routeProvider) { $routeProvider .when("/search",{ templateUrl: "partials/customerSearch.html" }) .when("/home",{ templateUrl: "pa

我想开始使用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”)规则.我正确地指定了处理程序,就好像它们是模板URL一样吗？

如果我注释了.when(),除“/ customer /：username”之外没有任何作用.我必须为每条路线定义一个状态吗？如果是这样,那么两个$urlRouterProvider和$stateProvider有什么关系呢？当被问及不同的时候,每个人应该做什么？

这是一个基本的例子,我做了一段时间,在ui-router config和&一个嵌套路由(第二个选项卡)： http://plnkr.co/edit/2DuSin?p=preview

模板：可以改为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>',data: {}
      });
});

控制器：

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

}]);

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!