我们可以在 ui-router angular.js 中使用已经存在的状态向 $stateprovider 添加动态状态吗 [英] can we add dynamic states to $stateprovider with already existing states in ui-router angular.js

问题描述

我正在尝试动态地向我的应用程序添加状态并尝试使用 ui-router.我尝试关注这个线程.AngularJS - UI-router - 如何配置动态视图

I am trying to add states to my app dynamically and tried using ui-router. I tried following this thread. AngularJS - UI-router - How to configure dynamic views

在我的例子中，已经有一些存在的状态，我需要将动态状态从 json 中读取

In my case, there are some existant states already and i need to append to that list with the dynamic states being read from json

出于某种原因，当我尝试使用 deferIntercept() 方法时，在 $urlRouterProvider 上出现注入器错误.就我而言，我使用的是 angular 1.3，而 ui-router 版本是 0.2.10.我看到您可以同步创建状态.但是我们可以添加到已经静态配置的现有状态列表中吗

For some reason, i get injector error on $urlRouterProvider when trying to use for deferIntercept() method. In my case, i am using angular 1.3 and the ui-router version is 0.2.10. I see that you can create states synamically. But can we add to the existing list of states already configured statically

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

Here is my code any help is appreciated,

我的 modules.json,

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;

}]);

推荐答案

有一个工作plunker，包含上述所有片段.

There is a working plunker, with all the above snippets.

如果我们想添加一些不存在的状态，我们应该检查$state.get('stateName')

In case that we want add some states, which are not already existing, we should check the $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();

  });

检查此处是否有效

这篇关于我们可以在 ui-router angular.js 中使用已经存在的状态向 $stateprovider 添加动态状态吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！