【发布时间】:2018-08-08 21:27:16
【问题描述】:
我正在阅读一些关于 Angular JS 的教程,我可以加载单个页面并在单个文件中执行操作,但是当我到达路由时,它不会到达其他页面。
这是我在 app.js 中的内容:
var app = angular.module('tutorialApp', ["ngRoute", "tutorialCtrlModule"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/tutorial.html",
controller: "TutorialCtrl"
})
.when("/tutorialSecond", {
templateUrl: "views/tutorialSecond.html",
controller: "TutorialCtrl2"
})
.otherwise({
redirectTo: "/"
})
})
在我的 index.html 中,我包含了这些脚本文件:
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/tutorialCtrl.js"></script>
只要把这个放在正文里:
<body>
<div ng-view></div>
</body>
在我的 tutorial.html 中,我有一个这样定义的链接:
<a href="#/tutorialSecond">Tutorial Second Page</a>
所以当我加载我的 index.html 时,我可以看到 tutorial.html 的内容。 但是当我点击“教程第二页”链接时,什么也没有发生。我看到这样的 URL/URI:
file:///<some_path>/AngularTutorial/index.html#!/#%2FtutorialSecond
如果我将 app.js 代码更改为以下内容:
.when("/", {
templateUrl: "views/tutorialSecond.html",
controller: "TutorialCtrl2"
})
当我加载 index.html 时,我可以看到 tutorialSecond.html 内容出现。
那么,当我单击指向 /tutorialSecond 的链接时,为什么没有从我的原始代码中加载它?是不是因为我在本地以file://<path_to_index.html> 的形式运行并打开 index.html 而不是在 Web 服务器上运行?
请帮助...这阻碍了我继续学习本教程。 我在 Windows 7x64 中运行,使用 Firefox,昨天刚刚下载了最新的可用 angular js 文件。
提前谢谢你。
为部分回复添加一些额外的细节...
在我的 tutorialCtrl.js 文件中,两个控制器的定义如下:
angular.module("tutorialCtrlModule", [])
.controller("TutorialCtrl", ["$scope", function($scope) {
$scope.tutorialObject = {};
$scope.tutorialObject.title = "Main Page";
$scope.tutorialObject.subTitle = "Sub title";
}
}])
.controller("TutorialCtrl2", ["$scope", function($scope) {
$scope.secondTutorial = "This is the second tutorial";
}]);
并且这个 .js 文件包含在 index.html 中,如上所示。
【问题讨论】:
标签: javascript angularjs angularjs-routing