AngularJs $ routeProvider가 MVC와 함께 작동하지 않습니다.

Question

MVC.Net에서 $routeProvider을 사용할 때 작동하지 않습니다.

MVC.Net의 백엔드 쓰기 예제를 사용하고 있습니다. 다음은 내가

 
config(function($routeProvider) { 
    $routeProvider. 
     when('/', { controller: ListCtrl, templateUrl: 'home/listitem' }). 
     when('/home', { controller: ListCtrl, templateUrl: 'home/listitem' }). 
     when('/edit/:projectId', { controller: EditCtrl, templateUrl: '/home/detail' }). 
     when('/new', { controller: CreateCtrl, templateUrl: '/home/detail' }). 
     otherwise({redirectTo:'/'}); 
    }); 

를 사용하고 있지만, 불행하게도 을 listitem 또는 자세한를 호출하지 않는 경로입니다.

Answer 1

괜찮습니다. 설정하여 RouteConfig.cs 다음과 같이 다음과 같이 라우팅 그런 다음 각 설정을

 // Will handle partial page view requests 
     routes.MapRoute(
      name: "Partials", 
      url: "partials/{controller}", 
      defaults: new { controller="Home", action = "Index" } 
     ); 

     // Will handle all other requests by sending it to the main controller 
     routes.MapRoute(
      name: "Application", 
      url: "{*url}", 
      defaults: new { controller = "Main", action = "Index" } 
     ); 

을 :

.config(['$routeProvider', '$locationProvider', 
     function($routeProvider, $locationProvider) { 
      $routeProvider 
       .when('/', { 
        templateUrl: '/partials/home', 
        controller: 'HomeController' 
       }) 
       .when('/home', { 
        templateUrl: '/partials/home', 
        controller: 'HomeController' 
       }) 
       .when('/gallery', { 
        templateUrl: '/partials/gallery', 
        controller: 'GalleryController' 
       }); 
       .when('/services', { 
        templateUrl: '/Services', 
        controller: 'ServicesController' 
       }); 

      // NOTE: This part is very important 
      $locationProvider.html5Mode(true); 
     } 
    ]); 

을 그리고 당신의 MVC 컨트롤러 :

public class MainController : Controller 
{ 
    public ActionResult Index() 
    { 
     return View(); 
    } 
} 

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     return PartialView("_Home"); 
    } 
} 

public class GalleryController : Controller 
{ 
    public ActionResult Index() 
    { 
     return PartialView("_Gallery"); 
    } 
} 

공유에 부분적인 전망을 넣어 폴더.

이제 장면 뒤에서 면도날과 그 모든 것을 포함하여 일반적으로 MVC 컨트롤러와보기에서 할 수있는 모든 것을 할 수 있습니다.

Answer 2

@jpmorin이 제안했듯이 AngularJS가 수행 할 수없는 방식으로보기를 동적으로 생성해야하는 경우가 아니면 MVC 뷰가 불필요합니다. 서비스를 제공하기 위해서는 정적 파일이 필요하고 데이터 바인딩이 필요합니다. 그 해결책으로 BreezeJS을보십시오.

이 방법으로 만족스럽지 않으면 MVC 코드를 제시해야보다 나은 답변을 얻을 수 있습니다. 개인적으로 전 해결책을 제안합니다.

Answer 3

구성 파일에서이 솔루션을 시도하기 전에이 문제도 있습니다.

설정 파일

myapp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { 

// Specify the three simple routes ('/', '/About', and '/Contact') 
$routeProvider.when('/', { 
    templateUrl: '/Home/Home', 
    controller: 'homeCtrl', 
}); 
$routeProvider.when('/Login', { 
    templateUrl: '/account/Index', 
    controller: 'loginCtrl', 
}); 
$routeProvider.when('/About', { 
    templateUrl: '/Home/About', 
    controller: 'aboutCtrl', 
}); 
$routeProvider.when('/Contact', { 
    templateUrl: '/Home/Contact', 
    controller: 'contactCtrl' 
}); 
$routeProvider.when('/First', { 
    templateUrl: '/account/First', 
    controller: 'firstCtrl' 
}); 
$routeProvider.when('/Fullpage', { 
    templateUrl: '/Home/Fullpage', 
    controller: 'fullpageCtrl' 
}); 
$routeProvider.otherwise({ 
    redirectTo: '/' 
}); 

// Specify HTML5 mode (using the History APIs) or HashBang syntax. 
//$locationProvider.html5Mode({ enabled: true, requireBase: false }); 
$locationProvider.html5Mode(false);}]); 

index.cshtml 파일

<a class="brand" href="#/">Simple Routing</a> 
    <div class="nav-collapse collapse"> 
     <ul class="nav"> 
      <li class="active"><a href="#/">Home</a></li> 
      <li><a href="/#/About">About</a></li> 
      <li><a href="/#/Contact">Contact</a></li> 
      <li><a href="/#/Login">Login</a></li> 
      <li><a href="/#/First">first</a></li> 
      <li><a href="/#/Fullpage">fullpage</a></li> 
     </ul> 
    </div><!--/.nav-collapse -->