HOW TO USE MULTIPLE NG-APP IN A SINGLE PAGE

Ankit Singh

Total Post:341

Points:2389
Posted by  Ankit Singh
 632  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:


Answer

NEWSLETTER

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