Angularjs Examples

AJS Examples


AngularJS $rootElement Service

In AngularJS, bootstrap process is started with "ng-app" directive which is root element. This root element can be declared in any DOM element such as <html>, <body> or in <div> tags to start bootstrap process. This element can be accessed using $rootElement service provided by AngularJS.

AngularJS Bootstrap process includes from AngularJS initialization to compilation process. AngularJS initialization can be done in two ways, automatic initialization and manual initialization.

Syntax

$scope.AppName = $rootElement.attr('ng-app')     

AngularJS $rootElement Service Example

<!DOCTYPE html>      
<html>      
<head> <!-- www.techstrikers.com -->      
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>       
    <meta charset="utf-8">      
    <title>AngularJS $rootElement Example</title>      
  <script>      
var app = angular.module('iam-root-element', []); 
    app.controller("ElementNameController", function ($scope,$rootElement) {
      $scope.ShowRootElement = function()      
      {      
        $scope.AppName = $rootElement.attr('ng-app')         
      }  
      });
</script>      
</head>      
<body style="background-color:#DDE4E9;">      
  <fieldset style="background-color:#DDE4E9;">                  
    <legend>AngulerJS $rootElement Service Example</legend>       
  <div ng-app="iam-root-element">            
    <div ng-controller="ElementNameController">       
      Get ng-app Name:              
        <input type="string" ng-model="AppName">                    
        <button ng-click="ShowRootElement()">Display ng-app Name</button> </br>   
    </div>            
</div>      
 </fieldset>       
</body>      
</html>   
See Live Example