0
ui-sref = "state1"またはui-sref = "state"をクリックすると、URLはhttp://demo/state1またはhttp://demo/state2のように変更されますが、 URLそれはあなたが私にリダイレクトするようにサーバーのURL書き換えルールを記述する必要が角度UIルートがページリロードや直接URLヒットで動作しない
<html>
<base href="/">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<div ui-view></div>
<!-- We'll also add some navigation: -->
<a ui-sref="state1">State 1</a>
<a ui-sref="state2">State 2</a>
</div>
</body>
</html>
JSコード
var app = angular.module('myApp', ['ui.router']);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
app.config(function($stateProvider,$locationProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/state1");
//
// Now set up the states
$stateProvider
.state('state1', {
url: "/state1",
template: "<div>state1</div>"
})
.state('state2', {
url: "/state2",
template: "<div>state2</div>"
})
$locationProvider.html5Mode(true);
});
サーバー 'html5Mode'をサポートするように設定する必要があります。 https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5modehttps://github.com/angularを参照してください。 -ui/ui-router/wiki /よくある質問-html5modeを使用してサーバーを設定する方法 – Claies
あなたのルートURLは何ですか？デモは機能しますか？ –
ng1ルーターのURLの変更は、クライアント側のサーバーでのみ実際に変更されるものではありません。 ng1ルーターは、テンプレートとデータをサーバー上のものからローカルに切り離してつなぎ合わせるだけです。 –