如何使用AngularJS和asp.net MVC加載視圖文件夾中的模板4

Question

顯然，我對angularJS和asp.net MVC4很陌生。這裏是場景：

我有一個簡單的MVC4項目，其中包含1個控制器和1視圖（即：home.cshtml）。現在我已經將HTML文件（即：search.html）添加到位於項目主目錄（視圖文件夾外部）的名爲「模板」的文件夾中。我想要的是加載「search.html」與angularJS，所以我可以將其包含到「home.cshtml」我該怎麼做？這裏是我到目前爲止有：

角模塊：（位於腳​​本文件夾）

var bfapp = angular.module("blogfinder", []).config(function ($routeProvider) { 
    $routeProvider.when('/search', { 
     templateURL: '/Templates/search.html', 
     controller: 'SearchController' 
    }); 

    $routeProvider.otherwise({ redirectTo: '/search' }); 

}); 

bfapp.controller('SearchController', function() { 

}); 

希望這個明確的爲您服務。任何幫助，將不勝感激！謝謝..

Answer 1

我花了一段時間才弄清楚如何讓angularjs與asp.net mvc一起工作 - 這不是100％你做事的方式，但你可能想重新考慮這種方法（它是沒有太大不同）

var AccountApp = angular.module("AccountApp", ['$strap.directives', 'ngResource', 'ngGrid', 'filePickers']). 
config(function ($routeProvider) { 
    $routeProvider. 
     when('/', { controller: ListCtrl, templateUrl: 'Templates/Account/List' }). 
     when('/', { controller: EditCtrl, templateUrl: 'Templates/Account/Edit' }). 
     otherwise({ redirectTo: '/' }); 
}); 

好的，請注意我打電話給模板/帳戶/列表。

在我RouteConfig.cs

 routes.MapRoute(
      name: "Templates", 
      url: "Templates/{controller}/{template}", 
      defaults: new { action = "Template" } 
     ); 

在每個控制器

現在，我有一個指導調用適當的局部視圖此相應的動作：

public ActionResult Template(string template) 
    { 
     switch (template.ToLower()) 
     { 
      case "list": 
       return PartialView("~/Views/Account/Partials/List.cshtml"); 
      case "create": 
       return PartialView("~/Views/Account/Partials/Create.cshtml"); 
      case "edit": 
       return PartialView("~/Views/Account/Partials/Edit.cshtml"); 
      case "detail": 
       return PartialView("~/Views/Account/Partials/Detail.cshtml"); 
      default: 
       throw new Exception("template not known"); 
     } 
    } 

這一切都開始與索引（）在控制器中的行爲。

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

把它放在一起，我的目錄結構看起來像這樣。

/Views 
    /Account 
     /Partials 
      List.cshtml 
      Create.cshtml 
      Edit.cshtml 
      Detail.cshtml 
     Index.cshtml 

我有偏見，因爲這是我的方法，但我認爲它使事情變得非常簡單，組織得很好。 Index.cshtml包含ng-view，並且該應用程序的所有其他部分都很好地包含在通過該模板操作加載的部分視圖中。希望這可以幫助。

Answer 2

我面臨同樣的問題，我得到了解決方案。

聽起來你想讓'Home.cshtml'成爲基礎，並通過AngularJS的路由加載到'search.html'中，對嗎？ （就像MVC-way有點：'_Layout.cshtml'是基礎，讓我們可以加載我們導航的不同視圖。）

爲了達到這個目的，只需將ng-view標籤添加到Home.cshtml！AngularJS路由將爲您工作。

確保加載不把在瀏覽文件夾！（或者你必須通過發射請求到控制器，以獲得他們訪問的觀點。）

---

這裏的景色就是例子。

我們有一個服務器端（ASP.NET MVC）控制器：

的HomeController有三個動作。

public class HomeController : Controller 
{ 
    // GET: Home 
    public ActionResult Index() 
    { 
     return View(); 
    } 

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

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

而在你的角碼（app.js）剛剛成立的NG-以這些行動來獲得的意見的URL。

angular.module('myApp', [ 
    'myApp.controllers', 
    'ngRoute' 
]); 

angular.module('myApp').config(function ($routeProvider, $locationProvider) { 
    $routeProvider.when('/view1', { 
     controller: 'HomeController', 
     templateUrl:'Home/GetPartial1' 
    }).when('/view2', { 
     controller: 'HomeController', 
     templateUrl:'Home/GetPartial2' 
    }).otherwise({redirectTo:'/view1'}); 
    $locationProvider.html5Mode({ 
     enabled: true, 
     requireBase: false 
    }); 
});