Перенаправление маршрутизатора AngularJS UI

Question

Перенаправление маршрутизатора AngularJS UI

0

Я пытаюсь перенаправить на другую страницу, используя угловую перенаправление. Но я не могу разрешить ошибку состояния. Я выполнил параметр " Как передать", когда перенаправляю страницу в angularjs с помощью маршрутизатора ui? ссылка.

Ниже вы найдете мой код route.js:

var helloWorldApp = angular.module('helloWorldApp', ['ui.router']);
helloWorldApp.config(function($stateProvider,$urlRouterProvider) {
$stateProvider
.state('first', {
    url: '/first',
    templateUrl: 'first.html'
})

.state('second', {
    url: '/second',
    templateUrl: 'second.html'
});
});

Мой код first.html

<html lang="en" ng-app="helloWorldApp">
<head>
<meta charset="UTF-8">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.2.js"></script>
<script type="text/javascript" src="./app/routes.js"></script>
</head>
<script type="text/javascript">
var helloAppConf = angular.module('helloWorldApp', ['ui.router']);
helloAppConf.controller('firstCtrl',function($scope,$state){
    $scope.userInput='Hello world from first page';
    $scope.getNewPage=function() {
        $state.go("second", { id: $scope.userInput });
    }
});

</script>
<body>
    <div ng-controller="firstCtrl">
        <h4>{{userInput}}</h4>
        <button ng-click="getNewPage()">New Page</button>
    </div>
</body>
</html>

Мой код second.html

<!DOCTYPE html>
<html lang="en" ng-app="helloWorldApp">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.2.js"></script>
    <script type="text/javascript" src="./app/routes.js"></script>
</head>
<script type="text/javascript">
    var helloAppConf = angular.module('helloWorldApp', ['ui.router']);
        helloAppConf.controller('secondCtrl' , function($scope, $state){
        $scope.id = $stateParams.id;
    });
</script>
<body>
<div ng-controller="secondCtrl">
    <h4>{{id}}</h4>
    <button ng-click="getNewPage()">New Page</button>
</div>
</body>
</html>

Я использую springboot, и мой снимок структуры проекта прилагается здесь:

Я могу получить доступ к страницам first.html и second.html в моем браузере. Но когда я нажимаю кнопку "Новая страница" на first.html, я получаю ошибку: не удалось разрешить "второй" из состояния "" в Object.t.transitionTo(http://cdnjs.cloudflare.com/ajax/libs/угловой-ui-router/0.2.8/angular-ui-router.min.js: 7: 8834) в Object.t.go(http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js:7:8182) в области видимости. $ Scope.getNewPage(http://localhost: 8080/first.html: 18: 16) в fn (eval at (http ://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js: 13322: 15) ,: 4: 221) при обратном вызове (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js: 23549: 17) в области. $ eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js:15989:28) в области. $ apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js:16089:25) в HTMLButtonElement. (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js:23554:23) в HTMLButtonElement.eventHandler(http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js: 3298: 21)

Пожалуйста помоги. Заранее спасибо.

supreethmurthy 29 окт. 2015, в 08:18

Источник

0

Почему две HTML-страницы? Вы должны иметь один файл index.html и управлять его состояниями с помощью <ui-view>. Так что я не уверен, что вы хотите сделать здесь.
Shikloshi 29 окт. 2015, в 06:41

Теги:

javascript

angularjs

redirect

1 ответ

Ещё вопросы

Почему две HTML-страницы? Вы должны иметь один файл index.html и управлять его состояниями с помощью <ui-view>. Так что я не уверен, что вы хотите сделать здесь.

Sudharsan S · Answer 1 · 2015-10-29T04-42-00.000Z

В вашем втором коде html вы вводите $state неправильно вместо $stateParams. Чтобы ваш код не работал

Ввод с помощью $stateParams

var helloAppConf = angular.module('helloWorldApp', ['ui.router']);
    helloAppConf.controller('secondCtrl' , function($scope, $stateParams){
    $scope.id = $stateParams.id;
});

или используйте $state.params.id

var helloAppConf = angular.module('helloWorldApp', ['ui.router']);
    helloAppConf.controller('secondCtrl' , function($scope, $state){
    $scope.id = $state.params.id;
});

Я попробовал оба твоих предложения. Они не работали. Я начинаю думать, если это проблема пути, и мой JS не может найти шаблоны HTML? Нужно ли мне добавлять дополнительные теги или определять их как ng-шаблоны в моем html, чтобы маршруты .js могли его видеть?