So passen Sie eine Seiten-URL in Angular JS an

Question

Gibt es eine Option zum dynamischen Festlegen der Seiten-URL in Angular JS? Ich kenne Angular JS im Volksmund bekannt als Single-Page-Anwendung, wo wir laden die HTML-Seitenansicht und ändern Sie die Daten in der HTML durch Bieten der Werte.

Zum Beispiel: Sagen wir, ich habe eine Seite www.mysite.com/#/myPage Hier ändere ich die Werte in der myPage HTML-Datei. Ich möchte die URL ändern, die im Browser basierend auf dem Inhalt auf der Seite angezeigt wird.

<div ng-app ng-controller="LoginController"> 
    <div>Hello {{ user.firstName }}</div> 
    <input ng-model="user.firstName"></input> 
    <input type="submit" ng-click="login()" value="Login"></input> 
    <div ng-repeat="login in logins">{{ login }}</div> 
</div> 

function LoginController($scope) { 
    $scope.user = { 
     firstName: "Foo", 
     lastName: "Bar" 
    }; 
    $scope.logins = []; 
    $scope.login = function() { 
     $scope.logins.push($scope.user.firstName + " was logged in."); 
    }; 
} 

Demo Link .. https://jsfiddle.net/Lt7aP/4/

Nun, bevor ich auf den Login-Button klicken, wird die URL wie diese www.mysite.com/#/myPage sein könnte und nach der Anmeldung der Seite URL Anklicken muss ändern Sie sich zu etwas wie diesem www.mysite.com/#/myPageLoggedIN.

Gibt es eine Möglichkeit, die ich erreichen kann, mit eckigen JS-Routing oder $ Ortungsdienst.

Answer 1

Blick auf das eckige Tutorial.

https://docs.angularjs.org/tutorial/step_09

Wie @Jax sagte, können Sie die $ routeProvider konfigurieren können, um zu erreichen, was Sie wollen.

EDIT

Mit ui Router: https://github.com/angular-ui/ui-router/wiki/URL-routing

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

Modus zu gelangen, von Code

$state.go('phone.detail', {marque: "Nokia"}); 

Answer 2

Sie könnten $window in einem Dienst oder Fabrik injizieren und versuchen $window.history.pushState() und $window.history.replaceState() Methoden , die dir erlauben t o Hinzufügen und Ändern von Verlaufseinträgen.

// pseudo 
angular 
    .module('myServiceModule', []) 
    .service(['$window', function ($window) { 
     return { 
      changeState: function (page, title, relativeRoute) { 
       $window.history.pushState(page, title, relativeRoute); 
      }; 
     } 
    } 
}]);