angular 中未显示初始页面

Question

我正在努力学习angular。谁能告诉我为什么 home.html 没有显示在我的 angular 应用程序上？我已经包含了所有必需的 angular 文件。当我启动应用程序时没有发生任何错误，只是一个空白屏幕。 jquery、bootstrap 和 fontawesome 之前可以正常工作，所以没有问题。我可以添加调试器语句并看到 app.js 被调用，但主页视图不显示。

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

根目录：

/index.html

/home.html

应用文件夹：

app/angular-route.js

app/app.js

Index.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';
});

Answer 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

angular 中未显示初始页面

Initial page not showing in angular

angularjs

ngroute