AngularJS Manual Startup
AngularJS Application either can be initialized automatically or can be initialized manually.'ng-app' directive instruct AngularJS to initialized application automatically .AngularJS find element with 'ng-app' , if found ,AngularJS starts automatically.
Example
Output:
AngularJS also allow manually start up of AngularJS application.When you need to perform certain task before the application start up, you will use manual application.For example , you want the fetch data from server before AngularJS initialization.Your page have several other link to load ,may be web page ,script ,css . You want to load full page and link , then manually start AngularJS.
'angular.bootstrap' instruct manually start up AngularJS. angular.bootstrap takes three arguments.
Example
In this example the AngularJS application has not initialized automatically.When you press the button "Initialize AngularJS application",the application initialize , binding woks with input and expression.
Enter Text
Your String : {{ StringPart }}
If you use more than one 'angular.bootstrap'.The first start up will work , second and on words will not work properly.second and on words directive will report error.You will get status at your browser console.
Below is the example with more than one manual start up.
Example
AngularJS Application either can be initialized automatically or can be initialized manually.'ng-app' directive instruct AngularJS to initialized application automatically .AngularJS find element with 'ng-app' , if found ,AngularJS starts automatically.
Example
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
app = angular.module("myApp",
[]);
app.controller("myCtroller",
function
($scope)
{
$scope.DoPart
= function
()
{
$scope.StringPart
= $scope.myString.substr(1, 4);
}
});
</script>
<div
ng-app="myApp"
ng-controller="myCtroller"
>
Enter
Text <input
type="text"
ng-model="myString"
ng-change="DoPart()"
/><br
/>
Your
String : {{ StringPart }}
</div>
AngularJS also allow manually start up of AngularJS application.When you need to perform certain task before the application start up, you will use manual application.For example , you want the fetch data from server before AngularJS initialization.Your page have several other link to load ,may be web page ,script ,css . You want to load full page and link , then manually start AngularJS.
'angular.bootstrap' instruct manually start up AngularJS. angular.bootstrap takes three arguments.
- element :DOM element which is the root of AngularJS application.
- modules(Optional)
- config :Configuration options object.
Example
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
app = angular.module("myApp",
[]);
app.controller("myController",
function
($scope) {
$scope.model
= '';
$scope.DoPart
= function
()
{
$scope.StringPart
= $scope.myString;
};
});
function
Initialise()
{
var
appDiv = document.getElementById("myApp");
angular.bootstrap(angular.element(appDiv),
['myApp']);
}
</script>
<div
id="myApp">
<div
ng-controller="myController">
<input
type="button"
value="Initialize
AngularJS application"
onclick="Initialise()"
/><br
/><br
/><br
/>
Enter
Text <input
type="text"
ng-model="myString"
ng-change="DoPart()"
/><br
/>
Your
String : {{ StringPart }}
</div>
</div>
In this example the AngularJS application has not initialized automatically.When you press the button "Initialize AngularJS application",the application initialize , binding woks with input and expression.
Live Example
Enter Text
Your String : {{ StringPart }}
If you use more than one 'angular.bootstrap'.The first start up will work , second and on words will not work properly.second and on words directive will report error.You will get status at your browser console.
Below is the example with more than one manual start up.
Example
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
app = angular.module("myApp",
[]);
app.controller("myController",
function
($scope)
{
$scope.model
= '';
$scope.DoPart
= function
() {
$scope.StringPart
= $scope.myString;
};
});
function
Initialise1()
{
var
appDiv = document.getElementById("myApp");
angular.bootstrap(angular.element(appDiv),
['myApp']);
}
function
Initialise2()
{
var
appDiv = document.getElementById("myApp");
angular.bootstrap(angular.element(appDiv),
['myApp']);
}
</script>
<div
id="myApp">
<div
ng-controller="myController">
<input
type="button"
value="Initialize
First Application"
onclick="Initialise1()"
/><br
/>
<input
type="button"
value="Initialize
Second Application"
onclick="Initialise2()"
/><br
/>
<br
/>
<br
/>
Enter
Text
<input
type="text"
ng-model="myString"
ng-change="DoPart()"
/><br
/>
Your
String : {{ StringPart }}
</div>
</div>
Output :
Below is the example when you try to initialize second Initialize.
No comments:
Post a Comment