Jak załadować szablony z foldera widoków z AngularJS i asp.net MVC 4

Question

Wygląda na to, że jestem nowy dla angularJS i asp.net MVC4. oto scenariusz:

Mam prosty projekt MVC4, który zawiera 1 kontroler i 1 widok (np. home.cshtml). Teraz dodałem plik HTML (np .: search.html) do folderu o nazwie "Szablony", który znajduje się w głównym katalogu projektu (poza folderem widoków). Chciałbym załadować "search.html" przy pomocy angularJS, aby móc go dołączyć do "home.cshtml", jak mogę to zrobić? tutaj jest to, co mam do tej pory:

kątowy Moduł: (znajduje się w folderze Scripts)

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() { 

}); 

nadzieja to jasne dla ciebie. każda pomoc będzie doceniona! Dzięki ..

Answer 1

Zajęło mi trochę czasu, aby dowiedzieć się, jak uzyskać angularjs pracy z asp.net mvc - to nie jest w 100% sposób, w jaki robisz rzeczy, ale może chcesz ponownie rozważyć to podejście (to i tak niewiele różni się)

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: '/' }); 
}); 

OK, zawiadomienie Dzwonię do szablonów/konta/listy.

W moich RouteConfig.cs

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

Teraz w każdym kontrolerze, mam ten odpowiada akcja, która kieruje połączenie do odpowiedniego widoku częściowego:

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"); 
     } 
    } 

To wszystko zaczyna się z Indeksu() działanie w kontrolerze.

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

Składając to wszystko razem, moja struktura katalogów wygląda tak.

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

Jestem stronniczy, ponieważ to jest moje podejście, ale myślę, że to sprawia, że ​​rzeczy są bardzo proste i ładnie zorganizowane. Indeks.cshtml zawiera widok ng, a wszystkie inne części aplikacji są ładnie zawarte w widokach częściowych, które są ładowane za pomocą tej akcji Szablon. Mam nadzieję że to pomoże.

Answer 2

Mam do czynienia z tym samym problemem, i mam rozwiązanie.

Wygląda na to, że chcesz, aby "Home.cshtml" było podstawą i obciążeniem w "search.html" przez routing AngularJS, prawda? (Podobnie jak w przypadku MVC: "_Layout.cshtml" jest podstawą, pozwól nam wczytać się w różnych widokach, którymi się poruszamy.)

Aby to osiągnąć, po prostu dodaj tag ng-view do Home.cshtml! Routing AngularJS będzie dla Ciebie odpowiedni.

upewnij się, że poglądy załadowane nie umieszczać w folderze widokami! (Albo trzeba przejść przez wypalanie widoki żądań do kontrolerów do ich otrzymania.)

---

Oto przykład.

Mamy stronie serwera (ASP.NET MVC) Kontroler:

HomeController z trzech działań.

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

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

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

I w kodzie kątowej (app.js) wystarczy ustawić adres URL NG-tych działań w celu uzyskania opinii.

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 
    }); 
});