初始頁面未顯示角度

我正在嘗試學習角度。有人能告訴我爲什麼home.html不顯示在我的角度應用程序？我已經包含了所有需要的角度文件。當我啓動應用程序時，沒有錯誤發生，只是一個空白的屏幕。 jquery，bootstrap和fontawesome之前都在工作，所以沒有問題。我可以添加一個調試器語句並查看該app.js被調用，但不顯示主視圖。在我的解決方案初始頁面未顯示角度

文件夾結構：

根：

/index.html

/home.html

app文件夾：

應用程序/角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'; 
});

來源

2015-12-01 Wannabe

你需要指定產品的路線，並將其設置爲你的主路線。

這裏有一個例子：

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

來源

2015-12-01 15:26:32

工程。我曾經認爲把home.html放在其他區塊是做這件事的方式，但我想不是。謝謝。 – Wannabe

初始頁面未顯示角度

回答

相關問題