Verwenden von Wildcard in Angular auf Aktualisieren

Question

Ich baue eine Website auf einem MEAN Stack. Diese Website enthält viele Seiten mit Städtenamen. Ich habe eine Vorlage für alle Stadtnamen erstellt, in denen einige Informationen zur Stadtauswahl geändert wurden. Ich habe es auch geschafft, eine Wildcard-Funktion in Angular zu verwenden, wo der ausgewählte Stadtname auch in der URL angezeigt wird. Aber die einzige Sache, die nicht funktioniert, ist, wenn ich die Seite auf einem bestimmten cityname aktualisiere. Die DB-Info wird nicht angezeigt.

Dies ist die Seite, wo der Städtename ausgewählt wird:

<div ng-controller="DataCtrl" class="plumber-by-city col-sm-12 home-text-col"> 
<div class="title-1">Zoek op plaatsnaam</div> 
    <select ng-model="selectedItem" ng-change="changePath('loodgieter-in')" ng-options="item as item.city for item in items"></select><span class="fa fa-caret-down"></span> 
</div> 

Dies ist die Seite, wo die ausgewählte Stadt und andere Informationen gezeigt wird:

<div class="align-content-inner" ng-controller="DataCtrl2"> 
<div class="title-1">Plumbers in {{selectedItem.city}}</div> 
    <p> 
    {{selectedItem.phoneLG}} and {{selectedItem.phoneAG}} 
    </p> 
    <p> 
    {{selectedItem.city}} 
    </p> 
</div> 

Dies ist der Controller und die Service:

app.controller('DataCtrl', function($scope,$http,getData,$location){ 

    getData.getCity().then(function(response){ 
    $scope.items = response.data; 
    $scope.selectedItem = response.data[0]; 
    }); 
}); 

$scope.changePath = function(path) { 
    getData.setItem($scope.selectedItem); 
    $location.path('/'+ path +'/' + $scope.selectedItem.city); 
}; 

app.factory('getData', function($http){ 
    return { 
    getCity: function(){ 
     return $http.get("/getdata"); 
    }, 
    setItem: function(item) { 
     this.item = item; 
    }, 
    getItem: function() { 
     return this.item; 
    }, 
    }; 
}); 

Und der zweite Controller auf der nächsten Seite:

app.controller('DataCtrl2', function($scope,$http,getData,$location){ 
    getData.getItem(); 
    $scope.selectedItem = getData.getItem(); 

    $scope.changePath = function(path) { 
    $location.path('/'+ path +'/' + $scope.selectedItem.city); 
    }; 
}); 

Nun, wenn der Benutzer die Seite auf einem Städtename erfrischt, sagen wir mal: localhost: 3000/loodgieter-in/Amsterdam, wird die Seite aktualisiert, zeigt aber nicht die Städtename Daten.

Jetzt weiß ich, dass Angular re-initialisiert, wenn die Seite aktualisiert wird, gibt es eine Möglichkeit, dass wenn ein Benutzer die URL einschließlich eines Cityname eingibt, die Daten, die zu diesem ausgewählten Cityname gehören, zurückgegeben und auf dieser Seite angezeigt?

Answer 1

Immer wenn Sie F5 aufrufen oder eine Seite aktualisieren, wird Angular wieder initialisiert, so dass alle Werte, die Sie in Ihrem Dienst speichern, verloren gehen.

Wenn Sie das tun:

getData.getItem(); 
$scope.selectedItem = getData.getItem(); 

Sie erhalten nicht definiert, weil Artikel auf den Dienst nicht definiert ist. (Noch ist nichts eingestellt)

EDIT: Sie können den Namen der Stadt durch den Ort Pfad:

$location.path().substr($location.path().lastIndexOf('/')+1)