2016-07-07 1 views
0

그래서 각도 라우팅을 사용하도록 웹 사이트를 설정하고 있지만 실제로 이상한 행동을하고 있습니다. 내가 경로를 방문하면 탭이 충돌 할 때까지 무한정 컨트롤러에서 코드가 실행되고있는 것처럼 보입니다. 여기 내 라우팅입니다 : 여기AngularJs 컨트롤러 코드 무기한 실행

angular.module(app.appName) 
    .config([ 
     '$routeProvider', function($routeProvider) { 
      $routeProvider 
       .when('/', { 
        controller: 'homeController', 
        caseInsensitiveMatch: true 
       }) 
       .when('/MyWishlists', { 
        templateUrl: 'assets/html/areas/MyWishlists/myWishlists.html', 
        controller: 'myWishlistsController', 
        caseInsensitiveMatch: true 
       }) 
       .when('/Login', { 
        templateUrl: 'assets/html/areas/login/login.html', 
        controller: 'loginController', 
        caseInsensitiveMatch: true 
       }) 
       .otherwise({ redirectTo: '/' }); 
     } 
    ]); 

그리고 내 loginController : 크롬을 종료 할 때까지

angular.module(app.appName) 
    .controller('loginController', ['$scope', 
     function ($scope) { 
      console.log('login'); 
     }]); 

내가 http://localhost:50925/Login를 방문

는 그 console.log('login'); 반복 실행됩니다. 내가 여기서 뭘하고있는거야 그것이 전에는 본 적이 없습니까?

내 연결된 파일로 할 수 있습니까? 나는 꿀꺽 꿀꺽 머리통을 사용하여 모든 컨트롤러를 controllers.js에 결합했습니다.

편집 : 나는 또한 새로운 컨트롤러 인 homeController을 만들려고 시도하여 내 경로에 추가했으며 정의 된 두 경로에서 전혀 homeController을 사용하지 않습니다.

angular.module(app.appName) 
    .config([ 
     '$routeProvider', function($routeProvider) { 
      $routeProvider 
       .when('/', { 
        controller: 'homeController', 
        caseInsensitiveMatch: true 
       }) 
       .when('/Home', { 
        controller: 'homeController', 
        caseInsensitiveMatch: true 
       }) 
       .when('/MyWishlists', { 
        templateUrl: 'assets/html/areas/MyWishlists/myWishlists.html', 
        controller: 'myWishlistsController', 
        caseInsensitiveMatch: true 
       }) 
       .when('/Login', { 
        templateUrl: 'assets/html/areas/login/login.html', 
        controller: 'loginController', 
        caseInsensitiveMatch: true 
       }) 
       .otherwise({ redirectTo: '/' }); 
     } 
    ]); 

angular.module('wishlist') 
    .controller('homeController', ['$scope', 
     function ($scope) { 
      console.log('home'); 
     }]); 

답변

0

이 문제가 해결되었습니다. 문제는 ASP.NET을 사용하고 있지만 MVC 파이프 라인을 완전히 우회하는 메서드를 사용하고 있다는 것입니다. 이렇게하기 위해 Index.cshtml을 만들고 파일을 제공하도록 응용 프로그램에 지시해야했습니다. 그러나이 시점에서 web.config 다시 쓰기 규칙에 명시 적으로 나열되지 않은 모든 파일을 HTML로 브라우저에 반환합니다. 내 asset/js 폴더는 통과 할 수 있었지만 내 HTML은 허용하지 않았으므로 HTML 템플릿을 Angular와 함께 제공하는 대신 브라우저에 대한 응답으로 전체 재 컴파일 된 페이지를 검색하고있었습니다. 그러면 다시 브라우저에 전체 HTML 페이지가 제공되었습니다 새로운 경로를 렌더링하고, 브라우저가 결국 그것을 종료 할 때까지이 작업을 계속 반복합니다. 요약하면 문제를 해결하기 위해 web.config의 규칙에 추가해야했습니다.

<rewrite> 
    <rules> 
    <rule name="AngularJS Conditions" stopProcessing="true"> 
     <match url="(wwwroot/.*|assets/min.*|assets/html.*|bower_components/.*|api/.*)" /> 
     <conditions logicalGrouping="MatchAll" trackAllCaptures="false" /> 
     <action type="None" /> 
    </rule> 
    <rule name="AngularJS Wildcard" enabled="true"> 
     <match url="(.*)" /> 
     <conditions logicalGrouping="MatchAll" trackAllCaptures="false" /> 
     <action type="Rewrite" url="index.cshtml" /> 
    </rule> 
    </rules> 
</rewrite> 
+0

의미가 있습니다. 나는 자바 스프링 mvc 응용 프로그램을 개발하는 동안 같은 문제에 직면했다. web.xml이 스프링 URL 매핑을 먼저 읽고 사용하기 때문에 각도 라우팅이 숨겨졌습니다. –

0

각도 모듈을 정의하는 동안 ngRoute를 주입해야합니다. ngRoute과 희망을 정의하는 데 도움이되는 Link이 있습니다. 그러면 도움이 될 것입니다.

+0

안녕하세요. 답장을 보내 주셔서 감사합니다. 내 모듈에'ngRoute'을 주입했다고 확신하지만, 할 수있을 때 검사 할 것입니다. –

+0

내 모듈에'ngRoute'을 삽입했습니다 :'angular.module (app.appName, [ 'ngRoute', 'ngResource' ]); ' –

0

컨트롤러의 기능에 이름이 있으며 일부 오류가있는 것 같습니다. 당신은 그것을 확인할 수 있습니다. 이런 것을 추가해야합니다.

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

Angularjs는 사용하려는 모듈을 삽입해야합니다. 모든 종속성은 사용하기 전에 주입해야합니다.

그 밖의 모든 것이 정상적으로 보입니다.

+0

안녕하세요, 저는'app.appName'을 다음과 같이 설정했습니다. 이전 js 파일의 전역 변수입니다. 이 접근 방식은 다른 많은 프로젝트에서도 작동했지만 필자는 컨트롤러에서 모듈 이름을 명시 적으로 정의 할 것입니다. –