Question

我正在为我正在建设的应用程序学习一些Angular。

在完成一些教程后，我有一个基本的程序工作，有两个视图和一些路由在它们之间翻转。我现在正在浏览器中运行它，它一直空白。没有控制台错误，我发誓，自从我最后一次工作以来，我还没有碰过它。

这是我的主要档案：

<!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'
    });
  }]);

第一个观点：

<h2>Add New Order</h2>

<a href = "#ShowOrders">Show Order</a>

第二种观点：

<h2>Show Orders</h2>

<a href = "#AddNewOrder">Back</a><br>

任何想法都表示赞赏。我不知道此时要检查什么。

更新

以下是我从这个小练习中发现的三件重要事情：

1）角度视图没有默认路线，除非您使用＆＃34设置一个;否则＆＃34; 基本上，即使您已经设置了一对不同的路线，当页面首次加载时，ng-view为空白，除非用户通过单击视图外的链接加载路径，或者如果您通过添加＆＃34设置了默认值;否则＆＃34;到您的路线控制器。

otherwise (
  {
  templateUrl: 'templates/add_order.html'
  });

此链接非常有用： http://blog.kevinchisholm.com/angular/angular-js-basics-routes-part-iii-creating-a-default-route/

2）显然除非你有＆＃34;否则你在ng-view的html中的任何内容都将被呈现。何时（＆＃39; /＆＃39;＆＃34;在控制器中路由。

3）当从硬盘驱动器运行时，Angular不能很好地工作。 无论出于何种原因，您必须先将其上传到服务器。

添加这些步骤后，我的演示再次运行。现在回想起来，我不知道如何在没有这方面知识的情况下第一次使用它。

Answer 1

工作正常......

看看这个演示

<强> 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>

简单的AngularJS程序在浏览器中为空

1 个答案: