[angularjs] 페이지 내 AngularJS 다중 ng 앱

Program / 글쓴이

방금 Angular JS를 배우기 시작했고 몇 가지 기본 샘플을 만들었지 만 다음과 같은 문제가 있습니다.

2 개의 모듈과 2 개의 컨트롤러를 만들었습니다.

shoppingCart -> ShoppingCartController
namesList -> NamesController

각 컨트롤러에 대한 관련보기가 있습니다. 첫 번째보기는 잘 렌더링되지만 두 번째는 렌더링되지 않습니다. 오류가 없습니다.

http://jsfiddle.net/ep2sQ/

이 문제를 해결하도록 도와주세요.

또한 Controller에서 전달 된 값을 확인하기 위해 View에 콘솔을 추가 할 가능성이 있습니까?

예를 들어 다음 div에서 console.log를 추가하고 컨트롤러 값을 출력 할 수 있습니다

<div ng-app="shoppingCart" ng-controller="ShoppingCartController">
</div>

답변

따라서 기본적으로 Cherniv가 언급했듯이 동일한 페이지 내에 여러 개의 ng-app를 갖도록 모듈을 부트 스트랩해야합니다. 모든 입력에 감사드립니다.

var shoppingCartModule = angular.module("shoppingCart", [])
shoppingCartModule.controller("ShoppingCartController",
  function($scope) {
    $scope.items = [{
      product_name: "Product 1",
      price: 50
    }, {
      product_name: "Product 2",
      price: 20
    }, {
      product_name: "Product 3",
      price: 180
    }];
    $scope.remove = function(index) {
      $scope.items.splice(index, 1);
    }
  }
);
var namesModule = angular.module("namesList", [])
namesModule.controller("NamesController",
  function($scope) {
    $scope.names = [{
      username: "Nitin"
    }, {
      username: "Mukesh"
    }];
  }
);
angular.bootstrap(document.getElementById("App2"), ['namesList']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>

<div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">
  <h1>Your order</h1>
  <div ng-repeat="item in items">
    <span>{{item.product_name}}</span>
    <span>{{item.price | currency}}</span>
    <button ng-click="remove($index);">Remove</button>
  </div>
</div>

<div id="App2" ng-app="namesList" ng-controller="NamesController">
  <h1>List of Names</h1>
  <div ng-repeat="_name in names">
    <p>{{_name.username}}</p>
  </div>
</div>

스 니펫 확장

답변

HTML 문서에서 여러 응용 프로그램을 실행하려면 angular.bootstrap ()을 사용하여 수동으로 부트 스트랩해야합니다.

HTML

<!-- Automatic Initialization -->
<div ng-app="myFirstModule">
    ...
</div>
<!-- Need To Manually Bootstrap All Other Modules -->
<div id="module2">
    ...
</div>

JS

angular.
  bootstrap(document.getElementById("module2"), ['mySecondModule']);

HTML 문서 당 하나의 AngularJS 응용 프로그램 만 자동으로 부트 스트랩 할 수 있기 때문입니다. 이 ng-app문서에서 처음 발견 된 것은 응용 프로그램으로 자동 부트 스트랩 할 루트 요소를 정의하는 데 사용됩니다.

즉, 기술적으로 페이지 당 여러 응용 프로그램을 가질 수 있지만 Angular 프레임 워크에서는 하나의 ng-app 지시문 만 자동으로 인스턴스화되고 초기화됩니다.

답변

angular.bootstrap()직접 사용할 수 있습니다 … 문제는 지시문의 이점을 잃는다는 것입니다.

먼저 HTML 요소를 부트 스트랩하려면 HTML 요소에 대한 참조를 가져와야합니다. 이는 이제 코드가 HTML에 연결되어 있음을 의미합니다.

둘째,이 둘의 연관성은 분명하지 않다. 를 사용 ngApp하면 어떤 HTML과 어떤 HTML이 연관되어 있는지 명확하게 볼 수 있으며 해당 정보를 어디에서 찾을 수 있는지 알고 있습니다. 그러나 angular.bootstrap()코드의 어느 곳에서나 호출 할 수 있습니다.

가장 좋은 방법은 지시문을 사용하는 것입니다. 내가 한 일입니다. 이라고 ngModule합니다. 코드를 사용하는 모습은 다음과 같습니다.

<!DOCTYPE html>
<html>
    <head>
        <script src="angular.js"></script>
        <script src="angular.ng-modules.js"></script>
        <script>
          var moduleA = angular.module("MyModuleA", []);
          moduleA.controller("MyControllerA", function($scope) {
              $scope.name = "Bob A";
          });

          var moduleB = angular.module("MyModuleB", []);
          moduleB.controller("MyControllerB", function($scope) {
              $scope.name = "Steve B";
          });
        </script>
    </head>
    <body>
        <div ng-modules="MyModuleA, MyModuleB">
            <h1>Module A, B</h1>
            <div ng-controller="MyControllerA">
                {{name}}
            </div>
            <div ng-controller="MyControllerB">
                {{name}}
            </div>
        </div>

        <div ng-module="MyModuleB">
            <h1>Just Module B</h1>
            <div ng-controller="MyControllerB">
                {{name}}
            </div>
        </div>
    </body>
</html>

다음에서 소스 코드를 얻을 수 있습니다.

http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/

와 같은 방식으로 구현됩니다 ngApp. 그것은 단순히 angular.bootstrap()무대 뒤에서 부릅니다 .

답변

필자의 경우 두 번째 앱의 부트 스트랩을 감싸서 angular.element(document).ready작동해야했습니다.

angular.element(document).ready(function() {
  angular.bootstrap(document.getElementById("app2"), ["app2"]);
});

답변

다음은 하나의 html 페이지에있는 두 개의 응용 프로그램과 하나의 응용 프로그램에있는 두 명의 관리자의 예입니다.

    <div ng-app = "myapp">
      <div  ng-controller = "C1" id="D1">
         <h2>controller 1 in app 1 <span id="titre">{{s1.title}}</span> !</h2>
      </div>

      <div  ng-controller = "C2" id="D2">
         <h2>controller 2 in app 1 <span id="titre">{{s2.valeur}}</span> !</h2>
      </div>
    </div>
    <script>
        var A1 = angular.module("myapp", [])

        A1.controller("C1", function($scope) {
            $scope.s1 = {};
            $scope.s1.title = "Titre 1";
         });

        A1.controller("C2", function($scope) {
            $scope.s2 = {};
            $scope.s2.valeur = "Valeur 2";
         });
    </script>

    <div ng-app="toapp" ng-controller="C1" id="App2">
        <br>controller 1 in app 2
        <br>First Name: <input type = "text" ng-model = "student.firstName">
        <br>Last Name : <input type="text" ng-model="student.lastName">
        <br>Hello : {{student.fullName()}}
        <br>
    </div>

    <script>
        var A2 = angular.module("toapp", []);
        A2.controller("C1", function($scope) {
            $scope.student={
                firstName:"M",
                lastName:"E",
                fullName:function(){
                    var so=$scope.student;
                    return so.firstName+" "+so.lastName;
                }
            };
        });
        angular.bootstrap(document.getElementById("App2"), ['toapp']);
    </script>
<style>
    #titre{color:red;}
    #D1{ background-color:gray; width:50%; height:20%;}
    #D2{ background-color:yellow; width:50%; height:20%;}
    input{ font-weight: bold; }
</style>

답변

하나의 rootModule에 여러 모듈을 병합하고 해당 모듈을 ng-app로 우수한 요소 ex : body 태그에 할당 할 수 있습니다.

코드 예 :

    <!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="namesController.js"></script>
<script src="myController.js"></script>
<script>var rootApp = angular.module('rootApp', ['myApp1','myApp2'])</script>
<body ng-app="rootApp">

<div ng-app="myApp1" ng-controller="myCtrl" >
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>

<div ng-app="myApp2" ng-controller="namesCtrl">
<ul>
  <li ng-bind="first">{{first}}
  </li>
</ul>
</div>

</body>
</html>

답변

         var shoppingCartModule = angular.module("shoppingCart", [])
          shoppingCartModule.controller("ShoppingCartController",
           function($scope) {
             $scope.items = [{
               product_name: "Product 1",
               price: 50
             }, {
               product_name: "Product 2",
               price: 20
             }, {
               product_name: "Product 3",
               price: 180
             }];
             $scope.remove = function(index) {
               $scope.items.splice(index, 1);
             }
           }
         );
         var namesModule = angular.module("namesList", [])
          namesModule.controller("NamesController",
           function($scope) {
             $scope.names = [{
               username: "Nitin"
             }, {
               username: "Mukesh"
             }];
           }
         );


         var namesModule = angular.module("namesList2", [])
          namesModule.controller("NamesController",
           function($scope) {
             $scope.names = [{
               username: "Nitin"
             }, {
               username: "Mukesh"
             }];
           }
         );


         angular.element(document).ready(function() {
           angular.bootstrap(document.getElementById("App2"), ['namesList']);
           angular.bootstrap(document.getElementById("App3"), ['namesList2']);
         });
<!DOCTYPE html>
<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

</head>

<body>

  <div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">
    <h1>Your order</h1>
    <div ng-repeat="item in items">
      <span>{{item.product_name}}</span>
      <span>{{item.price | currency}}</span>
      <button ng-click="remove($index);">Remove</button>
    </div>
  </div>

  <div id="App2" ng-app="namesList" ng-controller="NamesController">
    <h1>List of Names</h1>
    <div ng-repeat="_name in names">
      <p>{{_name.username}}</p>
    </div>
  </div>
  <div id="App3" ng-app="namesList2" ng-controller="NamesController">
    <h1>List of Names</h1>
    <div ng-repeat="_name in names">
      <p>{{_name.username}}</p>
    </div>
  </div>


</body>

</html>

스 니펫 확장