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路由器重定向

回答

相關問題