使用ASP.NET开发服务器呈现Angular JS partials视图

我目前正在尝试使用Visual Studio 2010来学习一些Angular JS，并且在渲染partials视图时出现问题。我有一个shell页面index.html和一个包含/partials/list.html里面的一些人员数据的表格。当用户点击位于list.html中的表中的按钮时，它们应该被带到另一个局部视图edit.html。当我运行该项目时，我将它作为浏览器中的url：http://localhost:62807/index.html#/ 和局部视图list.html被注入到需要的地方。下面是这两件事情是这样的：使用ASP.NET开发服务器呈现Angular JS partials视图

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>

这里的注入NG-view标记从index.html的

<table class="table table-striped" style="width: 250px"> 
    <thead> 
    <tr> 
     <td>Name</td> 
     <td>Description</td> 
     <td> <a href="/new"><i class="glyphicon glyphicon-plus-sign"></i></a> 

     </td> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="person in crew"> 
     <td>{{person.name}}</td> 
     <td>{{person.description}}</td> 
     <td><i class="glyphicon glyphicon-edit"></i></td> 
    </tr> 
    </tbody> 
</table>

这里是什么样子时，它呈现像局部视图： enter image description here

当用户点击加号时，他们需要进入另一个局部视图edit.html，它与list.html位于同一个partials文件夹中。这是HTML看起来像

edit.html

<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>

当我在URL在浏览器中http://localhost:62807/index.html#/一切加载了罚款和list.html局部视图被注入其中，它需要。当我将鼠标悬停在加号按钮上时，我会得到一个URL预览localhost:62807/new。点击时应该注入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包括项目名称或页面名称（在这种情况下，index.html包含在URL中）。我很好奇为什么list.html视图首先被正确注入，并且每当我尝试导航到/new时，edit.html分部视图都没有被正确注入。我在本地玩弄这个，所以我想首先让它工作，然后了解交易是什么，以及为什么list.html部分视图将呈现，而edit.html不会。

来源

2014-01-06 wootscootinboogie

在你的' “/新”'路线templateUrl领先'/'故意** “/谐音/ edit.html” **？ –

@YanikCeulemans是的，从我跟着的例子来看，但我的工作不能这么做...可能不是？ :)。因此'localhost：5555'应该将index.html与list.html一起呈现在里面，然后从根目录导航到/ new应该在list.html所在的位置插入edit.html。 – wootscootinboogie

那么，如果partials目录不在网站的根目录 –

，我相信您应该将网址

<a href="#/new"><i class="glyphicon glyphicon-plus-sign"></i></a>

来源

2014-01-06 16:02:02 Chandermani

就是这样。非常感谢，这是一个痛苦。这与html5Mode有关，对吧？你能解释为什么这个工作吗？ – wootscootinboogie

html5模式未使用。如果你启用它然后在mew浏览器上，你可以使用'/ new'。旧版浏览器支持此功能。 – Chandermani

使用ASP.NET开发服务器呈现Angular JS partials视图

回答

相关问题