Saturday, 26 September 2015

Initialize a model before application gets rendered in angular js

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. 

<!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