Monday, 25 April 2016

How to use Controller and Data model ?


USING CONTROLLER AND DATA

Using Controller , we define app's behavior using functions & values.

myapp.js
Define module and dependencies, controller and data model.
(function(){
  var myapp = angular.module('module1', []);

  myapp.controller('moduleController1', function(){
      this.product = car;
  });

  var car = {
    name: 'Car',
    price: 800000
    desc: '4 wheeler'
  }
})();


Web page including Module, Controller & its alias and use of data model.

<html ng-app="module1">
  <head>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
  </head>
  <body>
    <div ng-controller="moduleController1 as c1">
       <h1>{{c1.product.name}}</h1>
       <h1>{{c1.product.price}}</h1>
       <p>{{c1.product.desc}}</p>
    </div>
    <script type="text/javascript" src="angular.min.js"> </script>
    <script type="text/javascript" src="myapp.js"> </script>
  </body>
</html>


Note : Scope of controller is always where it is defined. For example, inside the DIV tag.

No comments:

Post a Comment

Note: only a member of this blog may post a comment.