4

私は REST サービス用のフロントエンド アプリを構築しています。ほとんどのリソースは、ユーザーがアプリで作成したレコードに基づいてほとんどのセグメントが動的な長い URL に配置されています。明らかに、これらのレコードのほとんどについて、ハードコードされたルートを知ることも作成することもできません。

私の質問は、ui-router で次のような URL を処理する方法です。

<semester>/<program>/<class>/enrollment

また

<semester>/myclasses/<class>/assignments

すべてのリソース URL には常に少なくとも 1 つの静的で予測可能なセグメントがあり、セグメントは常に予測可能な順序になっています。

次のように、URL の各セグメントの抽象的な状態を作成しますか? 

$stateProvider.state(semester)  
    .state(program)  
    .state(class)  
    .state(assignments);

??

次のようなルートを作成してみました。 

param = {  
    name: "param",  
    url: "/:hue/:temp/param",  
    templateUrl: "http://localhost:81/route/tpl/param.tpl.html",  
    controller: "paramController"  
  };

.otherwise()しかし、「param」状態にリンクすると、最終的に状態に戻ります。

助けてくれてありがとう、私は少し困惑しています。

4

3 に答える 3

0

わかりましたので、これをテストしましたが、私の場合はうまくいきます。状態がパラメーターのみの場合は失敗しますが、各状態にパラメーター化されていないビットがある限り、ui-router は子状態まで解析できます。この事例が実演または説明されているのを見たことがありません。ほとんどのチュートリアルでは、単純なハードコーディングされたネストされた状態のみを扱い、パラメーター化された状態は扱いません。

理想的ではありませんが、機能します。

これが、この問題に直面している他の誰かに役立つことを願っています。:)

var app = angular.module('app', ['ui.router'])

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

  $urlRouterProvider.otherwise("/");
  $locationProvider.html5Mode(true);

  var semester = {
    name: "semester",
    abstract: true,
    url: "semester/:sem",
    templateUrl: "http://localhost:81/route/to/semtemplate.tpl.html",
    controller: "semesterController"
  },
  program = {
    name: "program",
    parent: sem,
    url: "program/:prg",
    templateUrl: "http://localhost:81/route/to/prgtemplate.tpl.html",
    controller: "programController"
  },
  classes = {
    name: "classes",
    parent: prg,
    url: "/classes",
    templateUrl: "http://localhost:81/route/to/clstemplate.tpl.html",
    controller: "classesController"
  };

  $stateProvider.state(sem)
    .state(prg)
    .state(classes);
}]);

app.controller('paraController', ['$scope', '$stateParams', '$state',function($scope, $state, $stateParams){
  console.log('paraController instantiated');
  $scope.sem = $stateParams.params.sem;
  $scope.prg = $stateParams.params.prg;
}]);

これは階層的な REST API であるため、このパターンは完全に機能し、各コントローラーからのスコープ継承も利用する場合、私のプロジェクトに適しているはずです。ネストされた状態の極端なテストは行っていませんが、さらにパラメーター化された状態でどのように動作するかを見るのは興味深いでしょう。私が見つけた唯一の制限は、各状態にパラメーター化されていない部分も必要であるということです。だから/:sem失敗しますが、semester/:semうまくいきます。

URL が長くなるため理想的ではありませんが、実行可能な代替手段は見つかりませんでした。

于 2013-09-28T21:05:20.480 に答える
0

この質問が古いことは知っていますが、最近本質的に同じ質問があり、公式の回答を見つけました。どうやら、angular ui-router は URL ルーティングで URL パラメーターの概念をサポートするようになりました。これにより、次の行に沿ってパラメーターを指定できます。

$stateProvider
    .state('contacts.detail', {
        url: "/contacts/:contactId",
        templateUrl: 'contacts.detail.html',
        controller: function ($stateParams) {
            // If we got here from a url of /contacts/42
            expect($stateParams).toBe({contactId: 42});
        }
    })

詳細については、https ://github.com/angular-ui/ui-router/wiki/URL-Routing#url-parameters を参照してください。

于 2014-07-19T03:35:39.783 に答える