Javascript AngularJS路由和ASP.net MVC_Javascript_Angularjs_Asp.net Mvc_Angularjs 1.6

Javascript AngularJS路由和ASP.net MVC

javascript angularjs asp.net-mvc

Javascript AngularJS路由和ASP.net MVC,javascript,angularjs,asp.net-mvc,angularjs-1.6,Javascript,Angularjs,Asp.net Mvc,Angularjs 1.6,我正在学习angular，我第一次尝试使用routes，但有点问题，这不起作用：这是我的主视图（使用DirectiveswithDataBinding.cshtml）：这是我的Javascript文件（AngularFile.js）：为什么不工作？Angular 1.6使用新的hashPrefix，在您的HREF中尝试将#/view1更改为#/视图1 我认为您混淆了服务器端（ASP.net）路由和客户端（Angular.js）路由。不确定是否尝试从ASP.net渲染视图并将其提供给angu

我正在学习angular，我第一次尝试使用routes，但有点问题，这不起作用：

这是我的主视图（使用DirectiveswithDataBinding.cshtml）：

这是我的Javascript文件（AngularFile.js）：

为什么不工作？

Angular 1.6使用新的hashPrefix，在您的HREF中尝试将#/view1更改为#/视图1

我认为您混淆了服务器端（ASP.net）路由和客户端（Angular.js）路由。不确定是否尝试从ASP.net渲染视图并将其提供给angular router。如果是，那么不幸的是，这将不起作用。Angular router不会为获取视图而进行服务器调用。视图必须在客户端作为模板（HTML静态文件）随时可用，angular将在模板上呈现数据（从API获取后）

因此，基本上这一行

templateUrl:“/Home/View1”

将变成

templateUrl:“/Home/View1.html”

，其中View1.html是一个静态文件（角度模板）

有关更多详细信息，请查看此>

的可能副本

@{
    Layout = null;
}

<html>
<head>    
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
    <script type="text/javascript" src="~/Scripts/angular-route.js"></script>
    <script type="text/javascript" src="~/Scripts/AngularFile.js"></script>
    <title>
        Using AngularJS Directives and Data Binding
    </title>
</head>
<body>

    <div data-ng-app="myApp" data-ng-controller="SimpleController">       
        <a href="#/view1"> View 1</a>
        <a href="#/view2"> View 2</a>
        <div data-ng-view=""></div>
    </div>

</body>
</html>

public ActionResult UsingDirectivesWithDataBinding()
        {
            return View();
        }

        public PartialViewResult View1()
        {
            return PartialView();
        }

        public PartialViewResult View2()
        {
            return PartialView();
        }

var app = angular.module("myApp", ["ngRoute"]);
app.controller("SimpleController", function ($scope) {
    $scope.firstName = "John";
    $scope.lastname = "Doe";
    $scope.customers = [
        { name: "Dave Jones", city: "Phoenix" },
        { name: "Jamie Riley", city: "Atlanta" },
        { name: "Heedy Rowt", city: "Memphis" },
        { name: "Thomas Winter", city: "Seattle" }
    ];
});

app.config(function ($routeProvider) {
    $routeProvider.when("/view1", {
        templateUrl: "/Home/View1",
        controller: "SimpleController"
    })
    .when("/view2", {
        templateUrl: "/Home/View2",
        controller: "SimpleController"
    })
    .otherwise({redirectTo : "/view1"})
})