12

.NET MVCには@Url.Action()あり、RoRにはありますurl_for()

私はangularjsで同様のURL構築ヘルパーを見つけることができませんでした。

私はすでにURLを構築するために必要なすべてのものを提供している$routeProviderので、次のようなもの$routeProvider.urlFor("MyCtrl", {id: 5})があります。

ここでの私の主な目標は、ビューやその他の場所でハードコードされたURLを回避し、URL/ルートパターンを2回繰り返さないようにすることです。

アップデート：

私が欲しいものを説明するのは難しいようですので、ここに私が欲しいものの正確な例があります：

ビューでこれを書く代わりに：

<a ng-href="/product/5">foo</a>

私はこれを書きたい：

<a ng-href="urlFor("ProductCtrl", {id:5})">foo</a>

したがって、後でProductCtrlのパスを変更することにした場合、この要素のURLを更新する必要はありません。

私の目標のための良い解決策は何でしょうか？

4

4 に答える 4

15

メインモジュールの run() ブロック内で次のようなものを試すことができます (思いついたばかりです):

app.run(function($route, $rootScope)
{
  $rootScope.path = function(controller, params)
  {
    // Iterate over all available routes

    for(var path in $route.routes)
    {
      var pathController = $route.routes[path].controller;

      if(pathController == controller) // Route found
      {
        var result = path;

        // Construct the path with given parameters in it

        for(var param in params)
        {
          result = result.replace(':' + param, params[param]);
        }

        return result;
      }
    }

    // No such controller in route definitions

    return undefined;
  };
});

これにより、アプリケーションのルート スコープが新しい path() 関数で拡張されるため、アプリケーションのどこでも使用できます。$route サービスを使用してコントローラー名と対応するパスを取得するため、同じ手順を繰り返す必要はありません。

使用例:

{{ path('LibraryController', { bookId : 'x', chapterId : 'y' }) }}

実際の例: http://plnkr.co/edit/54DfhPK2ZDr9keCZFPhk?p=preview

于 2013-03-17T15:52:30.933 に答える
2

多数のアプローチがあります...カスタムdirectiveまたはng-click変更する$locationか、関数を使用してng-hrefオブジェクトからURLを解析hrefし、<a>タグのように配置します。

使用例ng-href：

HTML:

<li ng-repeat="item in items">
    <a ng-href="{{url(item)}}">{{item.txt}}</a>
</li>

JS:

function Ctrl($scope){
  $scope.items=[
    {id:1,txt:'foo'},
    {id:2,txt:'bar'}
 ];

  $scope.url=function(item){
    return '#/'+item.id
  }
}

ng-clickと を使用した例$location

HTML:

<a ng-click="newPath(item)">{{item.txt}}</a>

JS:

function Ctrl($scope){
  $scope.items=[
    {id:1,txt:'foo'},
    {id:2,txt:'bar'}
 ];  

  $scope.newPath=function(item){
   $location.path('/'+item.id)
  }  
}

デモ: http://jsbin.com/ovemaq/3

于 2013-03-10T17:09:17.610 に答える
1

最近のプロジェクトの 1 つで、このソリューションにたどり着きました。これにより、ニーズをすぐに解決することができました。ユースケースに合わせて改善するのを手伝ってくれると面白いでしょう。

1.ルート定義を config に移動します。

...
ROUTES: {
    PAGE1: '/page1/:id',
    PAGE2: '/page2/:id/:name'
},
...

2. config の値を使用して、ルートを定義します。

app.config(['$routeProvider', 'config', function ($routeProvider, config) {
    $routeProvider.when('/', {
        templateUrl: 'partials/home.html',
        controller: 'HomeCtrl'
    });

    $routeProvider.when(config.ROUTES.PAGE1, {
        templateUrl: 'partials/page1.html',
        controller: 'PageOneCtrl'
    });

    ...

    $routeProvider.otherwise({
        redirectTo: '/'
    });

}]);

3. URL を作成する機能を提供するサービスをセットアップします。

services.factory('routes', function (config) {

    // populates `:param` placeholder in string with hash value
    var parseString = function (string, parameters) {
        if (!string) return '';
        if (!parameters) return string;

        for (var index in parameters) {
            if (!parameters.hasOwnProperty(index)) continue;

            string = string.replace(':' + index, parameters[index]);
        }

        return string;
    };

    return {
        getPage1Link: function (urlParams) {
            return '#' + parseString(config.ROUTES.PAGE1, urlParams);
        }
    };
});

== 欠点 ==

このアプローチでは、ルートごとにゲッターを定義する必要がありました (5 つ未満であり、開発速度が重要でした)。

于 2013-03-18T20:32:17.960 に答える
0

最近angularui プロジェクトに追加されたばかりの ui-route ディレクティブが必要なようです。すぐに使える優れたオプションのセットがあります。

于 2013-03-15T05:05:36.020 に答える