初始页面未显示角度

我正在尝试学习角度。有人能告诉我为什么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

初始页面未显示角度

回答

相关问题