我将尝试使用Angular在单页应用程序中加载部分视图。我已经按照以下我的脚本文件代码所示进行了路由配置。
以下是我的加载部分视图的代码:
以下是索引页面:
但是当我加载index.html页面并点击超链接时,我的页面上没有看到视图。
视图上的HTML代码如下:
var app = angular.module("myBlogApp", ["ngRoute"])
.config(function ($routeProvider) {
$routeProvider
.when("/view1", {
templateUrl: "Views/view1.html",
controller: "view1Controller"
})
.when("/view2", {
templateUrl: "Views/view2.html",
controller: "view2Controller"
})
.when("/view3", {
templateUrl: "Views/view3.html",
controller: "view3Controller"
})
})
.controller("view1Controller", function ($scope) {
$scope.message = "You are in View 1";
})
.controller("view2Controller", function ($scope) {
$scope.message = "You are in View 2";
})
.controller("view3Controller", function ($scope) {
$scope.message = "You are in View 3";
})
以下是索引页面:
<html ng-app="myBlogApp">
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Scripts/Script.js"></script>
</head>
<body>
<table>
<tr>
<td>
<a href="#/view1">View1</a>
<a href="#/view2">View2</a>
<a href="#/view3">View3</a>
</td>
<td>
<div ng-view></div>
</td>
</tr>
</table>
</body>
</html>
但是当我加载index.html页面并点击超链接时,我的页面上没有看到视图。
视图上的HTML代码如下:
<h1>View2</h1>
<div>{{message}}</div>
message
绑定? - Sajalhref="#!/view1"
而不是href="#/view1"
。同时,检查控制台日志以查找错误(也许是路径错误)。 - Aleksey Soloveyng-href
,我认为你不需要在那里添加#!
。 - Aleksey Solovey