Question

我有小问题，我的AngularJS应用程序无法正常工作。一切似乎都很好......但是当我打开项目的页面时，它是空白的...
AngularJS在此页面上正常工作，因为我已经检查了出现的简单示例和页面我尝试了很多解决方案：将id添加到html标签，将[＆＃39; ngRoute＆＃39;]添加到模块中，但它仍然无效...
这是代码：

的的test.html

<!DOCTYPE html>
<html ng-app="demoApp" id="demoApp">
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
  </head>
  <body>
    <div>
      <!-- placeholder for views -->
      <div ng-view="demoApp">
        <ng-view></ng-view>
      </div>
    </div>
    </script>
    <script>
      var demoApp = angular.module("demoApp", ['ngRoute']);

      demoApp.config(function($routeProvider) {
        $routeProvider.when("#/view1", {
            controller: "SiteController",
            templateUrl: "view1.html"
          });
        $routeProvider.when("#/view2", {
            controller: "SiteController",
            templateUrl: "view2.html"
          });
        $routeProvider.otherwise({ redirectTo: "/view1.html" });
      });

      demoApp.controller("SiteController", function($scope) {
        $scope.customers = [
          { name: 'Piotrek', city: 'Radom' },
          { name: 'Jan', city: 'Cracow' }
        ];

        $scope.addCustomer = function() {
          $scope.customers.push(
            {
              name: $scope.newCustomer.name,
              city: $scope.newCustomer.city
             });
        };
      });
    </script>
  </body>
</html>

的 view1.html

<div class="container">
  <h2>View 1</h2>
  Name:
  <br />
  <input type="text" data-ng-model="filter.name" />
  <br />
  <ul>
    <li data-ng-repeat="cust in customers | filter:filter.name">
      {{cust.name}} - {{cust.city}}
    </li>
  </ul>
  <br />
  Customer Name:<br />
  <input type="text" data-ng-model="newCustomer.name" />
  <br />
  Customer City:<br />
  <input type="text" data-ng-model="newCustomer.city" />
  <br />
  <button data-ng-click="addCustomer()">Add Customer</button>
  <br />
  <a href="#/view2">View 2</a>
</div>

的 view2.html

<div class="container">
  <h2>View 2</h2>
  City:
  <br />
  <input type="text" data-ng-model="city" />
  <br />
  <ul>
    <li data-ng-repeat="cust in customers | filter:city">
      {{cust.name}} - {{cust.city}}
    </li>
  </ul>
</div>

有什么想法吗？

Answer 1

$routeProvider的配置看起来很可疑。

  demoApp.config(function($routeProvider) {
    $routeProvider.when("#/view1", {
        controller: "SiteController",
        templateUrl: "view1.html"
      });
    $routeProvider.when("#/view2", {
        controller: "SiteController",
        templateUrl: "view2.html"
      });
    $routeProvider.otherwise({ redirectTo: "/view1.html" });
  });

我很确定您需要省略when块中的＃，并且您应该引用路径而不是otherwise中的模板。

尝试：

  demoApp.config(function($routeProvider) {
    $routeProvider.when("/view1", {
        controller: "SiteController",
        templateUrl: "view1.html"
      });
    $routeProvider.when("/view2", {
        controller: "SiteController",
        templateUrl: "view2.html"
      });
    $routeProvider.otherwise({ redirectTo: "/view1" });
  });

AngularJS查看渲染问题 - 空白页面

1 个答案: