分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了angularjs – 从ngRoute / $routeProvider迁移到ui-router / $urlRouterProvider，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我想开始使用Angular的ui路由器而不是ngRoute.最初,我的应用配置看起来像 @H_112_1@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,但这似乎是一种遗留的解决方法.

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