<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.angularjs.org/1.7.2/angular.min.js"></script>
<script src="https://code.angularjs.org/1.7.2/angular-route.min.js"></script>
</head>
<body ng-app="myApp">
<p><a href="#/">Main</a></p>
<a href="#/london">City 1</a>
<a href="#/paris">City 2</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.html"
})
.when("/london", {
templateUrl : "london.html"
})
.when("/paris", {
templateUrl : "paris.html"
});
});
</script>
</body>
</html>
当我单击链接时,看不到这些html页面的内容。 我的链接无效。我认为问题是“ href”属性的内容。 希望有人解决这个问题。
这是我注册模板的方式
angularJS(folder)
|
|ーindex.html
|ーmain.html
|ーlondon.html
|ーparis.html
所有模板都在相同的层次结构中
答案 0 :(得分:0)
一种更可靠的方法如下。 将以下内容插入到您希望显示城市数据的index.html中:
<div class='app-content' ui-view="main"></div>
在app.js
中创建与该函数相似的函数:
var app = angular.module('app', [
'paris'
]);
app.controller('AppCtrl', ['$scope', '$location', function AppCtrl($scope, $location) {
$scope.go = function(path, data) {
if(path === $location.path()) {
$state.reload();
} else {
$scope.loading = true;
$location.path(path).search({params: data});
}
};
}]);
在您的html
<a href="" ng-click="go('/paris')">City 2</a>
然后在您要访问的页面的控制器中,您既可以访问它,也可以按以下方式检索数据:
var paris = angular.module('paris', ['ui.router', 'ngSanitize']);
paris.config(['$stateProvider', function ($stateProvider) {
$stateProvider.state('paris', {
url: '/paris',
views: {
'main': {
controller: 'parisCtrl',
templateUrl: 'srcPath/paris.html'
}
}
});
}]);
paris.controller('parisCtrl',['$scope', '$location', function ($scope, $location) {
$scope.dataFromOtherPage = $location.search().params;
}]);