AngularJS Tutorial For Beginners: Basic Binding App

Create index.html

<html ng-app="MyApp">
   <head>
      <title>Basic Binding App</title>
           <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.0/angular.min.js"></script>
           <script>
      var app = angular.module('MyApp',[]);
      
      app.controller("BookStore", function($scope)
     { 
        $scope.items = [
            {ID:"001", Name: "Web Design", Price: 100, Quantity: 10},
            {ID:"002",Name: "Web Development", Price: 200, Quantity: 80},
            {ID:"003",Name: "Wordpress", Price: 250, Quantity: 100},
   {ID:"004",Name: "Joomla", Price: 250, Quantity: 100},
   {ID:"005",Name: "Magento", Price: 250, Quantity: 100},
   {ID:"006",Name: "Prestashop", Price: 250, Quantity: 100},
   {ID:"007",Name: "Drupal", Price: 250, Quantity: 100},
   {ID:"008",Name: "JavaScript", Price: 250, Quantity: 100},
   {ID:"009",Name: "Jquery", Price: 250, Quantity: 100},
   {ID:"010",Name: "Flash", Price: 250, Quantity: 100}
        ];
});
</script>

}
.blue{
color:#0099FF;
}
.blue:after{
content:":";
margin-left:4px;
color:#CC3300;
}
</style>
   </head>
   <body>
      <div ng-controller="BookStore">
      
      <table width="100%" border="3" cellspacing="3" cellpadding="3">
  <tr>
    <th><span>Binding Products to a List through AngularJS's <strong>{{}}</strong> directive.</span></th>
    
  </tr>
  <tr ng-repeat="item in items">
    <td><p><span class="blue">ID</span> <b>{{item.ID}}</b></p></td>
    <td><p><span class="blue">Name</span> <b>{{item.Name}}</b></p></td>
    <td><p><span class="blue">Price</span> <b>{{item.Price}}</b></p></td>
    <td><p><span class="blue">Quantity</span> <b>{{item.Quantity}}</b></p></td>
    
  </tr>
  
</table>

</div>
      
      
 
   </body>
</html>

Tuesday, 14 April 2015

Basic Binding App

Create index.html

No comments:

Post a Comment