2005 7/27/2015 11:59:29 PM

Example:

:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
:
<div ng-app="foodcatApp" ng-controller="FoodListCtrl">
        <ul>
            <li ng-repeat="food in foods">
                <p><strong>{{food.name}}</strong></p>
                <p>{{food.snippet}}</p>
            </li>
        </ul>
        <p>Total number of food itesm: {{foods.length}}</p>
    </div>
:
var foodcatApp = angular.module('foodcatApp', []);

foodcatApp.controller('FoodListCtrl', function ($scope) {
    $scope.foods = [
    {
        'name': 'Sushi',
        'snippet': 'A Japanese food consisting of cooked vinegared rice',
        'rating':3
    },
    {
        'name': 'Rasagulla',
        'snippet': 'An Indian preparation particularly a Bengali sweet recipe.',
        'rating': 5
    },
    {
        'name': 'Dumpling',
        'snippet': 'Dumplings are a food that consists of small pieces of dough, either cooked alone or wrapped around a filling.',
        'rating': 4
    }
    ,
    {
        'name': 'Pasta',
        'snippet': 'A staple food of traditional Italian cuisine.',
        'rating':3
    }
    ];    
});
:
:

The reason I call this as classic template because this is usual requirement to load data from service and then show it on web page.

Steps:

  • Load angularJS library 
  • AngularJS will initialize when the DOM content is loaded,
  • Looks for the ng-app directive and
  • It will start replacing all binding elements (e.g. curly braces, ng-bind).