Jak stworzyć „url_for” linku pomocnik w AngularjJS

Question

w .NET MVC jest @Url.Action() w RoR jest url_for()

nie mogłem znaleźć podobnego pomocnika budowlanego URL w angularjs.

Już dostarczam wszystko, co jest potrzebne do zbudowania adresu URL do $routeProvider, więc coś takiego: $routeProvider.urlFor("MyCtrl", {id: 5}) może być miłe.

Moim głównym celem jest tutaj uniknięcie zakodowanych na stałe adresów URL w widokach i innych miejscach oraz uniknięcie wielokrotnego powtarzania wzorców adresów URL/tras.

UPDATE:

Wydaje się to trudne do wyjaśnienia, co chcę, więc tutaj jest dokładny przykład tego, co chcę:

Zamiast pisać to w viewes:

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

chcę napisz to:

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

Więc jeśli później postanowię zmienić ścieżkę ProductCtrl I woul d nie musisz aktualizować adresu URL w tym elemencie.

Jakie byłoby dobre rozwiązanie dla moich celów?

Answer 1

Można spróbować z czymś co następuje (tylko podszedł z nim) wewnątrz biegu głównego modułu() blok:

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; 
    }; 
}); 

ta rozszerzy zakres głównego aplikacji z nowej ścieżki() funkcja - dzięki czemu można go używać w dowolnym miejscu aplikacji. Korzysta z usługi $ route, aby uzyskać nazwy kontrolerów i odpowiadające im ścieżki, dzięki czemu nie będziesz musiał się powtarzać.

Przykład użycia:

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

żywo na przykład: http://plnkr.co/edit/54DfhPK2ZDr9keCZFPhk?p=preview

Answer 2

Istnieje wiele podejść ... zwyczaj directive lub ng-click zmodyfikować $location lub za pomocą funkcji w ng-href do analizowania URL z obiektu i mieć go jako href umieszczone w tagu <a>.

przykład stosując 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 
    } 
} 

Przykład wykorzystania ng-click i $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) 
    } 
} 

DEMO: http://jsbin.com/ovemaq/3

Answer 3

Wydaje się, że to, co chcesz, jest dyrektywa ui-route, który właśnie został niedawno dodany do angularui project. Jest ładny zestaw gotowych opcji.

Answer 4

w jednym z ostatnim projekcie wpadłem do tego rozwiązania, że ​​pomógł mi rozwiązać moje potrzeby w porządku w czasie. Interesujące będzie, aby pomóc Ci go ulepszyć, aby pasował do Twojego przypadku.

1. Przejście trasy definicja config:

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

2. Definiowanie tras, korzystając z wartości 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. Skonfiguruj usługę w celu zapewnienia funkcjonalności do tworzenia adresów 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); 
     } 
    }; 
}); 

---

== Wady ==

Dzięki takiemu podejściu miałem zdefiniować getter dla każdej drogi (było mniej niż 5, a prędkość rozwój był niezbędny)