ng-Route 没有加载视图，显示一个空白屏幕，没有任何错误
Posted
技术标签:
【中文标题】ng-Route 没有加载视图，显示一个空白屏幕，没有任何错误【英文标题】：ng-Route is not loading the view, a blank screen is displayed without any errors 【发布时间】：2015-06-14 06:44:26 【问题描述】：我正在尝试使用 ng-route 在 Angular 中创建一个应用程序，但我无法让它工作。
我确实搜索了该问题并尝试了将我的 ng-app 移动到的建议，但似乎没有任何效果。
我在下面添加了一个 plunker 链接
http://plnkr.co/edit/a8VIRzloIMqANK4f8YXb?p=preview
谁能帮忙
这里也添加代码
索引html
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script type="text/javascript" src="dist/ng-table.min.js"></script>
<link rel="stylesheet" href="dist/ng-table.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js"></script>
<link href="main.css" rel="stylesheet" />
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="DemoCtrl.js"></script>
</head>
<body ng-controller="DemoCtrl" ng-app="stockApp">
<header>
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<h1 class="stockHeader">Stock App</h1>
<a class="blog-nav-item pull-right" href="#/">Login</a>
<a class="blog-nav-item pull-right" href="#/stock">Stock</a>
<a class="blog-nav-item active pull-right" href="#/addTools">Add Tools</a>
</nav>
</div>
</div>
</header>
<div ng-view></div>
</body>
</html>
app.js
var sampleApp = angular.module('stockApp', ['ngRoute']);
sampleApp.config(['$routeProvider',
function($routeProvider)
$routeProvider.
when('/',
templateUrl: 'login.html',
controller: 'DemoCtrl'
).
when('/stock',
templateUrl: 'stockStatus.html',
controller: 'DemoCtrl'
).
when('/addTools',
templateUrl: 'addTools.html',
controller: 'DemoCtrl'
).
otherwise(
redirectTo: '/'
);
]);
DemoCtrl.js
var app = angular.module('stockApp', ['ngTable']).
controller('DemoCtrl', function($scope)
$scope.stock="In Stock!"
)
除此之外还有 3 个部分。
【问题讨论】：
部分文件与其他文件位于同一文件夹中 【参考方案1】：查看您的原始 plunker 的这个分支，其中以下代码段已更新：http://plnkr.co/edit/91XYMEC85Shgu6kQSrty?p=preview
// DemoCtrl.js
var app = angular.module('controllers', []).
controller('DemoCtrl', function($scope)
$scope.stock="In Stock!"
)
// app.js
var sampleApp = angular.module('stockApp', ['ngRoute', 'controllers']);
首先，您的控制器代码通过传入依赖项重新初始化 stockApp 模块。如果您的控制器需要单独的依赖关系，请将它们创建为单独的模块并使您的应用程序依赖于该模块。
其次，我更新了angular和angular JS的版本。根据之前的答案，冲突版本可能会导致问题：Failed to instantiate module [$injector:unpr] Unknown provider: $routeProvider。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
【讨论】：
在 Eclipse 中运行相同的代码时，它会起作用。它给出的错误为：未捕获的错误：[$injector:modulerr]errors.angularjs.org/1.3.14/$injector/…...oogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A1) 任何可能出错的建议。 我不确定；如果它在我发布的 plunker 中按您期望的方式工作，但在您的本地项目中运行时出现问题，我的猜测是代码未正确应用。您是否确保替换了 Angular 脚本引用而不是仅仅添加它们，并且您是否将两个代码块放在各自的文件中？您是否调整了控制器模块名称之类的内容或进行了任何其他可能拼写错误/不正确的更改？【参考方案2】：还有一件事要检查...确保以正确的顺序加载 Angular js 文件（控制器、服务、工厂等）。例如，如果控制器使用服务，则需要在控制器之前将服务加载到 DOM 中。
此外，请确保您的任何服务或工厂都没有重新初始化应用程序。您的代码不应如下所示：
angular.module('app', [])
.service('TrxnService', function ()
//code here
)
但是，它应该看起来像这样（不带括号）......
angular.module('app')
.service('TrxnService', function ()
//code here
)
新手注意事项：将“app”替换为您在***模块声明中为应用命名的任何内容。
【讨论】：
以上是关于ng-Route 没有加载视图，显示一个空白屏幕，没有任何错误的主要内容，如果未能解决你的问题，请参考以下文章