Question

我只是熟悉AngularJS的一个非常基本的结构，我得到了空白的屏幕，没有错误显示在控制台中。

的index.html

＆＃13;

<!doctype html>
<html>

<head>
  <script src="angular.js"></script>
  <script src="route.js"></script>
  <script src="app.js"></script>
  <script src="controllers.js"></script>
</head>

<body ng-app="mySite">
  <div ng-view></div>
</body>

</html>

＆＃13;

/templates/hello.html

＆＃13;

<h2>Welcome {{helloTo.title}} to the world of Angular!</h2>

＆＃13;

app.js

＆＃13;

var mySite = angular.module("mySite", ['ngRoute', 'controllers']);

mySite.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: '/templates/hello.html',
        controller: 'helloController'
      })
      .otherwise({
        redirectTo: '/'
      });
  }
]);

＆＃13;

controllers.js

＆＃13;

var controllers = angular.module('controllers', []);

controllers.controller("helloController", function($scope) {
	$scope.helloTo = {};
	$scope.helloTo.title = "TestSite";
});

＆＃13;

我还应该提到我在本地测试apache服务器上运行此代码。要执行代码，我将浏览器指向：http://127.0.0.1/

Answer 1

您的代码完全有效，您应该检查是否在网络标签的Google Chrome开发人员工具面板中成功加载了hello.html。

以下是所有代码的重复版本，效果很好。

http://plnkr.co/edit/bWkJpEziz1eHkv5VdTv4?p=preview

<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js"></script>
    <script src="app.js"></script>
    <script src="controllers.js"></script>
  </head>

<body ng-app="mySite">
  <div ng-view></div>
</body>

</html>

Answer 2

尝试将$http服务添加到您的控制器，同时测试以检查您是否使用角度检查工具调用您的控制器，即http://ng-inspector.org

ngRoute在AngularJS中导致空白屏幕？

2 个答案: