I attempted to perform a page redirection using angular redirect, but encountered a "couldn't resolve from state" error. I referenced the guide on passing parameters while redirecting in AngularJS using UI Router for assistance.
Below is my route.js code:
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'
});
});
Content of my 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>
Content of my 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>
I'm utilizing springboot and you can view a snapshot of my project structure here: https://i.sstatic.net/JYhYk.png
While I can access both first.html and second.html pages through my browser, clicking on the New Page button within first.html results in the following error message: Error: Could not resolve 'second' from state '' at Object.t.transitionTo (http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js:7:8834) at Object.t.go (http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js:7:8182) at Scope.$scope.getNewPage (http://localhost:8080/first.html:18:16) at fn (eval at (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js:13322:15), :4:221) at callback (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js:23549:17) at Scope.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js:15989:28) at Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js:16089:25) at HTMLButtonElement. (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js:23554:23) at HTMLButtonElement.eventHandler (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js:3298:21)
I would greatly appreciate any assistance. Thank you in advance.