ASP.NET MVC에서 각도 라우팅을 정의하는 방법

Asp.Net MVC 앱에서 Angular 라우팅을 사용하는 것에 대해 다소 혼란스러워합니다.ASP.NET MVC에서 각도 라우팅을 정의하는 방법

Index.cshtml :

<head> 
    ... 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 
    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap") 
</head> 
<body> 
    <div class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-collapse collapse glyphicons pull-right"> 
       <ul class="nav navbar-nav"> 
        <li ng-class="{active:isActive == '/test1'}"> 
         <a href="#/test1">Test1</a> 
        </li> 
        <li ng-class="{active:isActive == '/test2'}"> 
         <a href="#/test2">Test2</a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <div class="container body-content"> 
     <div ng-view></div> 
    </div> 

    @Scripts.Render("~/bundles/angular") 
    @Scripts.Render("~/bundles/app") 
</body>

HomeController (ASP.NET) :

namespace Tests.Controllers 
{ 
    public class HomeController : Controller 
    { 
     public ActionResult Index() 
     { 
      return PartialView(); 
     } 

     public ActionResult Test1() 
     { 
      return PartialView(); 
     } 

     public ActionResult Test2() 
     { 
      return PartialView(); 
     } 
    } 
}

내가 내 응용 프로그램의 현재 코드를 표시합니다 내 질문을 이해하려면 내다음과 같이

angular 
    .module('Tests', [ 
     'ngRoute' 
    ]) 
    .config(config) 
    .run(['$rootScope', '$route', '$location', function($rootScope, $route, $location) { 
     $rootScope.$on('$routeChangeSuccess', function(event, currRoute, prevRoute) { 
     $rootScope.title = $route.current.title; 
     }); 

     var path = function() { 
     return $location.path(); 
     }; 

     $rootScope.$watch(path, function(newPath, oldPath) { 
     $rootScope.isActive = newPath; 
     }); 
    }]); 

config.$inject = ['$routeProvider']; 

function config($routeProvider) { 
    $routeProvider 
     .when('/test1', { 
     templateUrl: '/Home/Test1', 
     isActive: 'test1' 
     }) 
     .when('/test2', { 
     templateUrl: '/Home/Test2', 
     isActive: 'test2' 
     }) 
     .otherwise({ 
     redirectTo: '/' 
     }); 
}

출력 URL이 표시됩니다 : localhost/Home/Index#/test1

질문 :

내가 왜 HomeController와의 작업을 정의해야합니까? PartialView()를 사용하기 때문에 ActionResult Index가 필요하다고 생각했습니다. 다음 URL을 어떻게 얻을 수 있습니까? localhost/test1 Menu Test1을 클릭하면 어떻게됩니까?

출처

2016-09-12 yuro

내 대답을 참조하십시오. 이해가되는지 알려주세요. 당신이 맞지 않는다면, 나는 아마도 내가 공유 할 수있는 작은 개인 git repo가 있지만 먼저 익명화해야 할 것입니다. –

이것을 읽어보십시오. http://stackoverflow.com/questions/20801780/angular-ng-include-cshtml-page 각도 라우팅 + MVC 라우팅에 대한 – Pravin

참조 예. https://angularjsaz.blogspot.in/2015/10/angularjs-routing-aspnet-mvc-example.html – Pravin

@Andiih가 그의 대답에 언급 한 것 이외에. Angular 라우팅 라이브러리는 Angular 경로를 처리하기위한 것입니다. ~~(더 나은 용어가 부족한 경우) 사이.~~ 프런트 엔드 컨트롤러.

2가 작동하기를 기대하는 방식으로 Angular과 ASP.NET MVC을 라우팅 한 것처럼 보입니다. 귀하의 기본 경로는 그 시점부터 localhost/Home/Index#입니다 Angular은 기본 (URL)에 자체 (하위) 경로를 추가하여 결과가 URL입니다.

필요에 따라 MVC과 Angular 경로와 컨트롤러간에 점프가 가능할 수도 있지만, 달성하려는 목표보다 훨씬 복잡한 시나리오가 될 수 있습니다. 또한 나는 그 정도까지 과거에 갈 필요가 없었습니다.요약

는 현재 무슨 일이 일어날 지 :

당신이 멀리 Index.cshtml "루트"페이지 당신이 효과 .. 현재 Angular 응용 프로그램에서 멀리 이동하거나 A를 를 탐색 줄에서 이동 한 경우 다른 응용 프로그램 ... 솔루션 구조에 따라 별도의 페이지마다 서로 다른 JavaScript MV * 프레임 워크를 사용할 수도 있습니다 ...하지만 이는 단지 광기입니다.

...하지만 나는 그것이 단순 술 당신은 단지 하나의 ASP.Net MVC Route/페이지를 가정에 막대기를 할 수 있습니다위한 있도록,이 단계에서 원하는 것을 의심하고, 그냥 순수하게 Angular 사이를 이동하려면 노선과 Angular 루트 또는 백 엔드 .NET 서비스에서 어떻게 든 데이터 페이지에 데이터를 제공합니다.

따라서 당신이 잠재적 역할 각 프레임 워크가 현재 가지고있는 스택에서 재생하기위한 것입니다 무엇을 사이에 링크를 누락 될 수 있음을 보인다. 예를 들어

(I 명확히하려고합니다) :

을 아래 같이 보일 수있는 (매우 일반적인) 전체 솔루션의 구조를 보면.

- css - bootstrap.css // all 3rd party css here - libs - angular.js // all 3rd party js libs here - angular-ui-router.js - controllers - RootController.cs // This is your HomeController. // It's effectively used to "deliver" the root view which is // your core/base page for lack of a better term - views - RootView.cshtml // see code RootView.cshtml below, // this defines your app "layout" // as well as where you deliver your bundles, // make use of server side auth, etc.. - webapi - test1Api.cs // access to test1 data or serverside process - test2Api.cs // etc.. - app - pages - home - test1 - test1Ctrl.js - test1View.html - test1.css - test2 - test2Ctrl.js - test2View.html - test2.css - services - someRandomSvc.js - resourceSvc.js // this is where you consume your // .NET back end API. E.G: test1Api & test2Api, etc.. - app.js - app.routes.js - etc...

RootView.cshtml 따라서, 따라서 당신은 .. 여하튼,이 모든 페이지가 Angular 응용 프로그램에 대한 쉘, 전체 "프런트 엔드 응용 프로그램"역할을 등 .NET bundling, Asp.NET Auth을 사용할 수 있도록 서버 측 구성됩니다 해당 페이지의 컨텍스트 내에서 실행됩니다.

RootView.cshtml

<head> @Styles.Render("~/content/3rdPartyCSS") @Styles.Render("~/content/appSpecificCSS") </head> <body> <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-collapse collapse glyphicons pull-right"> <ul class="nav navbar-nav"> <li><a ui-sref="home">Home</a></li> <li><a ui-sref="test1">Test1</a></li> <li><a ui-sref="test2">Test2</a></li> </ul> </div> </div> </div> <div class="container body-content"> <div ng-view></div> </div> @Scripts.Render("~/bundles/3rdPartyJS") @Scripts.Render("~/bundles/appSpecificJS") </body>
당신은 내가 앞서 언급 한 바와 같이, 하나의 ASP.Net MVC Route하기 만합니다
, 당신은 (AT-이상이 앱) 그것에서 멀리 이동하지 않습니다

RootController.cs

namespace Tests.Controllers { public class RootController : Controller { public ActionResult RootView() { // as I've mentioned previously in another post, // we're returning a partial to avoid the usage of _layout.cshtml // as our RootView is acting as the layout in for the angular app. // (it would introduce another level of not needed nesting) return PartialView(); } } }

...하지만 여러 필요합니다 Angular 경로.

는

var app = angular.module('Tests'); app.config(['$stateprovider', function($stateprovider) { $stateprovider .state('home', { url: '', templateUrl: 'app/pages/home/homeView.html' }]) .state('test1', { url: '/test1', templateUrl: 'app/pages/test1/test1View.html'}) .state('test2', { url: '/test2', templateUrl: 'app/pages/test2/test2View.html'}); }]);

당신은 다음 다른 서버 측 로직 또는 당신이 다음에 이용되는, ngResource 같은 것을 통해 섭취해야 WebAPI 엔드 포인트를 통해 통화를 노출 될 수 app.routes.js 컨트롤러 Angular.

testXView.html

<div ng-controller="testXCtrl as test">{{ test.something }}</div>

testXCtrl.JS

var app = angular.module('Test'); app.controller('testXCtrl',['resourceSvc', function(resourceSvc) { resourceSvc.getSomeData().then(function(data) { this.something = data; //.. or whatever floats your boat :P }) }]);

참고. 각 .something(['service', function(service) { }]);이 규칙을 사용는

코드 min safe를 확인하는 것입니다. (너무 무서워하지 마라.)

내 예에서 angular-ui-router이라는 라우팅 라이브러리를 사용했는데,이 단계에서 자유롭게 선택할 수 있다면 이걸 보길 바란다. 동일한 원칙이 ngRoute 솔루션에도 적용됩니다.

출처

2016-09-13 16:09:46

네 문제에 대한 간단한 해결책을 원한다면 나는이 해결책에 완전히 동의한다. –

@DatzMe 감사합니다. 제안이나 개선 사항이 있으면 알려주십시오. :) 나는 당신의 하원 의원이 아니라고 추측하고 있습니다. 그러나 저는 왜 그것을 받았는지 궁금합니다 :/itmayormaynothavehurtmyegoalittle –

왜 당신이 설명없이 투표하지 않았는지 나는 정말로 알지 못합니다. 그러나 나는 당신이 그것을 해결하기위한 요지를 알고 있다고 생각합니다. MVC에서 각도를 사용하는 방식은 사용자가 수행 한 방식과 동일합니다. 어쩌면 당신을 투표 한 사람이 더 나은 해결책을 얻었을 것입니다. –

MVC가 부분 URL로 템플릿 URL을 해결하려고하는 것처럼 보입니다. 그렇다면 MVC 경로와 각도 경로에 동일한 경로를 사용할 수 없습니다.

는 (즉, 동적 템플릿을 생성 한) 당신이 할 경우, 템플릿 컨트롤러를 만들고, 부분적인 행동과 같은 템플릿의 각을 구축 템플릿 경로를 해결하기 위해 MVC가 필요하십니까 단계

)에이를 분해하려면 템플릿 컨트롤러에서. 동적 템플릿이 필요하지 않은 경우 MVC pipline을 피하는/Content/Templates와 같은 폴더에 템플릿을 정적 HTML로 저장하면됩니다.

2) 1)이 맞다면 작동 예제가 있어야하지만 # 경로가 있어야합니다. HTML5 경로를 작동 시키려면 MVC 파이프 라인에서 해당 경로를 제외해야합니다. routes.IgnoreRoute ("/ Index/*"); RouteConfig.cs에서 작동하지 않을 수도 있습니다 - 나는 그것을 시도하지 않았습니다.

출처

2016-09-12 15:40:18 Andiih

감사합니다. 대답 ... HTML5의 Angular 라우팅을 사용하고 싶습니다. 그러나 어떻게 든 라우팅은 예상대로 작동하지 않습니다. – yuro

잘했다. 나는 OP가 각각의 라우팅 프레임 워크의 '각도 라우팅 (angular routing)'/'그물 라우팅 (net routing) '의 목적에 약간의 명확성을 필요로한다는 인상을 받는다. (또한 누군가 내가 응답하는 중반에 내 투표가 아님) –

ASP.NET MVC에서 각도 라우팅을 정의하는 방법

답변

관련 문제