In this post we are going to see how to Initialize a model before application get rendered in angular js. First let we start from the first step how to design a application.
Steps :
1. Download and include the angular js library reference to the application.
2. Bootstrap the application using ng-app directive
3. Initialize the model using ng-init, which will initialize before the application gets rendered.
In the below code sample you can see angular js library is added in head section, application is bootstrap using ng-app in body section, finally models like Application and Modules are initialize using the mg-init directive.
Application is a single model, Modules is a Array model. When render a single variable we have to use the vairable itself inside a curly braces {{ Application }}, for an array we have to use the ng-repeat directive to iterate the each and every elements.
you can see the output for the above code
Output:
***********
From this post you can learn how to Initialize a model before application gets rendered in angular js
Steps :
1. Download and include the angular js library reference to the application.
2. Bootstrap the application using ng-app directive
3. Initialize the model using ng-init, which will initialize before the application gets rendered.
In the below code sample you can see angular js library is added in head section, application is bootstrap using ng-app in body section, finally models like Application and Modules are initialize using the mg-init directive.
Application is a single model, Modules is a Array model. When render a single variable we have to use the vairable itself inside a curly braces {{ Application }}, for an array we have to use the ng-repeat directive to iterate the each and every elements.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="application/javascript" src="Scripts/angular.js"></script>
</head>
<body ng-app ng-init="
Application = 'Angular js Basic Sample';
Modules = ['Services','Factory','Provider','Config','Run','Scope','Controller']">
<div>
<strong style="color:darkblue;margin-left: 100px">{{Application}}</strong>
<br/>
<br/>
<div style="text-align: center;width: 350px">Modules Covered</div>
<ul>
<li style="color:darkorange;list-style: none;
border-radius: 5px;border: 1px solid cornflowerblue;
padding: 5px;margin:5px;width:250px;
align-content: center;text-align: center"
ng-repeat="mod in Modules">{{mod}}</li>
</ul>
</div>
</body>
</html>
you can see the output for the above code
Output:
***********
From this post you can learn how to Initialize a model before application gets rendered in angular js
No comments:
Post a Comment