Thursday, 5 November 2015

Multiple ng-app AngularJs Example

Given example will demonstrate how to use multiple ng-app directives in a single page. Nothing is behind the wall, just bootstrap your model, controller.

       
 <html>

<head>
    <title>Multiple ng-app='' in angularJs by asptrics.net</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

<body>

    <div id="div1" ng-app="">
     <input type="text" ng-model="name" maxlength="240"> 
     <span ng-bind="240- name.length + 'rem.'"></span>
    </div>

  
    <div id="div2" ng-app="myapp" >
        <div ng-controller="mycontroller">
            <input type="text" ng-model="name" >
            <span ng-bind="name"></span>
        </div>
    </div>

     

    <script>
        var myapp = angular.module("myapp", [])
        .controller("mycontroller", function($scope) {
            $scope.name = "RajU";
        });
        angular.bootstrap(document.getElementById("div2"), ['myapp']); // initilize myaap module which is not binding by default.
    </script>

</body>
</html>