একটি পৃষ্ঠার মধ্যে AngularJS একাধিক এনজি-অ্যাপ্লিকেশন

Question

আমি সবেমাত্র কৌণিক জেএস শিখতে শুরু করেছি এবং কয়েকটি বেসিক নমুনা তৈরি করেছি তবে আমি নিম্নলিখিত সমস্যার সাথে আটকে আছি।

আমি 2 টি মডিউল এবং 2 জন নিয়ামক তৈরি করেছি।

shoppingCart -> ShoppingCartController
namesList -> NamesController

প্রতিটি নিয়ামকের জন্য সম্পর্কিত দর্শন রয়েছে। প্রথম ভিউ জরিমানা করে তবে দ্বিতীয়টি রেন্ডারিং করে না। কোন ত্রুটি আছে।

http://jsfiddle.net/ep2sQ/

দয়া করে আমাকে এই সমস্যাটি সমাধান করতে সহায়তা করুন।

কন্ট্রোলার থেকে কোন মানগুলি পাস হয় তা যাচাই করতে ভিউতে কনসোল যুক্ত করার কোনও সম্ভাবনাও রয়েছে।

উদাহরণস্বরূপ নিম্নলিখিত ডিভের মধ্যে আমরা কনসোল.লগ যুক্ত করতে পারি এবং নিয়ামক মানগুলি আউটপুট করতে পারি

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

Comments

: এই ইচ্ছার সাহায্যের হতে পারে stackoverflow.com/questions/12860595/...

— Cherniv

ধন্যবাদ চেরেনিভ। এটি খুব সহায়ক এবং আমি আপনার সরবরাহিত লিঙ্কটি ব্যবহার করে সমস্যার সমাধান করেছি। দয়া করে আপনি দেখুন / টেম্পলেট Template {কনসোল.লগ} not এর মধ্যে নিয়ন্ত্রণকারীকে ডাম্প করতে কনসোল.লগ কীভাবে ব্যবহার করবেন সে সম্পর্কেও তথ্য সরবরাহ করতে পারেন।

— নিতিন মুকেশ

আপনাকে স্বাগতম. নোট করুন যে আপনি ইতিমধ্যে {{item.product_name}}একটি

— দর্শনটিতে

কোনও ওয়েবঅ্যাপের জন্য একাধিক অ্যাপ্লিকেশন তৈরিতে কোনও সমস্যা আছে? আমার এই প্রকল্পটি রয়েছে যেখানে প্রতিটি এইচটিএমএল পৃষ্ঠার নিজস্ব অ্যাপ রয়েছে, আমি জানতে চাই যে কোনওভাবেই পারফরম্যান্স প্রভাবিত হবে কিনা?

— টি. রেক্স

যদিও প্রতি পৃষ্ঠায় একাধিক অ্যাংুলারজেএস অ্যাপ্লিকেশন বুটস্ট্র্যাপ করা সম্ভব, আমরা এই দৃশ্যের বিরুদ্ধে সক্রিয়ভাবে পরীক্ষা করি না। এটা সম্ভব যে আপনি সমস্যার মধ্যে পড়ে যাবেন, বিশেষত জটিল অ্যাপ্লিকেশনগুলির সাথে, তাই সতর্কতার পরামর্শ দেওয়া হচ্ছে। দেখুন AngularJS ডেভেলপার নির্দেশিকা - বুটস্ট্র্যাপ ।

— জর্জিউগ

Answer 1

চ্যানেরিভ দ্বারা উল্লিখিত হিসাবে আমরা একই পৃষ্ঠাতে একাধিক এনজি-অ্যাপ্লিকেশন থাকতে মডিউল বুটস্ট্র্যাপ করা প্রয়োজন। সমস্ত ইনপুট জন্য অনেক ধন্যবাদ।

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>

Comments

পরিবর্তে আপনি এটি করার জন্য একটি নির্দেশিকা তৈরি করতে পারেন stackoverflow.com/a/22898036/984780

— লুইস পেরেজ

কৌণিক ডকুমেন্টেশন বলছে যে কোনও অ্যাপ্লিকেশন ম্যানুয়ালি বুটস্ট্র্যাপ করার সময়, এনজিএপি নির্দেশিকা ব্যবহার করবেন না। সুতরাং এনজি-অ্যাপ = "নেমলিস্ট" (পারে / হওয়া উচিত) পুনরুদ্ধার করা উচিত। docs.angularjs.org/guide/bootstrap

— মাইক_কে

দু'টি আলাদা জেএস ফাইলগুলিতে যাদের এনজি-অ্যাপ রয়েছে তাদের জন্য নীচের কোডটি কৌনিক.এলিমেন্ট (ডকুমেন্ট) .ডিডি (ফাংশন) (অ্যাঙ্গুলার.বूटস্ট্র্যাপ (ডকুমেন্ট.জেটমেন্টমেন্টবাইআইডি ("অ্যাপ 2"), ['নেমলিস্ট']) সহায়তা করতে পারে ;});

— শিবশানমুগম কান্নান

দ্রষ্টব্য: আমার অ্যাপ্লিকেশনটিতে, আমাকে এই লাইনটি "অ্যাঙ্গুলার.বুটস্ট্র্যাপ (ডকুমেন্ট.সেটএলমেন্টবিআইআইডি (" অ্যাপ 2 "), ['নেমলিস্ট']) রাখতে হয়েছিল;" ইন $ (ডকুমেন্ট)। প্রস্তুত ফাংশন

— লা

এটি আমার পক্ষে কাজ করছে না O কেবলমাত্র প্রথম এনজি-অ্যাপটি সঠিকভাবে কাজ করে

— SIVAKUMAR.J

Answer 2

এইচটিএমএল ডকুমেন্টে একাধিক অ্যাপ্লিকেশন চালনার জন্য আপনাকে অবশ্যই এঙ্গুলার.বুটস্ট্র্যাপ () ব্যবহার করে ম্যানুয়ালি বুটস্ট্র্যাপ করতে হবে

এইচটিএমএল

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

জাতীয়

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

---

এর কারণ হ'ল এইচটিএমএল ডকুমেন্টে কেবলমাত্র একটি অ্যাঙ্গুলারজেএস অ্যাপ্লিকেশন স্বয়ংক্রিয়ভাবে বুটস্ট্র্যাপ করা যায়। ng-appদস্তাবেজের মধ্যে প্রথমটি পাওয়া যায় একটি অ্যাপ্লিকেশন হিসাবে অটো-বুটস্ট্র্যাপে মূল উপাদানটি সংজ্ঞায়িত করতে ব্যবহৃত হবে।

অন্য কথায়, যেখানে প্রতি পৃষ্ঠায় বেশ কয়েকটি অ্যাপ্লিকেশন থাকা প্রযুক্তিগতভাবে সম্ভব, কেবলমাত্র একটি এনজি-অ্যাপ্লিকেশন নির্দেশ স্বয়ংক্রিয়ভাবে কৌণিক কাঠামো দ্বারা ইনস্ট্যান্ট করা হবে এবং আরম্ভ করা হবে।

Comments

এইচটিএমএল ডকুমেন্টের জন্য কেবলমাত্র একটি ngAppনির্দেশিকা স্বয়ংক্রিয়-বুটলোড হওয়া যায় তবে আপনি যতক্ষণ না পরবর্তী বার্তাগুলি ম্যানুয়ালি বুটস্ট্র্যাপ করতে পারেন ততক্ষণ আপনি একাধিক অ্যাপ্লিকেশন রাখতে পারবেন।

— জ্যারেডম্যাকএটিয়ার

@ কোডেএটার namesListতখন মডিউলটি কোথায় অবস্থিত? আপনি দয়া করে আপনার উত্তর আপডেট করতে পারেন, যাতে এটি পরিষ্কার হয়ে যায়?

— ইউজিন

এটা ভুল. আপনার একাধিক এনজি-অ্যাপ্লিকেশন থাকতে পারে। দেখুন stackoverflow.com/a/24867989/753632

— AndroidDev

অ্যান্ড্রয়েড ডেভ, আমি অনুসরণ করি না আপনার উল্লেখ করা লিঙ্কটি একাধিক এনজি-অ্যাপ্লিকেশন বৈশিষ্ট্যগুলি দেখায় না।

— Jpnh

Answer 3

আপনি angular.bootstrap()সরাসরি ব্যবহার করতে পারেন ... সমস্যাটি হ'ল আপনি নির্দেশের সুবিধাগুলি হারাবেন।

প্রথমে আপনাকে বুটস্ট্র্যাপ করার জন্য এইচটিএমএল উপাদানটির একটি রেফারেন্স পাওয়া দরকার, যার অর্থ আপনার কোডটি এখন আপনার এইচটিএমএল এর সাথে মিলিত হয়েছে।

দ্বিতীয়ত দুজনের মধ্যে মেলামেশাটা তেমন সুস্পষ্ট নয়। সঙ্গে ngAppতোমরা স্পষ্টই দেখতে পাচ্ছো কি এইচটিএমএল কি মডিউল সঙ্গে যুক্ত এবং আপনি কি জানেন যেখানে যে তথ্যের জন্য চেহারা। তবে 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()পর্দার আড়ালে কল করে।

Answer 4

আমার ক্ষেত্রে আমার দ্বিতীয় অ্যাপ্লিকেশনটির angular.element(document).readyকাজটি চালানোর জন্য বুটস্ট্র্যাপিং মোড়তে হয়েছিল :

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

Comments

ভি 1.6 হ্রাস করা:angular.element(callback) পরিবর্তে ব্যবহার করুন angular.element(document).ready(callback))। দেখুন AngularJS angular.element API উল্লেখ । এছাড়াও github.com/angular/angular.js/commit/…

— জর্জিউজ

Answer 5

এখানে একটি এইচটিএমএল পৃষ্ঠায় দুটি অ্যাপ্লিকেশন এবং একটি অ্যাপ্লিকেশনে দুটি কনট্রোলারের উদাহরণ রয়েছে:

    <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>

Answer 6

আপনি একটি রুটমডিউলে একাধিক মডিউল একত্রিত করতে পারেন এবং সেই মডিউলটিকে এনজি-অ্যাপ হিসাবে একটি উচ্চতর উপাদান হিসাবে নির্ধারণ করতে পারেন যেমন: বডি ট্যাগ।

কোড প্রাক্তন:

    <!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>

Comments

আপনি রুট অ্যাপের অভ্যন্তরে দুটি পৃথক অ্যাপ্লিকেশন বাসা বাঁধছেন, কৌণিক অ্যাপ্লিকেশনগুলির বাসা বাঁধতে দেয় না

— কোডিন

Answer 7

         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>

Comments

একমাত্র পৃষ্ঠায় একাধিক এনজি-অ্যাপ্লিকেশন করার জন্য কেবলমাত্র একটি এক্সটেনশান আমাকে কেবলমাত্র সায়েব-আমিনী এবং @ নিতিন মুকেশ কোড উভয়কেই একত্রিত করতে হয়েছিল - আপনাকে উভয়কে ধন্যবাদ

— প্রণীত

এই ধারণাটি আমার পক্ষে কাজ করছে। কৌণিক.এলিমেন্ট (নথি) .ডিডি (ফাংশন () ular কৌণিক.বুটস্ট্র্যাপ (ডকুমেন্ট.জেটএলমেন্টবাইআইডি ("অ্যাপ 2"), ['নেমলিস্ট']); কৌণিক.বুটস্ট্র্যাপ (ডকুমেন্ট.সেটমেন্ট বিইআইডি ("অ্যাপ 3"), ['নামসুলিপি 2' ]);});

— সিভাকুমার.জে

Answer 8

কেবলমাত্র একটি অ্যাপ স্বয়ংক্রিয়ভাবে শুরু হয়। অন্যদের নীচে ম্যানুয়ালি আরম্ভ করতে হবে:

বাক্য গঠন:

angular.bootstrap(element, [modules]);

উদাহরণ:

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8" data-require="angular.js@1.5.8"></script>
  <script data-require="ui-router@0.2.18" data-semver="0.2.18" src="//cdn.rawgit.com/angular-ui/ui-router/0.2.18/release/angular-ui-router.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script>
    var parentApp = angular.module('parentApp', [])
  .controller('MainParentCtrl', function($scope) {
    $scope.name = 'universe';
  });



var childApp = angular.module('childApp', ['parentApp'])
  .controller('MainChildCtrl', function($scope) {
    $scope.name = 'world';
  });


angular.element(document).ready(function() {
  angular.bootstrap(document.getElementById('childApp'), ['childApp']);
});
    
  </script>
</head>

<body>
  <div id="childApp">
    <div ng-controller="MainParentCtrl">
      Hello {{name}} !
      <div>
        <div ng-controller="MainChildCtrl">
          Hello {{name}} !
        </div>
      </div>
    </div>
  </div>
</body>

</html>

AngularJS API

Answer 9

আপনি একটি রুট এনজি-অ্যাপ সংজ্ঞায়িত করতে পারেন এবং এই এনজি-অ্যাপে আপনি একাধিক এনডি-কনট্রোলার সংজ্ঞায়িত করতে পারেন। এটার মত

    <!DOCTYPE html>
    <html>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>

<style>
         table, th , td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
         }

         table tr:nth-child(odd) {
            background-color: #f2f2f2;
         }

         table tr:nth-child(even) {
            background-color: #ffffff;
         }
      </style>

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

      mainApp.controller('studentController1', function ($scope) {
      $scope.student = {
      firstName: "MUKESH",
      lastName: "Paswan",

      fullName: function () {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName + " " + studentObject.lastName;
                     }
                 };
             });

             mainApp.controller('studentController2', function ($scope) {
                 $scope.student = {
                     firstName: "Mahesh",
                     lastName: "Parashar",
                     fees: 500,

                     subjects: [
                        { name: 'Physics', marks: 70 },
                        { name: 'Chemistry', marks: 80 },
                        { name: 'Math', marks: 65 },
                        { name: 'English', marks: 75 },
                        { name: 'Hindi', marks: 67 }
                     ],

                     fullName: function () {
                         var studentObject;
                         studentObject = $scope.student;
                         return studentObject.firstName + " " + studentObject.lastName;
                     }
                 };
             });
          </script>

    <body>
    <div ng-app = "mainApp">
    <div id="dv1"  ng-controller = "studentController1">
    Enter first name: <input type = "text" ng-model = "student.firstName"><br/><br/> Enter last name: <input type = "text" ng-model = "student.lastName"><br/>
    <br/>
     You are entering: {{student.fullName()}}
    </div>

    <div id="dv2" ng-controller = "studentController2">
     <table border = "0">
                <tr>
                   <td>Enter first name:</td>
                   <td><input type = "text" ng-model = "student.firstName"></td>
                </tr>

                <tr>
                   <td>Enter last name: </td>
                   <td>
                      <input type = "text" ng-model = "student.lastName">
                   </td>
                </tr>

                <tr>
                   <td>Name: </td>
                   <td>{{student.fullName()}}</td>
                </tr>

                <tr>
                   <td>Subject:</td>

                   <td>
                      <table>
                         <tr>
                            <th>Name</th>.
                            <th>Marks</th>
                         </tr>

                         <tr ng-repeat = "subject in student.subjects">
                            <td>{{ subject.name }}</td>
                            <td>{{ subject.marks }}</td>
                         </tr>

                      </table>
                   </td>

                </tr>
             </table>

          </div>
    </div>

    </body>
    </html>

Answer 10

// root-app
const rootApp = angular.module('root-app', ['app1', 'app2E']);

// app1
const app11aa = angular.module('app1', []);
app11aa.controller('main', function($scope) {
  $scope.msg = 'App 1';
});

// app2
const app2 = angular.module('app2E', []);
app2.controller('mainB', function($scope) {
  $scope.msg = 'App 2';
});

// bootstrap
angular.bootstrap(document.querySelector('#app1a'), ['app1']);
angular.bootstrap(document.querySelector('#app2b'), ['app2E']);

<!-- angularjs@1.7.0 -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.min.js"></script>

<!-- root-app -->
<div ng-app="root-app">

  <!-- app1 -->
  <div id="app1a">
    <div ng-controller="main">
      {{msg}}
    </div>
  </div>

  <!-- app2 -->
  <div id="app2b">
    <div ng-controller="mainB">
      {{msg}}
    </div>
  </div>

</div>

Answer 11

আমি আপনার jsfiddle পরিবর্তন করেছি, বাকি মডিউলগুলির জন্য rootModule হিসাবে শীর্ষ সর্বাধিক মডিউল তৈরি করতে পারি। নীচে আপনার jsfiddle আপডেট পরিবর্তন।

1. দ্বিতীয় মডিউলটি রুটমোডুলে ইনজেকশন করতে পারে।
2. এইচটিএমএল দ্বিতীয় সংজ্ঞায়িত এনজি-অ্যাপ্লিকেশনটিতে রুট এনজি-অ্যাপ্লিকেশনটি রাখা হয়েছে।

Updated JsFiddle: http://jsfiddle.net/ep2sQ/1011/

Comments

কোন ধারণা কেন এটি কেবল প্রথমটিকে মূল্যায়ন করছে ng-app? jsfiddle.net/vwcbtzdg

— Si8

প্রথমে কেবল স্বয়ংক্রিয়ভাবে আরম্ভ হবে, অন্যদের ম্যানুয়ালি আরম্ভ করতে হবে

— মানো

Answer 12

angular.bootstrap(element, [modules], [config])অ্যাঙ্গুলারজেএস অ্যাপ্লিকেশনটি ম্যানুয়ালি শুরু করতে ব্যবহার করুন (আরও তথ্যের জন্য বুটস্ট্র্যাপ গাইড দেখুন )।

নিম্নলিখিত উদাহরণটি দেখুন:

// root-app
const rootApp = angular.module('root-app', ['app1', 'app2']);

// app1
const app1 = angular.module('app1', []);
app1.controller('main', function($scope) {
  $scope.msg = 'App 1';
});

// app2
const app2 = angular.module('app2', []);
app2.controller('main', function($scope) {
  $scope.msg = 'App 2';
});

// bootstrap
angular.bootstrap(document.querySelector('#app1'), ['app1']);
angular.bootstrap(document.querySelector('#app2'), ['app2']);

<!-- angularjs@1.7.0 -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.min.js"></script>

<!-- root-app -->
<div ng-app="root-app">

  <!-- app1 -->
  <div id="app1">
    <div ng-controller="main">
      {{msg}}
    </div>
  </div>

  <!-- app2 -->
  <div id="app2">
    <div ng-controller="main">
      {{msg}}
    </div>
  </div>

</div>

Answer 13

<html>
<head>
    <script src="angular.min.js"></script>
</head>
<body>
<div ng-app="shoppingCartParentModule" >
     <div 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 ng-controller="NamesController">
        <h1>List of Names</h1>
        <div ng-repeat="name in names">
            <p>{{name.username}}</p>
        </div>
    </div>
</div>
</body>
<script>
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.module("shoppingCartParentModule",["shoppingCart","namesList"])
</script>
</html>

Comments

আপনি যা পোস্ট করেছেন সে সম্পর্কে আপনার উত্তরে বিবরণ যুক্ত করুন

— অভিনব সিং

কি চলছে তা ব্যাখ্যা করার জন্য মন্তব্যগুলি দরকার! ভাল চেষ্টা!

— এরিক ব্রাউন - ক্যাল