Question

enter image description here 我有一个空的MVC项目，但我有一个名为MyViews的文件夹，并包含html（view1.html和view2.html），而脚本html位于主项目文件夹下（Location is在global.asax文件下面。）

＆＃13;

<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>

＆＃13;

为什么没有加载视图？：（

Answer 1

您正在尝试使用角度路由模块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) {

正如我之前提到过的那样，你不能遵循两年前的视频指南，并希望它能与当前版本的角度一起正常工作。已经有许多重大更改，包括这种情况，其中将角度路径模块移动到它自己的文件。

Answer 2

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

另外，请尝试避免以/开头的路径，该路径指示应用程序root的路径。

templateUrl路径必须与被调用的JavaScript文件相关。

app/
    main.js
    MyViews/
        View2.html

它没有加载Angular中的视图

2 个答案: