AngularJS Routing无法在Visual Studio上运行

Here is my app.js File

这是我的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>

Both BooksList and Create.html page are placed under /HTMLTemplates folder whereas the app.js is placed under /Scripts.

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

When i run the app and enter this url http://localhost:51227/ i am expecting BooksList.html contents to be visible. Unfortunately the browser seems its doing something but it crashes after a while. It seems like i have caused the app to go into some infinite loop and crash out finally.

当我运行应用程序并输入此URL http:// localhost:51227 /我期望BooksList.html内容可见。不幸的是,浏览器似乎正在做一些事情,但它在一段时间后崩溃了。似乎我已经导致应用程序进入一些无限循环并最终崩溃。

When i enter this url http://localhost:51227/Create i am expecting Create.html. contents to be visible. Unfortunately in this case it is not working. I get However i get Server Error in '/' Application.

当我输入这个网址http:// localhost:51227 /创建我期待Create.html。内容可见。不幸的是,在这种情况下它不起作用。我得到但是我在'/'应用程序中得到服务器错误。

The resource cannot be found.

无法找到该资源。

Could anyone please suggest how i can fix the route?

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

2 个解决方案

#1

I don't believe this is a problem with your code but moreso Angular routing specifically and the way the angular router works.

我不相信这是你的代码的问题,但更重要的是角度路由以及角度路由器的工作方式。

Have you tried going to http://localhost:51227/index.html?

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

Since that is the page where your script references are and the angular app is bootstrapped the browser still needs to load and interpret that to see your code. Than from there is where everything would actually be routed.

由于这是您的脚本引用的页面,并且角度应用程序是自举的,因此浏览器仍然需要加载并解释它以查看您的代码。而不是从那里实际上将路由一切。

http://localhost:51227/index.html#/Create would load Create.html into your ng-vew directive on your index.html

http:// localhost:51227 / index.html#/ Create会将create.html加载到index.html上的ng-vew指令中

#2

All i had to do was use this url

我所要做的就是使用这个网址

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

and this would redirect me to the BookList.

这会将我重定向到BookList。

This is because the index.html is where the templates would go in so i had to use this url as a starting point for the templates to work on.

这是因为index.html是模板进入的地方,所以我不得不使用这个url作为模板的起点。

#1