AngularJS UI router redirect

Question

I am trying to redirect to another page using angular redirect. But I am getting a couldn't resolve from state error. I followed the How to pass parameter when I redirect the page in angularjs using ui router? link.

Please find below 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'
});
});

My first.html code

<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>

My second.html code

<!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 am using springboot and my project structure snapshot is attached here:

Please help. Thanks in advance.

Why two html pages? You should have one index.html file and manage it states with <ui-view>. So I'm not sure what you want to do here. — Shikloshi
– Shikloshi, Commented Oct 29, 2015 at 6:41

Sudharsan S · Accepted Answer · 2015-10-29 06:43:46Z

0

In your second html code you inject $state wrongly instead of $stateParams. So that your code didn't work

Inject with $stateParams

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

or use $state.params.id

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

answered Oct 29, 2015 at 6:43

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

supreethmurthy Over a year ago

I tried both your suggestions. They didn't work. I am beginning to think if its a path issue and my JS is not able to find the html templates? Do I have to add additional tags or define them as ng-templates in my html so that routes.js can see it?

Collectives™ on Stack Overflow

AngularJS UI router redirect

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related