我正在为我正在构建的应用程序学习一些 Angular。
在学习了一些教程之后，我有了一个基本的程序，它有两个 View 和一些在它们之间切换的路由。我现在在浏览器中运行它，它显示为空白。没有控制台错误，我发誓自从上次它工作以来我就没有碰过它。
这是我的主文件:
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routing example</title>
<style>
body
{
font-family: arial;
padding: 20px;
}
</style>
</head>
<body ng-app = "journal_program">
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src = "app.js"></script>
<div ng-view>
</div>
</body>
</html>
还有我的 JavaScript:
var journal_program = angular.module ("journal_program", []);
journal_program.config (['$routeProvider', function ($routeProvider)
{
$routeProvider.
when ('/AddNewOrder',
{
templateUrl: 'templates/add_order.html'
}).
when ('/ShowOrders',
{
templateUrl: 'templates/show_orders.html'
});
}]);
第一个 View :
<h2>Add New Order</h2>
<a href = "#ShowOrders">Show Order</a>
第二个 View :
<h2>Show Orders</h2>
<a href = "#AddNewOrder">Back</a><br>
任何想法都值得赞赏。我不确定此时要检查什么。
更新:
以下是我从这个小练习中发现的 3 件重要的事情:
1) Angular View 没有默认路由，除非你用“otherwise”设置。基本上，即使你设置了几个不同的路由，ng-view 在以下情况下也是空白的:页面首先加载，除非用户通过单击 View 外部的链接加载路由，或者您通过向路由 Controller 添加“otherwise”来设置默认值。
otherwise (
{
templateUrl: 'templates/add_order.html'
});
此链接非常有用: http://blog.kevinchisholm.com/angular/angular-js-basics-routes-part-iii-creating-a-default-route/
2)显然你在 ng-view 的 html 中放入的任何内容都不会被渲染，除非你在 Controller 中有一个“when ('/'”路由。
3) 当脱离硬盘运行时，Angular 的工作效果不太好。 无论出于何种原因，您都必须先将其上传到服务器。
添加这些步骤后，我的演示再次运行。现在回想起来，我不确定在没有这些知识的情况下我第一次是如何让它工作的。
最佳答案
工作正常...
看看这个演示
<强> Working Demo
<div ng-view>
</div>
<h2>Show Orders</h2>
<a href="#ShowOrders">Show Order</a>
<h2>Add New Order</h2>
<a href="#AddNewOrder">Add Order</a>
<br>
关于javascript - 简单的 AngularJS 程序在浏览器中为空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25658068/