AngularJS | angular.bootstrap() Function

Last Updated : 22 Apr, 2019

The angular.bootstrap() Function in AngularJS is a functional component in the Core ng module which is used to start up an Angular application manually, it provides more control over the initialization of the application.
Syntax:

angular.bootstrap(element, [modules], [config])

Parameter Values:

element: An element is a DOM element (e.g. document) which is the root of the Angular application.
Modules: (Optional)Modules is an array of modules to be loaded.
Config: (Optional)Config is an object used for configuration options.

Example 1:

<html>
    <head>
        <title>angular.bootstrap()</title>
        <script src=
        "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"> 
        </script>
        <style>
        .id {
        font-size: 1.5em;
        color:green;
        }
        </style>
    </head>
    <body ng-app="app" style="text-align:Center">
        <h1 style="color:green">GeeksforGeeks</h1>
        <h2>angular.bootstrap()</h2>
        <div ng-controller="geek">
        <span class="id">{{name}}</span> 
        is the computer science portal for geeks.
        </div>
        <script>
            var app = angular.module("app", []);
            app.controller('geek', ['$scope', function ($scope) {
                $scope.name = "GeeksforGeeks";
            }]);
            angular.bootstrap(document, ['app']);
        </script>
    </body>
</html>

Output:
bootstrap

Example 2:

</div>
  
<html>
    <head>
        <title>angular.bootstrap()</title>
        <script src=
        "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"> 
        </script>
    </head>
    <body ng-app="app" style="text-align:Center">
        <h1 style="color:green">GeeksforGeeks</h1>
        <h2>angular.bootstrap()</h2>
        <div ng-controller="geek">
            <div class="col-md-3 well" ng-init="count=0">
                Male:    
                <input type="radio" ng-model="gender" value="Male" 
                ng-change="layout(gender)" />
                Female:  
                <input type="radio" ng-model="gender" value="Female" 
                ng-change="layout(gender)" />
                <pre><b>You selected:</b> {{result}} </pre>
            </div>
        </div>
        <script>
            var app = angular.module("app", []);
            app.controller('geek', ['$scope', function ($scope) {
                $scope.layout = function (gender) {
                    $scope.result = gender;
                }
            }]);
            angular.bootstrap(document, ['app']);
        </script>
    </body>
</html>

Output:
Before Selection:
bootstrap
After Selection:

My Personal Notes

Dec	JAN	Feb
	27
2021	2022	2023

Related Articles

Table of Contents

AngularJS | angular.bootstrap() Function

Start Your Coding Journey Now!