gpt4 book ai didi

javascript - ngRoute 导致 AngularJS 中的黑屏?

转载 作者:行者123 更新时间:2023-12-03 08:06:09 24 4
gpt4 key购买 nike

我刚刚熟悉 AngularJS 的一个非常基本的结构,我得到的是空白屏幕,控制台中没有显示任何错误。

index.html

<!doctype html>
<html>

<head>
<script src="angular.js"></script>
<script src="route.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
</head>

<body ng-app="mySite">
<div ng-view></div>
</body>

</html>

/templates/hello.html

<h2>Welcome {{helloTo.title}} to the world of Angular!</h2>

app.js

var mySite = angular.module("mySite", ['ngRoute', 'controllers']);

mySite.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/templates/hello.html',
controller: 'helloController'
})
.otherwise({
redirectTo: '/'
});
}
]);

controllers.js

var controllers = angular.module('controllers', []);

controllers.controller("helloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "TestSite";
});

我还应该提到我正在本地测试 apache 服务器上运行此代码。为了执行代码,我将浏览器指向:http://127.0.0.1/

最佳答案

您的代码完全有效,您应该在 Google Chrome 开发者工具面板的网络选项卡中检查 hello.html 是否已成功加载。

这是您所有代码的重复版本,并且运行良好。

http://plnkr.co/edit/bWkJpEziz1eHkv5VdTv4?p=preview

<html>

<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
</head>

<body ng-app="mySite">
<div ng-view></div>
</body>

</html>

关于javascript - ngRoute 导致 AngularJS 中的黑屏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34376581/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com