javascript 앵귤러js - 단일 페이지 앱에 AngularJS가있는 다중 컨트롤러




단점 앵귤러6 (7)

현재 단일 페이지 응용 프로그램을 만드는 중입니다. 여기까지 내가 당신의 질문에 답할 것이라고 믿는 바가 있습니다. 기본 ng-view 지시어 함께 div 있습니다 base.html) 템플릿이 있습니다. 이 지시어는 새로운 내용을 넣을 각도를 알려줍니다. 각도 새 소개를하기 때문에 이것이 최선의 방법이라고 말하는 것은 아닙니다.

app = angular.module('myApp', []);                                                                             

app.config(function($routeProvider, $locationProvider) {                        
  $routeProvider                                                                
       .when('/home/', {                                            
         templateUrl: "templates/home.html",                                               
         controller:'homeController',                                
        })                                                                      
        .when('/about/', {                                       
            templateUrl: "templates/about.html",     
            controller: 'aboutController',  
        }) 
        .otherwise({                      
            template: 'does not exists'   
        });      
});

app.controller('homeController', [              
    '$scope',                              
    function homeController($scope,) {        
        $scope.message = 'HOME PAGE';                  
    }                                                
]);                                                  

app.controller('aboutController', [                  
    '$scope',                               
    function aboutController($scope) {        
        $scope.about = 'WE LOVE CODE';                       
    }                                                
]); 

base.html

<html>
<body>

    <div id="sideMenu">
        <!-- MENU CONTENT -->
    </div>

    <div id="content" ng-view="">
        <!-- Angular view would show here -->
    </div>

<body>
</html>

단일 페이지 응용 프로그램에 여러 컨트롤러를 사용하는 방법을 알고 싶습니다. 내가 알아 내려고 노력했지만 제 질문과 매우 흡사합니다.하지만 한 페이지 앱에 여러 컨트롤러를 사용하지 않는 특정 문제를 해결하는 다양한 답변이 있습니다.

단일 페이지에 여러 컨트롤러를 사용하는 것이 현명하지 않기 때문에 그렇습니까? 아니면 그냥 불가능한가요?

이미 메인 페이지에서 킥 - 엉덩이 이미지 캐 러셀 컨트롤러가 작동한다고 가정 해 봅시다.하지만 모달을 사용하는 방법을 배우고 그에 대한 새로운 컨트롤러 (또는 컨트롤러가 필요한 다른 것)가 필요하다고 가정 해 봅시다. 그러면 나는 무엇을 할 것인가?

저는 다른 질문에 대한 답을 보았습니다. 그 질문은 저와 거의 동일한 것을 묻고 사람들은 "* OMG, 왜 그렇게 할 수 있습니까?"라고 대답합니다.

가장 좋은 방법은 무엇입니까, 아니면 어떻게합니까?

편집하다

많은 사람들이 두 개의 컨트롤러를 선언 한 다음 ng-controller를 사용하여이를 호출합니다. 아래에서이 코드를 사용하고 ng-controller로 MainCtrl을 호출합니다.

app.config(function($routeProvider, $locationProvider) {                        
  $routeProvider                                                                
       .when('/', {                                            
         templateUrl: "templates/main.html",                                               
         controller:'MainCtrl',                                
        })                                                                      
        .otherwise({                      
            template: 'does not exists'   
        });      
});

컨트롤러없이 ng-controller를 사용할 수 있다면 컨트롤러를 설정해야하는 이유는 무엇입니까? 이것은 나를 혼란스럽게 만든다. (그리고 당신은이 방법으로 두 개의 컨트롤러를 추가 할 수 없다고 생각합니다 ...)


난 당신이 "단일 페이지 애플 리케이션"의미가 누락 된 것 같아요.

그렇다고해서 실제로 .html이 하나만있는 것은 아니며 대신 하나의 기본 index.html 과 몇 개의 중첩 된 .html 파일을 갖게됩니다. 그렇다면 왜 단일 페이지 응용 프로그램입니까? 이 방법으로 페이지를 표준 방식으로로드하지 않습니다 (즉, 전체 페이지를 완전히 새로 고치는 브라우저 호출).하지만 Angular / Ajax를 사용하여 내용 부분을로드하면됩니다. 페이지 변경 사이에 깜박임이 표시되지 않으므로 페이지에서 이동하지 않은 것으로 느껴집니다. 따라서 한 페이지에 머무르고있는 것처럼 느껴집니다.

자, 이제 가정용, 연락처, 포트폴리오 및 상점과 같은 단일 페이지 응용 프로그램에 대해 여러 내용을 갖고 싶어한다고 가정합니다. 단일 페이지 / 다중 콘텐츠 앱 (각도 방식)은 다음과 같은 방식으로 구성됩니다.

  • index.html : 헤더, <ng-view> 및 바닥 글 포함
  • contacts.html : 연락처 양식 포함 (머리글 없음, 바닥 글 없음)
  • portfolio.html : 포트폴리오 데이터 포함 (머리글 없음 바닥 글 없음)
  • store.html : 저장소가 포함되어 있으며 헤더에는 아무 꼬리말도 없습니다.

당신은 색인에, "연락처"라는 메뉴를 클릭하면 어떻게됩니까? Angular는 <ng-view> 태그를 contacts.html 코드로 대체합니다.

어떻게 그걸 성취합니까? ngRoute 을 사용하면 다음과 같이됩니다.

app.config(function($routeProvider, $locationProvider) {                        
  $routeProvider                                                                
       .when('/', {                                            
         templateUrl: "templates/index.html",                                               
         controller:'MainCtrl',                                
        })
        .when('/contacts', {                                            
         templateUrl: "templates/contacts.html",                                               
         controller:'ContactsCtrl',                                
        })                                                                 
        .otherwise({                      
            template: 'does not exists'   
        });      
});

올바른 컨트롤러를 전달하는 올바른 html을 호출합니다 (주의 : route를 사용하는 경우 contacts.html 에서 ng-controller 지시어를 지정하지 마십시오 )

그런 다음 contacts.html 페이지에 ng-controller 지시어를 많이 선언 할 수 있습니다. 그것들은 ContactCtrl 자식 컨트롤러가 될 것입니다. (따라서 그것으로부터 상속받습니다.) 그러나 단일 경로의 경우 routeProvider 내부에서 "부분보기의 아버지 컨트롤러"로 작동 할 단일 컨트롤러를 선언 할 수 있습니다.

편집 다음 템플릿 / contacts.html을 상상해보십시오.

<div>
    <h3>Contacts</h3>
    <p>This is contacts page...</p>
</div>

위의 routeProvider 는 컨트롤러를 포함 div에 삽입합니다. 기본적으로 위의 html automaticaly는 다음과 같습니다.

<div ng-controller="ContactsCtrl">
    <h3>Contacts</h3>
    <p>This is contacts page...</p>
</div>

내가 다른 컨트롤러를 가질 수 있다고 말하면 컨트롤러를 다음과 같이 내부 DOM 요소에 연결할 수 있다는 의미입니다.

<div>
    <h3>Contacts</h3>
    <p ng-controller="anotherCtrl">Hello {{name}}! This is contacts page...     
    </p>
</div>

이것으로 조금 더 명확 해지기를 바랍니다.

에이


문제가 무엇입니까? 여러 컨트롤러를 사용하려면 여러 ngController 지시문을 사용하십시오.

<div class="widget" ng-controller="widgetController">
    <p>Stuff here</p>
</div>

<div class="menu" ng-controller="menuController">
    <p>Other stuff here</p>
</div>

평소와 같이 응용 프로그램 모듈에서 컨트롤러를 사용할 수 있어야합니다.

가장 기본적인 방법은 컨트롤러 기능을 다음과 같이 선언하는 것입니다.

function widgetController($scope) {
   // stuff here
}

function menuController($scope) {
   // stuff here
}

<div class="widget" ng-controller="widgetController">
    <p>Stuff here</p>
</div>

<div class="menu" ng-controller="menuController">
    <p>Other stuff here</p>
</div>
///////////////// OR ////////////


  <div class="widget" ng-controller="widgetController">
    <p>Stuff here</p>
    <div class="menu" ng-controller="menuController">
        <p>Other stuff here</p>
    </div>
</div>

menuController는 메뉴 div에 액세스 할 수 있습니다. 그리고 widgetController는 둘 다 액세스 할 수 있습니다.


같은 모듈에 하나 이상의 컨트롤러를 선언 할 수 있습니다. 다음은 그 예입니다.

  <!DOCTYPE html>
    <html>

    <head>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
       </script>
      <title> New Page </title>


    </head> 
    <body ng-app="mainApp"> <!-- if we remove ng-app the add book button [show/hide] will has no effect --> 
      <h2> Books </h2>

    <!-- <input type="checkbox" ng-model="hideShow" ng-init="hideShow = false"></input> -->
    <input type = "button" value = "Add Book"ng-click="hideShow=(hideShow ? false : true)"> </input>
     <div ng-app = "mainApp" ng-controller = "bookController" ng-if="hideShow">
             Enter book name: <input type = "text" ng-model = "book.name"><br>
             Enter book category: <input type = "text" ng-model = "book.category"><br>
             Enter book price: <input type = "text" ng-model = "book.price"><br>
             Enter book author: <input type = "text" ng-model = "book.author"><br>


             You are entering book: {{book.bookDetails()}}
     </div>

    <script>
             var mainApp = angular.module("mainApp", []);

             mainApp.controller('bookController', function($scope) {
                $scope.book = {
                   name: "",
                   category: "",
                   price:"",
                   author: "",


                   bookDetails: function() {
                      var bookObject;
                      bookObject = $scope.book;
                      return "Book name: " + bookObject.name +  '\n' + "Book category: " + bookObject.category + "  \n" + "Book price: " + bookObject.price + "  \n" + "Book Author: " + bookObject.author;
                   }

                };
             });
    </script>

    <h2> Albums </h2>
    <input type = "button" value = "Add Album"ng-click="hideShow2=(hideShow2 ? false : true)"> </input>
     <div ng-app = "mainApp" ng-controller = "albumController" ng-if="hideShow2">
             Enter Album name: <input type = "text" ng-model = "album.name"><br>
             Enter Album category: <input type = "text" ng-model = "album.category"><br>
             Enter Album price: <input type = "text" ng-model = "album.price"><br>
             Enter Album singer: <input type = "text" ng-model = "album.singer"><br>


             You are entering Album: {{album.albumDetails()}}
     </div>

    <script>
             //no need to declare this again ;)
             //var mainApp = angular.module("mainApp", []);

             mainApp.controller('albumController', function($scope) {
                $scope.album = {
                   name: "",
                   category: "",
                   price:"",
                   singer: "",

                   albumDetails: function() {
                      var albumObject;
                      albumObject = $scope.album;
                      return "Album name: " + albumObject.name +  '\n' + "album category: " + albumObject.category + "\n" + "Book price: " + albumObject.price + "\n" + "Album Singer: " + albumObject.singer;
                   }
                };
             });
    </script>

    </body>
    </html>

모든 템플릿보기를 기본 html 파일에 포함시킬 수도 있습니다. 예 :

<body ng-app="testApp">
  <h1>Test App</h1>
  <div ng-view></div>
  <script type = "text/ng-template" id = "index.html">
    <h1>Index Page</h1>
    <p>{{message}}</p>
  </script>
  <script type = "text/ng-template" id = "home.html">
    <h1>Home Page</h1>
    <p>{{message}}</p>
  </script>
</body>

이 방법은 각 템플릿에 다른 컨트롤러가 필요하다면 여전히 각도 라우터를 사용할 수 있습니다. 작업 예제는 plunk를 참조하십시오. http://plnkr.co/edit/9X0fT0Q9MlXtHVVQLhgr?p=preview

이렇게하면 응용 프로그램이 서버에서 클라이언트로 보내지면 데이터 요청 등을 할 필요가 없다는 전제하에 완전히 자체 포함됩니다.


빠른 해결책 :

select option:empty { display:none }

누군가가 도움이되기를 바랍니다. 이상적으로, 선택된 대답은 접근 방식이어야하지만 가능하지 않다면 패치로 작동해야합니다.





javascript angularjs controller