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：＆＃34; file：/// E：/TryDemos/hemantTry/view1.html"， templateUrl：＆＃34; /hemantTry/view1.html"， templateUrl：＆＃34; /view1.html"

等等......

但无法纠正实际问题

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

只是抬头：在VS空项目中粘贴这些文件工作正常。

提前致谢

Answer 1

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

使用Grunt与Yeoman生成应用程序模板并在那里添加文件，然后使用grunt serve
使用http-server从项目目录

Answer 2

要准确了解解决方案，请查看以下注释。

'phonecatControllers'不会将其注入 app.js中的angular.module
从你的路由机制中移除控制器只保留templateUrl ，如果你想在运行时向模板证明控制器，那么在那里编写足够的控制器，这在你的情况下是不必要的。< / p>

在控制器中删除以下行。

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

并且您的控制器名称必须类似于

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

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

希望这可以解析您的查询

Strange无法使用AngularJS应用加载模板

2 个答案: