Состояние AngularJS loading

Question

Я пытаюсь динамически загружать состояния из файла JSON, используя ui-router-extras. Файл JSON выглядит следующим образом:

[ 
 
    { 
 
    "name": "app", 
 
    "url": "/app", 
 
    "abstract": "true", 
 
    "resolve": "helper.resolveFor('fastclick', 'modernizr', 'icons')" 
 
    
 
    }, 
 
    { 
 
    "name": "login", 
 
    "url": "/login", 
 
    "title": "User Login", 
 
    "templateUrl": "", 
 
    "redirectToLogin": "true" 
 
    }, 
 
    { 
 
    "name": "dashboard", 
 
    "url": "/dashboard", 
 
    "title": "Dashboard", 
 
    "templateUrl": "helper.basepath('dashboard.html')", 
 
    "resolve": "helper.resolveFor('flot-chart', 'flot-chart-plugins', 'weather-icons')" 
 
    
 
    } 
 
]

Ниже приводится маршруты конфигурационный файл:

(function() { 
'use strict'; 

angular 
    .module('app.routes') 
    .config(routesConfig); 

routesConfig.$inject = ['$stateProvider', '$locationProvider', '$urlRouterProvider', 'RouteHelpersProvider', '$stateProvider', '$futureStateProvider']; 
function routesConfig($stateProvider, $locationProvider, $urlRouterProvider, helper, $sp, $fsp) { 

    $locationProvider.html5Mode(false); 

    var futureStateResolve = function($http) { 
     return $http.get("states.json").then(function (response) { 
      console.log(response.data); 
      angular.forEach(response.data, function (state) { 

       $sp.state(state); 
       }) 
      }) 
     } 
    $fsp.addResolve(futureStateResolve); 

     // defaults to dashboard 
    $urlRouterProvider.otherwise('/app/login'); 
    } 
})(); 

/login состояние работает нормально, но остальные не работают и дать ошибку «invocables должен быть объектом». Я думаю, что это потому, что функции helper.basepath() и helper.resolveFor() не работают, поскольку они поступают как строки из JSON.

Что мне делать?

Answer 1

Мой совет такой же, как @charlietfli. Я уточню.

Поскольку вы уже создали вспомогательную функцию, которая возвращает ваш блок разрешений, вы можете легко обойти тот факт, что JSON не поддерживает JS-код или выражения.

Ваша вспомогательная функция принимает список строк в качестве аргументов. JSON поддерживает массивы строк. Измените свой JSON следующим образом: "resolve": "helper.resolveFor('fastclick', 'modernizr', 'icons')": "resolve": ["fastclick", "modernizr", "icons"]. Теперь решение JSON содержит простой массив строк.

Когда вы загружаете состояния, сначала преобразуйте массив в блок разрешений, используя ваш помощник, а затем зарегистрируйте их.

var futureStateResolve = function($http) { 
    return $http.get("states.json").then(function (response) { 
     angular.forEach(response.data, function (state) { 
      // The array of strings from the JSON 
      var stringArgs = state.resolve; 
      // If present, convert to a resolve: object and put back on the state definition 
      if (stringArgs) state.resolve = helper.resolveFor.apply(helper, stringArgs); 
      $sp.state(state); 
     }) 
    }) 
} 
$fsp.addResolve(futureStateResolve); 

---

Это должно ответить на ваш вопрос.

Однако я заметил, что вы используете будущие состояния от ui-router-extras, но вы не ленивы загружаете код (контроллеры или все javascript-угловые модули). Обычно вы регистрируете будущие состояния с помощью $futureStateProvider, а не напрямую с $stateProvider. Нет ничего плохого в том, что вы делаете (ленивая загрузка определений состояний и использование отложенного бутстрапа ui-router из Future States). Тем не менее, вы можете добиться того же самого, не зависимо от библиотеки ui-router-extras.

Это, как вы бы лениво добавить определение состояния без Ui-маршрутизатор-статисты:

Angular - UI Router - programmatically add states

Это, как вы можете перенести UI-маршрутизатор с разбора URL, пока вы не закончите добавлять определение состояния:

Angular ui-router and ocLazyLoad