How to use Multiple ng-App in a single Page

Anonymous User 2184 22 Feb 2016

We want to use to use Multiple ng-App in a single Page. How to do this please help me.

Anonymous User

Other

I am a content writter !

1 Answers

Anonymous User 22 Feb 2016

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:

forum

How to use Multiple ng-App in a single Page

Can you answer this question?

1 Answers