Question

我不知道在哪里放置包含html视图的partials文件夹！我把它放在app根文件夹，视图和公共场所。还尝试删除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（此页面呈现为舞者（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中，所有显示的内容都是（在root或root＃/ view.html）：

<!-- ngView:  -->

Batarang不会检测范围或模块。谢谢你的帮助！

Answer 1

您的配置中似乎有拼写错误：

demoApp.config =(function ($routeProvider) {

而是尝试：

demoApp.config(function ($routeProvider) {

角度视图没有加载

1 个答案: