Javascript 使用ASP.NET开发服务器呈现角度JS局部视图_Javascript_Asp.net Mvc_Angularjs

Javascript 使用ASP.NET开发服务器呈现角度JS局部视图

javascript asp.net-mvc angularjs

Javascript 使用ASP.NET开发服务器呈现角度JS局部视图,javascript,asp.net-mvc,angularjs,Javascript,Asp.net Mvc,Angularjs,我目前正在尝试使用VisualStudio2010学习一些Angular JS，但在渲染局部视图时遇到了问题。我有一个shell页面index.html和一个表，其中包含一些个人数据/partials/list.html。当用户单击list.html中表格中的按钮时，应将其带到另一个局部视图edit.html。当我运行项目时，我会在浏览器中将其作为url：http://localhost:62807/index.html#/ 部分视图list.html被注入到需要的地方。下面是这两件事的样子：

我目前正在尝试使用VisualStudio2010学习一些Angular JS，但在渲染局部视图时遇到了问题。我有一个shell页面

index.html

和一个表，其中包含一些个人数据

/partials/list.html

。当用户单击

list.html

中表格中的按钮时，应将其带到另一个局部视图

edit.html

。当我运行项目时，我会在浏览器中将其作为url：

http://localhost:62807/index.html#/

部分视图

list.html

被注入到需要的地方。下面是这两件事的样子：

index.html

    <!DOCTYPE html>
    <html>
    <head>
        <title>Angular JS Routing</title>
        <link rel="stylesheet"
              href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"/>
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css"
              rel="stylesheet">
    </head>
    <body>
    <div ng-app="enterprise" ng-controller="AppController">
        <a href="#"><h2>Enterprise Crew</h2></a>
        <ng-view></ng-view>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.min.js"></script>
    <script src="js/app.js"></script>
    </body>
    </html>

当我在浏览器的URL上时

http://localhost:62807/index.html#/

一切正常加载，list.html局部视图被注入到需要的地方。当我将鼠标悬停在加号按钮上时，会看到

localhost:62807/new

的URL预览。单击时，应该会插入edit.html部分视图，但我得到的是404错误

这是JS

angular.module('enterprise',['ngRoute'])
    .config(function($routeProvider){
        $routeProvider
            .when("/",{templateUrl:"partials/list.html"})
            .when("/new",{templateUrl:"/partials/edit.html"})
    })
//this is the that iterated over in the partial views ng-repeat
function AppController($scope){
    $scope.crew =[
        {name:'Picard',description:'captain'},
        {name: 'Riker',description:'number 1'},
        {name:'Word',description:'Security'}
    ]
}

我相信问题出在路线的某个地方。在随后的视频教程中，我注意到在运行应用程序时获得的URL中包含项目名称或页面名称（在本例中，URL中包含index.html）。我很好奇为什么

list.html

视图一开始就被正确注入，而每当我尝试导航到

/new

时，edit.html部分视图都没有被正确注入。我正在本地处理这个问题，所以我想首先让它工作起来，然后了解交易是什么，以及为什么list.html部分视图将呈现而edit.html不呈现。

我认为url应该是

是您的

“/new”

路由模板URL”/partials/edit.html“@YanikCeulemans是的，从我下面的示例来看，但我的不起作用……也许不是：）。因此，

localhost:5555

应该呈现index.html，其中包含list.html，然后从根目录导航到/new，应该在list.html所在的位置插入edit.html。如果partials目录不在Web站点的根目录中，则前导斜杠会导致找不到partial，谢谢。在这种情况下，很高兴知道，就是这样。非常感谢，这是一种痛苦。这与HTML5模式有关，对吗？你能解释一下为什么会这样吗？html5模式没有被使用。如果启用它，则在新浏览器上可以使用

/new

。旧浏览器支持这一点。

<form action="">
    <input ng-model="person.name"/>
    <input ng-model="person.description"/>
    <button ng-click="save()" class="btn-primary">Save</button>
    save function not yet implemented
</form>

angular.module('enterprise',['ngRoute'])
    .config(function($routeProvider){
        $routeProvider
            .when("/",{templateUrl:"partials/list.html"})
            .when("/new",{templateUrl:"/partials/edit.html"})
    })
//this is the that iterated over in the partial views ng-repeat
function AppController($scope){
    $scope.crew =[
        {name:'Picard',description:'captain'},
        {name: 'Riker',description:'number 1'},
        {name:'Word',description:'Security'}
    ]
}