HOW TO USE MULTIPLE NG-APP IN A SINGLE PAGE

Ankit Singh

Total Post:341

Points:2389
Posted by  Ankit Singh
 778  View(s)
Ratings:
Rate this:
We want to use  to use Multiple ng-App  in a single Page. How to do this please help me.
  1. aditya kumar Patel

    Post:254

    Points:1810
    Re: How to use Multiple ng-App in a single Page

    js file:

    @{
        Layout = null;
    }
     
    <!DOCTYPE html>
     
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <script src="~/Scripts/jquery-1.9.1.js"></script>
        <script src="~/Scripts/angular.js"></script>
     
        <title>Forum</title>
    </head>
    <body>
        <div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">
            <h1>Your order</h1>
            <table>
                <thead>
                    <tr>
                        <th>Product Name</th>
                        <th>Price</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody ng-repeat="item in items">
                    <tr>
                        <td>{{item.product_name}}</td>
                        <td>{{item.price | currency}}</td>
                        <td>
                            <button ng-click="remove($index);">Remove</button>
                        </td>
     
                    </tr>
                </tbody>
     
            </table>
     
        </div>
        <div id="App2" ng-app="namesList" ng-controller="NamesController">
            <h1>Customer Details</h1>
           Name: <input id="name" type="text" ng-model="Name" />
            <br />
          Email:  <input id="email" type="text" ng-model="Email" />
            <br />
           Contact:  <input id="contact" type="text" ng-model="mobile_no" />
        </div>
        <script>
            var shoppingCartModule = angular.module("shoppingCart", [])
            shoppingCartModule.controller("ShoppingCartController", function ($scope) {
                $scope.items = [
                      {
                          product_name: "HP Pavilion 15-ab216TX Notebook",
                          price: 48500
                      },
                      {
                          product_name: "HP 15-AC116TX Laptop",
                          price: 36299
                      },
                      {
                          product_name: "HP 15-AC119TX Laptop",
                          price: 39799
                      },
                      {
                          product_name: "HP 15-ac118tu Notebook",
                          price: 18999
                      },
                       {
                           product_name: "HP 15-AF114AU Notebook",
                           price: 25489
                       },
                ];
                $scope.remove = function (index) {
                    $scope.items.splice(index, 1);
                }
            });
            var namesModule = angular.module("namesList", [])
            namesModule.controller("NamesController", function ($scope) {
                $scope.Name = "Aditya Kumar";
                $scope.Email = "adityasingh06630@@gmail.com";
                $scope.mobile_no = "8953249451";
            });
            angular.bootstrap(document.getElementById("App2"), ['namesList']);
        </script>
    </body>
     
    </html>

    Output:


      Modified On Apr-11-2018 01:42:20 AM

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!