AngularJS 경로 vs. jQuery 표시/숨기기

방금 AngularJS (jQuery에서 제공)를 시작 했으므로 대다수의 jQuery를 대체하는 것이 좋습니다.AngularJS 경로 vs. jQuery 표시/숨기기

내가 시작하는 가장 쉬운 장소는 내가 가지고있는 모든 간단한 표시/숨기기 탭 콘텐츠였습니다. 현재로드중인 페이지 내에 적용 가능한 모든 html이 있습니다. 그러나 Angular 경로를 사용하여 이러한 탭 섹션 전체를로드하는 것이 나을 것 같습니다. 그 가정에서 나는 맞습니까? 또는 일부 하이브리드 방식을 사용해야합니까 (이 섹션의 내용은 동적입니다)?

어쨌든 Angular 솔루션을 사용하는 경우 스크립트를 라우트로 사용할 수없는 것으로 보입니다. 나는 이것에 아주 새로운 영토 안에이고 나가 어디에서 잘못되게 가고 있는지에 관해서는 단서가 없다. 어떤 도움을

내 현재 HTML (간체)

을 GREA된다

<!DOCTYPE html> 

<html data-ng-app='mainApp'> 

<head> 

    <script src='js/jquery.min.js'></script> 
    <script src='js/angular.min.js'></script> 

</head> 

<body> 


<div class='toggleButtons'> 

<a href='#/info'> 
<div></div> 
</a> 

<a href='#/comment'> 
<div></div> 
</a> 

<a href='#/feedback'> 
<div></div> 
</a> 

</div> 


<div class='container'> 

<div data-ng-view=''></div> 

</div> 

<script src='app/main.app.js'></script> 

</body> 

</html>

각도 :

/// <reference path="../js/angular.min.js" /> 

var mainApp = angular.module('mainApp', []); 

mainApp.config(function ($routeProvider) { 

    $routeProvider 

     .when('/info', 
      { 
       controller: 'mainInfoController', 
       templateUrl: '/app/partials/info.html' 
      }) 

     .when('/comment', 
      { 
       controller: 'mainCommentController', 
       templateUrl: '/app/partials/comment.html' 
      }) 

     .when('/feedback', 
      { 
       controller: 'mainFeedbackController', 
       templateUrl: '/app/partials/feedback.html' 
      }) 

     .otherwise({ redirectTo: '/app/partials/info.html' }); 


});

그냥 참고 : 위의 컨트롤러는 정말 그냥 자리 표시 자입니다. 나는 아직 그들을 창조하지 않았다. 그러나, 나는 그들이 지금 일하는지 또는 지금 상관하지 않는다. 나는 부분보기 경로를 표시하는 것에 관심이있다. 그들은하지 않습니다. 링크를 클릭하면 page.html #/info (또는 의견이나 피드백 등)가 제대로 표시됩니다. 그러나 아무 일도 일어나지 않습니다.

기본 폴더 = HTML을
- JS의 = 스크립트
- 응용 프로그램 = 각 파일 (여기 app.js/모듈 파일)
  - 전망
  - 부분
  - 컨트롤러
  - 서비스 내가 잘못 뭐하는 거지

출처

2013-04-30 jstacks

코드에 컨트롤러를 만들지 않았습니까? –

부분 HTML을 기본 HTML과 동일한 수준으로 배치하면 작동합니다. –

실제로는 app/partials/info.html과 같은 경로에서도 작동합니다. –

<!DOCTYPE html> 
<html ng-app='mainApp'> 

    <head> 
     <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js'></script> 
     <script> 
      var mainApp = angular.module('mainApp', []); 

      mainApp.config(function($routeProvider) { 

       $routeProvider 

       .when('/info', { 
        controller: 'mainInfoController', 
        templateUrl: 'app/partials/info.html' 
       }) 

        .when('/comment', { 
        controller: 'mainCommentController', 
        templateUrl: 'app/partials/comment.html' 
       }) 

        .when('/feedback', { 
        controller: 'mainFeedbackController', 
        templateUrl: 'app/partials/feedback.html' 
       }) 

        .otherwise({ 
        redirectTo: '/info' 
       }); 

       function mainInfoController($scope) {} 

       function mainCommentController($scope) {} 

       function mainFeedbackController($scope) {} 
      }); 
     </script> 
    </head> 

    <body> 
     <div class='toggleButtons'> 
<a href='#/info'> 
<div>Info</div> 
</a> 

<a href='#/comment'> 
<div>Comment</div> 
</a> 

<a href='#/feedback'> 
<div>Feedback</div> 
</a> 
     </div> 
     <div ng-view></div> 
    </body> 
</html>

출처

2013-04-30 04:56:27

기본적으로 코드를 변경해야하는 유일한 방법은 다음과 같습니다. 템플릿 URL에서 앞쪽으로 슬래시를 제거합니다. 컨트롤러는이 단계에서 필수적이지 않습니다. –

AngularJS 경로 vs. jQuery 표시/숨기기

답변

관련 문제