8

Restful/Ruby convension を使用してアプリを構築しようとしてい/<resource>/[method]/[id]ます。CodeIgniter のようなサーバー側の MVC フレームワークを使用するときに以前に行った方法は、URI に基づいて動的にルーティングすることでした。

元。

www.foo.com/bar/baz/1

次に、アプリはbazコントローラー/クラスbarでメソッドを使用して戻りviews/bar/baz.phpます（からのデータが入力されますbar->baz）

Angularでも同じことをしたいのですが、これをサポートしているかどうかはわかりません（サポートしている場合、どうすればよいか正確にはわかりません）。現時点では、$routeProviderのwhenメソッドを使用して各ケースを指定しています。$location.path()app.jsには必要なものがあるように見えますが、 (内で)使用できるとは思いませんconfig()。

私がやりたいことは次のようなものです：

.config([
  '$routeProvider', function($routeProvider) {
    $routeProvider
    .when(//<resource> controller exists
      resource+'/'+method, {
        "templateURL": "views/" + resource + "/" + method + ".html",
        "controller":  resource
      }
    ).otherwise({ "redirectTo":"/error" });
  }
]);

そして、ルーターは適切なメソッドを自動的に呼び出します。

編集また、指定すると$routeProviderがフリークアウトするのはなぜwhen('/foo/bar', {…})ですか?

EDIT 2 Leeの提案に従って、私は次のようなことを検討しています:

$routeProvider
  .when(
    '/:resource/:method/:id', {
      "templateUrl": function(routeParams){
        var path = 'views/'+routeParams.resource+'/';
        return ( typeof routeParams.method === 'undefined' ) ?
          path+'index.html' : path+routeParams.method+'.html';
      },
      "controller": RESOURCE
  })
  .otherwise({redirectTo: '/error'});

$routeProviderのドキュメントで次のことに気付きました。

ダッシュのスクリーンショット。 以下全文

templateUrl – {string=|function()=} – ngView で使用する必要がある html テンプレートへのパスを返すパスまたは関数。

templateUrlが関数の場合、次のパラメーターで呼び出されます。

• {Array.<Object>} - 現在のルートを適用して、現在の$location.path()から抽出されたルート パラメータ

編集: 関数に設定するオプションtemplateUrlは、不安定な1.1.2ビルドの一部です: #1963 (ただし、2013-02-07 の時点では機能しません)。

AngularJS の Github: #1193 #1524にこの機能を追加することについての議論がありますが、それが実際に実装されたかどうかはわかりません (上で引用した Dash のドキュメントでは、実装されているように見えます。まだ更新されていません）。

EDIT 3私が何をしたいのかを明確にするために（リーの要求ごとに）、最も簡単な言葉で、私は行きたいですwww.foo.com/index.html#/people

Angular は controller を使用し、そのメソッドをpeople自動的に呼び出し、サービスを提供する必要がありますindex

./views/people/index.html
./views/people/map.html

また、私が行くとwww.foo.com/index.html#/people/map

Angular はpeople再びコントローラーを使用する必要がありますが、今回は自動的にそのmapメソッドを呼び出して…map.htmlを提供します(マップが URL で指定されたため)

./views/people/index.html
./views/people/map.html

次に、私が行くと

www.foo.com/index.html#/widgets

Angularは役立つはずです

./views/widgets/index.html
./views/widgets/details.html

.when()ルーターのコードは非常に一般的なものにする必要があります。ルートごとに を指定する必要はありません。

4

4 に答える 4

5

これについてもう少し考えます。これらの一般的な CRUD/REST タイプの操作には、単一のコントローラーを使用できます。次に、resource パラメーターと view パラメーターを使用してテンプレートを読み込みます。

  • 作成
    • #/foo/create/0
    • これには、独自のフォーム テンプレート "/views/foo/create.html" と、プレースホルダー用の 0 os があります。
    • 送信時に、コントローラー ng-click="save()" でメソッドを呼び出し、サーバーの POST "/rest/foo" に投稿します。
  • 読んだ
    • #/foo/ビュー/1
    • ここでも、テンプレート「/views/foo/view.html」は単なるデータのビューです
    • サービス メソッドを呼び出して、GET "/rest/foo/1" を使用してサーバーからデータを取得できます。
  • 更新 -#/foo/edit/1
    • create と同じテンプレートを使用することも、必要に応じて別の "/views/foo/edit.html" を使用することもできます。
    • また、GET "/rest/foo/1" を使用してデータをプルします。
    • PUT "/rest/foo/1" を使用してデータを送信します
  • 消去
    • #/foo/delete/1
    • service メソッドは DELETE "/rest/foo/1" を呼び出します
    • これにはハッシュが必要だとは思いませんが、コントローラーは実際に検証または削除を確認するために好きなことを行うことができるため、ハッシュを使用できます。レコードを削除するかどうかを尋ねる「/views/foo/delete.html」というビューがあるかもしれません。次に、ajaxを介してアイテムを削除するボタンのどこかに ng-click="delete(itemid)" を配置できます。

これはすべて、単一のコントローラー/サービスを使用して、サービスとビューの URL を動的に生成することで実行できます。

カスタムコントローラーとカスタムルートとサービスメソッドが必要なカスタムのもの。おそらく例をまとめることはできますが、今夜はできません。

于 2013-02-08T05:54:50.997 に答える
4

これは、あなたが求めていることに近いことをするgithubのプロジェクトです

編集: 以前は思いもよらなかった興味深いことを発見しました。ルートでコントローラを省略すると、テンプレートで指定されたコントローラが使用されます。したがって、特定のコントローラーに使用するすべてのテンプレートに ng-controller="resource" が含まれている限り、テンプレートのコントローラーは期待どおりにロードされます。もちろん、ルートの現在の実装ではオプションのパラメーターはありません。そのため、2 つまたは 3 つのパラメーターがある場合は、別のルートを指定する必要があります。最大の問題は、コントローラー メソッドを 2 回呼び出しているように見えることです。これは、同じコントローラーを持つビューが 2 つあるためだと思います。ただし、1 つのビューで別のビューを置き換える必要があるため、2 つの呼び出しが発生することはありません。これは私にはバグのようです。https://github.com/angular-ui/router/issues?page=1&state=open . github のサンプルは現在、次のメソッドを使用しているため、必要に応じて参照できます。

var restrouteApp = angular.module('restrouteApp', [])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/:ctrl/:method', {
        templateUrl: function(rp){
          if(!rp.method) {rp.method = 'index';}
          console.log('route one'); 
          return 'views/'+rp.ctrl+'/'+rp.method+'.html';
        }
      })
      .when('/:ctrl/:method/:id', {
        templateUrl: function(rp){
          if(!rp.method) {rp.method = 'index';}
          console.log('route two'); 
          return 'views/'+rp.ctrl+'/'+rp.method+'.html';
        }
      })
      .otherwise({
        redirectTo: '/resource1/'
      });
  }]);

そしてテンプレート:

<div ng-controller="resource1">
  <h1> resource1/one.html </h1>
  <div>{{r1data.selected}}</div>
</div>

これで、コントローラーでこれを実行して、メソッドを動的に呼び出すことができます。

restrouteApp.controller('resource1', function($scope,$routeParams,$log,Resource1Service) {

  $log.info('new resource1');

  $scope.controllername = $routeParams.ctrl;
  $scope.r1data= Resource1Service.shared;

  $scope.index = function(){
    Resource1Service.index().then(function(){
      //when the service returns
    });
  }

  $scope.one = function(){
    $scope.r1data.selected = $scope.r1data.resources[0];
  }
  $scope.two= function(){
    $scope.r1data.selected = $scope.r1data.resources[1];
  }

  //call the specified method of this controller 
  $scope[$routeParams.method]();
});

/編集

于 2013-02-06T03:40:02.083 に答える
0

これはui-router0.2.8 で可能になりました:

$stateProvider
    .state('base', {
        url: '/:resource/:collection/:id',
        controllerProvider: function( $stateParams )
        {   // assuming app.controller('FooCtrl',[…])
            return $stateParams.collection + 'Ctrl';
        },
        templateUrl: function( $stateParams )
        {
            return '/partials/' + $stateParams.collection + '.html';
        }
    });

しかし、$state.includes()ナビゲーション メニューを利用するには、おそらく次のようにしたほうがよいでしょう。

$stateProvider
    .state('base.RESOURCE_NAME1', {
        url: '/:collection/:id',
        controllerProvider: function( $stateParams )
        {   // assuming the convention FooCtrl
            return $stateParams.collection + 'Ctrl';
        },
        templateUrl: function( $stateParams )
        {
            return '/partials/' + $stateParams.collection + '.html';
        }
    }).state('base.RESOURCE_NAME2', {
        url: '/:collection/:id',
        controllerProvider: function( $stateParams )
        {   // assuming the convention FooCtrl
            return $stateParams.collection + 'Ctrl';
        },
        templateUrl: function( $stateParams )
        {
            return '/partials/' + $stateParams.collection + '.html';
        }
    });

上記はstate、リソースの配列から を構築するループで簡略化できます ( $stateProviderは基本的にいつでも状態の追加をサポートします)。

var resources = [ 'r1', 'r2', '…' ];

for ( var r = resources.length-1; r >=0; r-- )
{
    var name = resources[r];
    $stateProvider.state('base.'+name, {
        …
    });
}

警告ui-router は、オプションの状態パラメーターを実際にはサポートしていません ( v0.4 で計画されています) 。

于 2014-02-11T19:36:56.787 に答える