初始页面未以角度显示答案

【问题标题】：Initial page not showing in angular初始页面未以角度显示
【发布时间】：2015-12-01 23:30:07
【问题描述】：

我正在尝试学习角度。有人能告诉我为什么 home.html 没有显示在我的 Angular 应用程序上吗？我包含了所有必需的角度文件。启动应用程序时没有错误发生，只是一个空白屏幕。 jquery、bootstrap 和 fontawesome 以前都可以工作，所以没有问题。我可以添加一个调试器语句，看到 app.js 被调用了，但是主视图没有显示。

我的解决方案中的文件夹结构：

根：

/index.html

/home.html

应用文件夹：

app/angular-route.js

app/app.js

索引.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Learning Angular</title>

    <link href="libs/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="libs/fontawesome/css/font-awesome.min.css" rel="stylesheet" />
    <link href="css/main.css" rel="stylesheet" />

    <script src="libs/angular/angular.min.js"></script>
    <script src="app/angular-route.js"></script>
    <script src="app/app.js"></script>
</head>

<body ng-app="myApp">
    <div class="container">
        <div ng-view></div>
    </div> <!-- /container -->
</body>

    <script src="libs/jquery/jquery-2.1.4.min.js"></script>
    <script src="libs/bootstrap/js/bootstrap.min.js"></script>

</html>

home.html

<p>
    Welcome to Home {{user.firstName}}
</p>

<div class="row">
    <div class="col-md-6">
        <form class="registrationForm">
            <h2 class="form-signin-heading faArrowIcon">Please sign in</h2>
            <label for="inputEmail">Email address</label>
            <input type="email" id="inputEmail" class="form-control validateIt" placeholder="Email address" required autofocus>
            <label for="inputPassword">Password</label>
            <input type="password" id="inputPassword" class="form-control validateIt" placeholder="Password" required>
            <div style="padding: 0; margin: 0;" class="col-md-3 pull-right">
                <button id="submitButton" class="btn btn-lg btn-primary btn-block" type="submit" disabled>Sign in</button>
            </div>
        </form>
    </div>
</div>

app.js

var sampleApp = angular.module('myApp', ['ngRoute']);

sampleApp.config(['$routeProvider',
  function ($routeProvider) {
    $routeProvider.
      when('/AddNewOrder', {
        templateUrl: 'templates/add_order.html',
        controller: 'AddOrderController'
    }).
      when('/ShowOrders', {
        templateUrl: 'templates/show_orders.html',
        controller: 'ShowOrdersController'
      }).
      otherwise({
        redirectTo: '/home.html'
      });
}]);

sampleApp.controller('AddOrderController', function($scope) {

    $scope.message = 'This is Add new order screen';
});

sampleApp.controller('ShowOrdersController', function($scope) {

    $scope.message = 'This is Show orders screen';
});

【问题讨论】：

标签： angularjs ngroute

【解决方案1】：

您需要指定回家路线并将其设置为主路线。

这是一个例子：

app.config(function($routeProvider) {
  $routeProvider.
  when('/', {
    templateUrl: 'home.html',
  }).
  when('/route2', {
    templateUrl: 'route2.html',
  }).
  otherwise({
    redirectTo: '/'
  });
});

index.html

<body ng-controller="MainCtrl">
  <div>
    <a href="#/home">home</a>
    <a href="#/route2">route2</a>
  </div>
  <div ng-view></div>
</body>

还有一个工作的plnkr

【讨论】：

那行得通。我曾认为将 home.html 放在 else 块中是这样做的方法，但我想不是。谢谢。