Angular Demo 001

by Ari Zelanko

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
 <span ng-app="phonecatApp">
      <ul ng-controller="PhoneListCtrl">
        <li ng-repeat="phone in phones">
          <span class="phone_name">{{phone.name}}</span>

<p>{{phone.snippet}}</p>
</li>
</ul>
</span>

CSS

.phone_name {
    color: blue;
    font-weight: bold;
    font-size:210%;
}
p {
    color: white;
    text-indent: 15px;
    font-style: italic;
    background-color: red;
}
li {
    list-style-type: decimal;
}

JavaScript

(function () {
    var phoneListCallback,
    phonecatApp;

    phoneListCallback = function ($scope) {
        $scope.phones = [{
            'name': 'Nexus S',
                'snippet': 'Fast just got faster with Nexus S.'
        }, {
            'name': 'Motorola XOOM™ with Wi-Fi',
                'snippet': 'The Next, Next Generation tablet.'
        }, {
            'name': 'MOTOROLA XOOM™',
                'snippet': 'The Next, Next Generation tablet.'
        }, {
            'name': 'Orange Juice',
                'snippet': 'The next juice thing.'
        }];
    };

    phonecatApp = angular.module('phonecatApp', []);
    phonecatApp.controller('PhoneListCtrl', phoneListCallback);
}());