Single Page App Example

Simple single page app example.

by Jeremy Likness

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://code.angularjs.org/1.3.9/angular.js"></script>
<div ng-app='myApp' class="container">
    <div class="row">
        <div class="h2">{{selected.name}}</div>
        <div class="h2">{{selected.price|currency}}</div>
        <button class="btn btn-warning" ng-click="selected.price = selected.price * 2">Double</button>
    </div>
    <div class="row">
        <hr/>
    </div>
    <div class="row">
    <ul>
        <li class="btn btn-success"
         ng-class="{ 'btn-danger' : selected.id==item.id }"
         ng-click="pick(item)"
        ng-repeat="item in list">{{item.name}}</li>
    </ul>
    </div>
</div>

JavaScript

(function (app) {
    
    app.value('list', [{ id: 1, name: "Computer", price: 199.99 },
                       {id: 2, name: "Car", price: 39999.99 },
                       {id: 3, name: "House", price: 199999.99 }]);
    
    app.run(['$rootScope', 'list', function (rs, l) {
        rs.list = l; 
        rs.selected = l[0];
        rs.pick = function (item) {
            rs.selected = item;
        };
    }]);
                            
})(angular.module('myApp', []));