AngularJS UI路由器重定向

我正在尝试使用角度重定向重定向到另一个页面。但是我得到了一个无法解决的状态错误。我跟着How to pass parameter when I redirect the page in angularjs using ui router?链接。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和我项目结构快照如下：

请帮忙。提前致谢。

来源

2015-10-29 supreethmurthy

为什么两个HTML页面？您应该有一个index.html文件并使用来管理它。所以我不确定你想在这里做什么。 – Shikloshi

在您的第二个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; 
});

来源

2015-10-29 06:43:46

我尝试了你的建议。他们没有工作。我开始考虑如果它的路径问题，我的JS无法找到HTML模板？我是否必须添加额外的标签或将其定义为ng-templates，以便routes.js可以看到它？ – supreethmurthy

AngularJS UI路由器重定向

回答

相关问题