chúng ta có thể thêm các trạng thái động vào trạng thái $ stateprovider với các trạng thái hiện có trong ui-router angular.js

Question

Tôi đang cố gắng thêm trạng thái vào ứng dụng của mình một cách năng động và thử sử dụng ui-router. Tôi đã thử theo chủ đề này. AngularJS - UI-router - How to configure dynamic views

Trong trường hợp của tôi, có một số tiểu bang existant đã và tôi cần phải thêm vào danh sách đó với trạng thái biến đổi được đọc từ json

Đối với một số lý do, tôi nhận được lỗi phun trên $ urlRouterProvider khi cố gắng sử dụng cho phương thức deferIntercept(). Trong trường hợp của tôi, tôi đang sử dụng góc 1.3 và phiên bản ui-router là 0.2.10. Tôi thấy rằng bạn có thể tạo ra các trạng thái bất ngờ. Nhưng chúng ta có thể thêm vào danh sách hiện có của các quốc gia đã được cấu hình tĩnh

Dưới đây là mã của tôi bất cứ sự giúp đỡ được đánh giá cao,

modules.json MY,

[{ 
    "name": "applications1", 
    "url": "^/templates/applications1", 
    "parent": "authenticated", 
    "abstract": false, 
    "views": [{ 
    "name": "", 
    "templateUrl": "html/templates/basicLayout.html" 
    }, { 
     "name": "header@applications1", 
     "templateUrl": "html/templates/header.html" 
    }], 
    { 
    "name": "login", 
    "url": "/login", 
    "abstract": false, 
    "views": [{ 
    "name": "", 
    "templateUrl": "html/admin/loginForm.html" 
    }] 
}] 

app.js My

 var $stateProviderRef = null; 
     var $urlRouterProviderRef = null; 

     var aModule = angular.module('App', [ 
      'ui.bootstrap','ui.router' 
     ]); 


     adminModule.run(['$rootScope', '$state', '$stateParams', 
       function ($rootScope, $state, $stateParams) { 
       $rootScope.$state = $state; 
      $rootScope.$stateParams = $stateParams; 
     }]) 

     adminModule.run(['$q', '$rootScope','$http', '$urlRouter', 
      function ($q, $rootScope, $http, $urlRouter) 
      { 
     $http 
      .get("modules.json") 
      .success(function(data) 
     { 
      angular.forEach(data, function (value, key) 
     { 
     var state = { 
     "url": value.url, 
     "parent" : value.parent, 
     "abstract": value.abstract, 
     "views": {} 
     }; 

     angular.forEach(value.views, function (view) 
     { 
     state.views[view.name] = { 
      templateUrl : view.templateUrl, 
     }; 
     }); 

     $stateProviderRef.state(value.name, state); 
    }); 
    // Configures $urlRouter's listener *after* your custom listener 

    $urlRouter.sync(); 
    $urlRouter.listen(); 
    }); 
}]); 

    aModule.config(['$locationProvider', '$stateProvider',  '$urlRouterProvider', '$httpProvider', function ($locationProvider, $stateProvider, $urlRouterProvider, $httpProvider) { 

    // XSRF token naming 
    $httpProvider.defaults.xsrfHeaderName = 'x-dt-csrf-header'; 
    $httpProvider.defaults.xsrfCookieName = 'X-CSRF-TOKEN'; 

$httpProvider.interceptors.push('httpInterceptor'); 

$stateProvider 
    .state('login', { 
     url: '/login', 
     templateUrl: 'html/XXX/loginForm.html', 
     controller: 'AController' 
    }) 
    .state('sAgree', { 
     url: '/serviceAgreement', 
     templateUrl: 'html/xxx/s.html', 
     controller: 'SController' 
    }); 
    $urlRouterProvider.deferIntercept(); 

$urlRouterProvider.otherwise('/login'); 

$locationProvider.html5Mode({enabled: false}); 
$stateProviderRef = $stateProvider; 
$urlRouterProviderRef = $urlRouterProvider; 

}]);

Answer 1

Có a working plunker, với tất cả các đoạn mã trên.

Trong trường hợp đó chúng tôi muốn thêm một số tiểu bang, mà không được đã tồn tại, chúng ta nên kiểm tra $state.get('stateName')

$http 
    .get("modules.json") 
    .success(function(data) { 
    angular.forEach(data, function(value, key) { 

     // here we ask if there is a state with the same name 
     var getExistingState = $state.get(value.name) 

     // no need to continue, there is state (e.g. login) already 
     if(getExistingState !== null){ 
     return; 
     } 

     var state = { 
     "url": value.url, 
     "parent": value.parent, 
     "abstract": value.abstract, 
     "views": {} 
     }; 

     angular.forEach(value.views, function(view) { 
     state.views[view.name] = { 
      templateUrl: view.templateUrl, 
     }; 
     }); 

     $stateProviderRef.state(value.name, state); 
    }); 
    // Configures $urlRouter's listener *after* your custom listener 

    $urlRouter.sync(); 
    $urlRouter.listen(); 

    }); 

Kiểm tra xem here in action