奇怪无法使用 AngularJS 应用程序加载模板

Question

我正在尝试一些非常基本的东西，我的文件夹结构类似于

这是我的 HTML 文件：

 <!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <title> Using Angular JS</title>
      <script src="angular.js"></script>
   <script src="angular-route.js"></script>
   <script src="app.js"></script>
   <script src="controller.js"></script>
</head>

<body >

  <ul>
   <div data-ng-view=""></div>
  </ul>

</body>
</html>

这是我的 app.js

'use strict';
var phonecatApp = angular.module('phonecatApp', [
  'ngRoute',
  'phonecatControllers'
]);

phonecatApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/view1', {
       templateUrl: "view1.html",
        controller: 'PhoneListCtrl'
      }).
      when('/view2', {
       templateUrl: 'view2.html',
        controller: 'PhoneDetailCtrl'
      }).
      otherwise({
        redirectTo: '/view1'
      });
  }]);

最后 controller.js

'use strict';

/* Controllers */

var phonecatControllers = angular.module('phonecatControllers', []);

phonecatControllers.controller('PhoneListCtrl', ['$scope',
  function($scope) {
   $scope.phones = [
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.'}
  ];
  }]);

phonecatControllers.controller('PhoneDetailCtrl', ['$scope',
  function($scope) {
    $scope.phones = [
    {'name': 'Nexus S1',
     'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi1',
     'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™1111',
     'snippet': 'The Next, Next Generation tablet.'}
  ];
  }]);

而运行我得到的这个样本

我尝试过不同的加载模板组合，例如：

templateUrl: "file:///E:/TryDemos/hemantTry/view1.html", templateUrl: "/hemantTry/view1.html", 模板网址：“/view1.html”

等等等...

但无法纠正实际问题所在

任何帮助或提示将不胜感激

请注意：在 VS 空项目中粘贴这些文件时工作正常。

提前致谢

Answer 1

您正在通过在浏览器中打开一个常规文件 (index.html) 来加载应用程序。 Angular 将尝试通过 xhr 请求加载模板，这将失败，因为您没有 http 服务器。有几种方法可以解决它：

使用 Grunt with Yeoman 生成应用程序模板并在其中添加文件，然后使用 grunt serve
使用 http-server 从您的项目目录启动一个 http 服务器

Answer 2

为了使解决方案非常精确，请查看下面的注释。

'phonecatControllers' 不要将它注入 angular.module 在你的 app.js
从你的路由机制中删除控制器只保留templateUrl如果你想在运行时向模板证明控制器就足够了你的情况不需要。

在您的控制器中删除以下行。

'use strict';    
/* Controllers */    
var phonecatControllers = angular.module('phonecatControllers', []);

你的控制器名称必须像

phonecatApp .controller('PhoneListCtrl', ['$scope',

最好使用ng-view而不是data-ng-view作为属性。
然后你可以将模板路径设为 /view1.html 或 ./view1.html 都可以，你需要提供绝对路径。

希望这能解决您的问题

奇怪无法使用 AngularJS 应用程序加载模板

Strange Failed to load template with AngularJS app

angularjs

angularjs-routing

奇怪 无法使用 AngularJS 应用程序加载模板

Strange Failed to load template with AngularJS app

angularjs

angularjs-routing

奇怪无法使用 AngularJS 应用程序加载模板