Angular JSでページURLをカスタマイズする方法

Question

Angular JSでページURLを動的に設定するオプションはありますか。 Angular JSはよく知られているシングルページアプリケーションで、HTMLページビューを読み込んでHTML内のデータを変更することで値をバインドしています。

例：www.mysite.com/#/myPageというページがあるとします。myPage HTMLファイル内の値を変更します。私はページ内のコンテンツに基づいてブラウザに表示されているURLを変更したい。デモリンク

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

.. https://jsfiddle.net/Lt7aP/4/今

私は、ログインボタンをクリックする前に、URLはこのwww.mysite.com/#/myPageようとしているページのURLログイン時にクリックした後かもしれませんこのwww.mysite.com/#/myPageLoggedINに変更してください。

角度JSルーティングまたは$ロケーションサービスを使用してこれを達成する方法はありますか。

Answer 1

角度チュートリアルをご覧ください。

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

@Jaxはあなたが望むものを達成するために$ routeProviderを設定することができ、言ったように。 UIルータと

EDIT

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

あなたはサービスや工場で$windowを注入し、$window.history.pushState()と$window.history.replaceState()方法を試みることができるコード

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

Answer 2

からacceedするにはこれはあなたにo履歴エントリの追加と変更。 https://www.consolelog.io/angularjs-：

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