Question

我正在尝试动态地向我的应用添加状态并尝试使用ui-router。我试过跟这个帖子。 AngularJS - UI-router - How to configure dynamic views

在我的情况下，已经有一些存在的状态，我需要附加到该列表中，从json读取动态状态

出于某种原因，在尝试使用deferIntercept（）方法时，我在$ urlRouterProvider上出现了注入器错误。在我的情况下，我使用角度1.3和ui路由器版本是0.2.10。我看到你可以通过synamically创建状态。但是我们可以添加到已经静态配置的现有状态列表

这是我的代码，感谢任何帮助，

MY modules.json，

 [{
   "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

       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

有a working plunker，包含以上所有代码段。

如果我们想要添加一些尚未存在的状态，我们应该检查$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();

  });

检查here in action

我们可以使用ui-router angular.js中已有的状态向$ stateprovider添加动态状态

1 个答案: