Question

我想了解更多有关angularJS的信息，我遇到了路由问题。

我正在Visaul Studio开发一个ASP .NET项目。我在Google Chrome上的localhost中运行该项目。

以下是我的项目目录：

这是我的Index.cshtml

<!DOCTYPE html>
<html>
<head>
    <title>Test AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

    <!--base href="@Url.Content("~/")" /--><!--Found it in a post. Didnt help-->
</head>

<body ng-app="myApp">

    <p><a href="#/">Main</a></p>
    <a href="#Groups">Groups</a>

    <div ng-view></div>

    <script>
        var app = angular.module("myApp", ["ngRoute"]);        
        app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
            //$locationProvider.html5Mode(false);            
            $routeProvider
            .when("#", {
                templateUrl: "Index.cshtml"
            })
            .when("/Groups", {
                templateUrl: '/Views/AngularViews/Groups.cshtml',
                controller: 'GroupsController'
            })
        }]);

    </script>

</body>
</html>

这是我的Groups.cshtml

<section id="Groups_Controller" class="" ng-controller="GroupsController">
<h2>_Groups</h2>
<div>
    This is the Groups page!!!
    {{5+5}}
</div>
</section>

<script>
   function GroupsController($scope, $http, $modal, $timeout, $location) {
   };
</script>

这是我运行应用程序时页面的外观。

单击“组”页面时。我在控制台上收到此错误：

Answer 1

您正尝试将服务器端.cshtml页面视为客户端.html部分，这不会起作用。服务器正在主动拒绝.cshtml页面，因为.cshtml页面专门用于服务器渲染，通常是Razor。

您应该将文件更改为.html，以便由Angular呈现它。

但是，您还有另一个问题，因为您无法在局部内部声明Angular控制器;路由器将在部分加载之前尝试找到控制器，并且控制器不会存在。

此外，您不应同时使用路由中的controller:和部分内的ng-controller，因为其中每个都会尝试创建控制器的实例，导致数据绑定问题。

asp .net使用localhost中的angularJS在不同页面之间导航

1 个答案: