Angular 视图未加载

Question

我不确定将包含 html 视图的局部文件夹放在哪里！我已将它放在应用程序根文件夹、视图和 public 中。还尝试删除 templateUrl 的第一个尾部斜杠，但什么也没有。我也试过（作为视图加载容器）：

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

这只是一个学习示例，包含一个包含 2 个控制器和 2 个视图的模块。

这是 SPA（此页面呈现为 dancer(perl) 项目的路由“/”）：

<!DOCTYPE html>
<html ng-app="demoApp">
  <head>
    <title><% title %></title>
    <link rel="stylesheet" href="/customised_bootstrap/css/bootstrap.css">
    <script src="/bower_components/underscore/underscore.js"></script>
    <script src="/bower_components/backbone/backbone.js"></script>
    <script src="/bower_components/angular/angular.js"></script>
    <script src="/bower_components/angular-resource/angular-resource.js"></script>
    <script src="/bower_components/angular-route/angular-route.js"></script>
    <script src="/bower_components/ng-tasty/ng-tasty-tpls.js"></script>    

    <script>
      //define a module
      var demoApp = angular.module('demoApp', ['ngRoute']);

      //define routes for our module(each route will have its set of views and controllers)
      demoApp.config =(function ($routeProvider) {
        $routeProvider
          .when('/',
            {
              controller: 'simpleController1',
              templateUrl: '/partials/testAlexView1.html'
            })
          .when('/testAlexView1',
            {
              controller: 'simpleController2',
              templateUrl: '/partials/testAlexView1.html'
            })
          .when('/testAlexView2',
            {
              controller: 'simpleController2',
              templateUrl: '/partials/testAlexView2.html'
            })
          .otherwise({redirectTo: '/partials/testAlexView1.html'});
      });

      //define a controller within our module 'demoApp'
      demoApp.controller('simpleController1', function ($scope) {
        $scope.customers = [
          {name:'Boris', age:'18'}, 
          {name:'Claudia', age:'28'}, 
          {name:'Carlos', age:'39'}, 
          {name:'Ben', age:'25'}
        ];
        //var stuff ={};
      });

      demoApp.controller('simpleController2', function ($scope) {
        $scope.customers = [
          {name:'Alex', age:'18'}, 
          {name:'Albert', age:'28'}, 
          {name:'Anthony', age:'39'}, 
          {name:'Loren', age:'25'}
        ];
      });
    </script>

  </head>

<body>
  <div>
    <p>Main page of SPA test</p>
      <div ng-view></div>
  </div>
</body>
</html>

以下是两个相同的视图：

testAlexView1.html(testAlexView2.html也是一样):

<div>
  <input type="text" data-ng-model="name" /> {{ name }}
  <br />
  <ul>
    <li data-ng-repeat="customer in customers | filter:name | orderBy:'age'">
      {{customer.name}} - {{customer.age}}
    </li>
  </ul>
</div>

在浏览器检查器中，在视图应加载的 div 中，出现的所有内容是（在根目录或根目录#/view.html）：

<!-- ngView:  -->

Batarang 既不检测作用域也不检测模块。感谢您的帮助！

Answer 1

您的配置中似乎有错别字：

demoApp.config =(function ($routeProvider) {

改为尝试：

demoApp.config(function ($routeProvider) {

Angular 视图未加载

Angular view not loading

angularjs

angular-routing

angularjs-scope