LearnKode

4 Example(s) of angular bootstrap


Description :

angular.bootstrap provide the facility to remove the NG-APP tag from html. This is the alternate way to enable angular without using ng-app directive. Here is the code for bootstrap: angular.bootstrap(document, ['app']); See the code snippet:


angular bootstrap Example - 1 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body>
    <div ng-controller="bootstrapController">
        {{name}}
    </div>
</body>
</html>
<script>
    var app = angular.module("app", []);
    app.controller('bootstrapController', ['$scope', function ($scope) {
        $scope.name = "LearnKode";
    }]);
    angular.bootstrap(document, ['app']);
 </script>
Try it » Download Example »

Output

Description :

In this example, we will see the sum of two values val1 and val2 and display the result without using ng-app directive. See the code snippet:


angular bootstrap Example - 2 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome in the AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body>
    <div ng-controller="bootstrapController">
        <form ng-submit="add()">
            <input type="number" ng-model="val1" />
            <input type="number" ng-model="val2" /><br />
            Sum: {{sum}}<br />
            <button>Save</button>
        </form>
    </div>
</body>
</html>
<script>
    var app = angular.module("app", []);
    app.controller('bootstrapController', ['$scope', function ($scope) {
        $scope.add = function () {
            $scope.sum = $scope.val1 + $scope.val2;
        }
    }]);
    angular.bootstrap(document, ['app']);
   
</script>
Try it » Download Example »

Output

Description :

Example of Angular bootstrap:


angular bootstrap Example - 3 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome in the AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body>
    <div ng-controller="bootstrapController">
        <div class="container">
            <div class="col-md-3">
                Are you developer <input type="checkbox" ng-model="isTrue" ng-change="isTrue==true?count=count+1:null" />
                <pre> Count: {{count}}<br />{{isTrue}}</pre>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    var app = angular.module("app", []);
    app.controller('bootstrapController', ['$scope', function ($scope) {
        $scope.isTrue = true;
    }]);
    angular.bootstrap(document, ['app']);
</script>
Try it » Download Example »

Output

Description :

In this example of angular bootstrap, there are two radio buttons both are bind with scope variable gender having different value 'male' and 'female'. Change function will show the result in html. See the code snippet:


angular bootstrap Example - 4 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome in the AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
    <div ng-controller="bootstrapController">
        <div class="container">
            <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>Changed</b> {{result}} </pre>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    var app = angular.module("app", []);
    app.controller('bootstrapController', ['$scope', function ($scope) {
        $scope.layout = function (gender) {
            $scope.result = gender;
        }
    }]);
    angular.bootstrap(document, ['app']);
</script>
Try it » Download Example »

Output