使用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視圖

回答

相關問題