AngularJS 路由在 Visual Studio 上不工作

Question

这是我的 app.js 文件

var assetApp = angular.module('assetModule',['ngRoute']);

assetApp.config(
 function ($routeProvider) {
     $routeProvider
         .when('/', {
                 templateUrl: 'HTMLTemplates/BooksList.html',
                 controller: 'assetController'
         })
         .when('/Create', {
             templateUrl: 'HTMLTemplates/Create.html',
             controller: 'createAssetController'
         })
         .otherwise({
            redirectTo: '/'
         });
 });
  assetApp.controller("assetController", ['$scope', '$http', '$window', '$routeParams', function ($scope, $http, $window, $routeParams) {    
  var getListOfAllAssetsUrl = "/api/Asset";
  $scope.GetAllBooks = function () {
        $http.get(getListOfAllAssetsUrl).then(function (response) {
            $scope.books = response.data;
        });
    }
}
]);

Index.HTML

 <!DOCTYPE html>

 <html ng-app="assetModule">
   <head>
      <script src="/Scripts/angular.min.js"></script>
      <script src="/Scripts/angular-route.min.js"></script>
      <script src="/Scripts/myApp.js"></script> 
      <link href="/Content/bootstrap.css" rel="stylesheet" type="text/css" />
      <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
      <title>Routing</title>
      <meta charset="utf-8"/>
   </head>
   <body>
      <div ng-view>

      </div>
   </body>
 </html>

BooksList.html

 <div class="container">
     <p>This is BookList </p>
 </div>

Create.html

 <div class="container">
   <p>This is Create Page </p>
 </div>

BooksList 和 Create.html 页面都放在 /HTMLTemplates 文件夹下，而 app.js 放在 /Scripts 下。

当我运行应用程序并输入此 url http://localhost:51227/ 我希望 BooksList.html 内容可见。不幸的是，浏览器似乎在做一些事情，但过了一会儿就崩溃了。好像我已经让应用程序进入某个无限循环并最终崩溃。

当我输入这个时 url http://localhost:51227/Create 我期待 Create.html。内容可见。不幸的是，在这种情况下它不起作用。我明白但是我明白 “/”应用程序中的服务器错误。

找不到资源。

任何人都可以建议我如何修复路线吗？

Answer 1

我不认为这是您的代码的问题，但更多 Angular 特定路由和 angular 路由器的工作方式。

你试过去 http://localhost:51227/index.html 吗？

由于这是您的脚本引用所在的页面，并且 angular 应用程序已启动，因此浏览器仍需要加载和解释它才能看到您的代码。而不是从那里实际路由所有内容。

http://localhost:51227/index.html#/Create 会将 Create.html 加载到 index.html

上的 ng-vew 指令中

Answer 2

我所要做的就是使用这个 url

http://localhost:51227/Index.html#/

这会将我重定向到 BookList。

这是因为 index.html 是模板所在的位置，所以我不得不使用此 url 作为模板工作的起点。

AngularJS 路由在 Visual Studio 上不工作

AngularJS Routing not working on Visual Studio

javascript

angularjs

ngroute