angularjs - $state.go 更改 url 但不加载 html 页面
angularjs - $state.go change url but not load html page
我正在 angularJS 中练习路由并遇到问题。我在网上查看并尝试了很多方法,但这并不能解决我的问题。你能帮帮我吗?
我在使用 $state.go 函数时遇到问题。它更改了 url,但未加载 html 文件。我查看了控制台,但没有出现错误
app.js
(function(){
var app = angular.module('myTrello',
['date-directives', 'ngRoute', 'ui.router']);
app.controller("mainCtrl", ['$scope', '$http', '$state', '$route', function($scope, $http, $state, $route){
$scope.title = "Welcome to my trello";
$http.get("http://quotes.rest/qod.json")
.then(function(response) {
let quoteInfo = response.data.contents.quotes[0];
$scope.quote = quoteInfo.quote;
$scope.author = quoteInfo.author;
});
$scope.go = function(path) {
$state.go(path, {});
};
}]);
app.controller("boardCtrl", function(){
});
// app.controller("routeCtrl", function($scope, $routeParams) {
// $scope.param = $routeParams.param;
// });
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'index.html',
controller: 'mainCtrl'
})
.state('boards', {
url: '/boards',
templateUrl: 'boards/board.html',
controller: 'boardCtrl'
})
// .state('/boards/:param', {
// url: '/boards/:param',
// templateUrl: 'index.html',
// //controller: 'boardCtrl'
// })
}]);
})();
index.html(重要部分)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="bower-angular-route/angular-route.js"></script>
<script src="https://unpkg.com/angular-ui-router@1.0.3/release/angular-ui-router.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
<script src="date.js"></script>
<body ng-controller="mainCtrl">
<div class="container">
<div class="jumbotron">
<div class="title">
<h2 class="text-center">{{title}}</h2>
</div>
</div>
<div class="bg-1 text-white text-center">
<h3>Today's quote</h3>
<h4>{{quote}}</h4>
<h5>By: {{author}}</h5>
</div>
</div>
<button class="btn btn-info btn-lg boards" ng-click="go('boards')">My boards</button>
<div ng-view></div>
</body>
board.html
<html>
<h1>Boards</h1>
</html>
由于您正在使用 ui-router
,您需要使用 ui-view
指令而不是 ng-view
,因此将代码更改为
<div ui-view></div>
而不是
<div ng-view></div>
我正在 angularJS 中练习路由并遇到问题。我在网上查看并尝试了很多方法,但这并不能解决我的问题。你能帮帮我吗?
我在使用 $state.go 函数时遇到问题。它更改了 url,但未加载 html 文件。我查看了控制台,但没有出现错误
app.js
(function(){
var app = angular.module('myTrello',
['date-directives', 'ngRoute', 'ui.router']);
app.controller("mainCtrl", ['$scope', '$http', '$state', '$route', function($scope, $http, $state, $route){
$scope.title = "Welcome to my trello";
$http.get("http://quotes.rest/qod.json")
.then(function(response) {
let quoteInfo = response.data.contents.quotes[0];
$scope.quote = quoteInfo.quote;
$scope.author = quoteInfo.author;
});
$scope.go = function(path) {
$state.go(path, {});
};
}]);
app.controller("boardCtrl", function(){
});
// app.controller("routeCtrl", function($scope, $routeParams) {
// $scope.param = $routeParams.param;
// });
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'index.html',
controller: 'mainCtrl'
})
.state('boards', {
url: '/boards',
templateUrl: 'boards/board.html',
controller: 'boardCtrl'
})
// .state('/boards/:param', {
// url: '/boards/:param',
// templateUrl: 'index.html',
// //controller: 'boardCtrl'
// })
}]);
})();
index.html(重要部分)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="bower-angular-route/angular-route.js"></script>
<script src="https://unpkg.com/angular-ui-router@1.0.3/release/angular-ui-router.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
<script src="date.js"></script>
<body ng-controller="mainCtrl">
<div class="container">
<div class="jumbotron">
<div class="title">
<h2 class="text-center">{{title}}</h2>
</div>
</div>
<div class="bg-1 text-white text-center">
<h3>Today's quote</h3>
<h4>{{quote}}</h4>
<h5>By: {{author}}</h5>
</div>
</div>
<button class="btn btn-info btn-lg boards" ng-click="go('boards')">My boards</button>
<div ng-view></div>
</body>
board.html
<html>
<h1>Boards</h1>
</html>
由于您正在使用 ui-router
,您需要使用 ui-view
指令而不是 ng-view
,因此将代码更改为
<div ui-view></div>
而不是
<div ng-view></div>