1

を使用して 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 must be object」というエラーが発生します。これは、JSON からの文字列として機能しているためhelper.basepath()、関数が機能していないためだと思います。helper.resolveFor()

私は何をすべきか？

4

1 に答える 1

1

私のアドバイスは@charlietfliと同じです。詳しく説明します。

解決ブロックを返すヘルパー関数を既に作成しているため、JSON が JS コードまたは式をサポートしていないという事実を簡単に回避できます。

ヘルパー関数は、文字列のリストを引数として受け取ります。JSON は文字列の配列をサポートしています。JSON を this: から this: に変更し"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ます。あなたがしていることに何の問題もありません (状態定義の遅延ロードと、Future States からの延期された ui-router ブートストラップの利用)。ただし、ui-router-extras ライブラリに依存しなくても同じことを実現できます。

これは、ui-router-extras なしで状態定義を遅延して追加する方法です。

Angular - UI Router - プログラムで状態を追加する

これは、状態定義の追加が完了するまで、ui-router による URL の解析を延期する方法です。

Angular ui-router と ocLazyLoad

于 2016-01-24T19:10:18.983 に答える