它没有加载 Angular 中的视图

Question

我有一个空的 MVC 项目，但是我确实有一个名为 MyViews 并包含 html（view1.html 和 view2.html）的文件夹，而脚本html 位于主项目文件夹下（位置在 global.asax 文件下方）。

<html data-ng-app="App">

<head>
  <title></title>
</head>

<body>
  <div>
    <div data-ng-view=""></div>
    <input type="text" name="txtName" data-ng-model="typedName" />
    <br />Typed Name is: {{ typedName }}
    <br />Names:
    <ul>
      <li data-ng-repeat="person in Customers | orderBy:'name' |  filter:typedName ">{{ person.name | uppercase}} - {{ person.city }}
      </li>
    </ul>
  </div>
  <script src="Scripts/angular.min.js"></script>
  <script>
    angular.module('App', []).config(function($routeProvider) {
        $routeProvider
          .when('/View1', {
            controller: 'Fir',
            templateUrl: '/MyViews/View1.html'
          })
          .when('/View2', {
            controller: 'Fir',
            templateUrl: '/MyViews/View2.html'
          })
          .otherwise({
            redirectTo: '/View1'
          });
      })
      .controller('Fir', function($scope) {
        $scope.Customers = [{
          name: 'Kiam',
          city: 'Los Angeles'
        }, {
          name: 'Se',
          city: 'Los Vegas'
        }]
      });
  </script>
</body>

</html>

为什么没有加载视图？ :(

Answer 1

您能检查一下您的 MyViews 文件夹是否与您的 JavaScript 文件位于同一路径吗？

此外，请尽量避免以 / 开头的路径，这表示来自应用程序 root 的路径。

templateUrl 路径必须相对于被调用的 JavaScript 文件。

app/
    main.js
    MyViews/
        View2.html

Answer 2

您正在尝试使用 angular 路由模块 ngRoute，但您从未真正将其包含在您的页面中。

您需要进行两处更改才能使此代码正常工作；首先，您需要在您的页面上加载 ngRoute 模块，当然，您的 Scripts 目录中也有可用的模块。即

<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.js"></script>

其次，您需要在应用程序的模块依赖项中包含 ngRoute，如下所示：

angular.module('App', ['ngRoute']).config(function($routeProvider) {

正如我之前向您提到的，您不能按照一个两年前的视频指南并期望它能与当前版本的 angular 一起正常工作。已经有许多重大更改，包括这种情况，其中 angular 路由模块被移动到它自己的文件中。

它没有加载 Angular 中的视图

It's not loading the views in Angular

angularjs

angular-ui

angular-routing

angularjs-directive

angularjs-scope