2081 7/29/2015 11:25:43 PM

Example:

:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
:
<div class="container-fluid" ng-app="foodcatApp" ng-controller="FoodListCtrl">
        <div class="col-xs-11">
            <p>
                Search:
                <input ng-model="query">
            </p>
            <p>
                Sort by:
                <select ng-model="orderProp">
                    <option value="name">Alphabetical (A-Z)</option>
                    <option value="-name">Alphabetical (Z-A)</option>
                    <option value="-rating">Rating (+)</option>
                    <option value="rating">Rating (-)</option>
                </select>
            </p>
        </div>
        <div class="col-xs-11">
            <ul class="foots">
                <li ng-repeat="food in foods | filter:query | orderBy:orderProp">
                    <p>{{food.name}} ({{food.rating}})</p>
                    <p>{{food.snippet}}</p>
                </li>
            </ul>
        </div>
        <div class="col-xs-11"><p>Total number of foots: {{foods.length}}</p></div>
    </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
    }
    ];

    $scope.orderProp = 'rating';
});
:
:

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).