Home > DeveloperSection > Forums > How to use Multiple ng-App in a single Page
Ankit Singh

Total Post:341

Points:2389
Posted on    February-22-2016 10:29 PM

 Angular JS JQuery  Angular JS 
Ratings:


 1 Reply(s)
 236  View(s)
Rate this:
We want to use  to use Multiple ng-App  in a single Page. How to do this please help me.


aditya kumar Patel

Total Post:242

Points:1722
Posted on    February-22-2016 11:03 PM

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:



Don't want to miss updates? Please click the below button!

Follow MindStick