Tangerine Angular Training - Shell application

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="app.css">

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>

  <script src="app.module.js"></script>
  <script src="accounts-module.js"></script>
  <script src="accounts-summary.controller.js"></script>
  <script src="accounts-service.js"></script>

</head>
 
<body ng-app="tangerine">
  <div class="banner"><h1>Tangerine Bank</h1></div>
  
  <div ng-controller="AccountsSummaryController">
  	<h3>Account Summary</h3>
  
  	<div class="list-item" ng-repeat="account in accountsList">
  		<h4>{{ account.name }}</h4>
  		<span>{{ account.balance | currency }}</span>
  	</div>
  </div>
</body>

</html>

html, body {
  margin: 0;
  padding: 0;
  font-family: "Arial";
}

body > div {
  padding: 0 0 0 20px;
}

.banner {
  background-color: #f58426;
  padding: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.banner h1 {
  margin: 0 20px 0 0;
  padding: 0;
  color: white;
  font-size: 18px;
}


.banner ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.banner ol > li {
  display: inline;
}

.banner li a {
  color: white;
  font-size: 13px;
  padding: 0 8px;
  text-decoration: none;
}

.banner li a:hover {
  text-decoration: underline;
}

body .content {
  padding: 10px 20px 30px 20px;
}

h1, h2, h3, h4 {
  color: #00366c;
  margin: 35px 0 2px 0;
}

/*
* Accounts
*/

.list-item {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  max-width: 500px;
  border-bottom: 1px dotted #ccc;
}

.list-item h4 {
  font-size: 14px;
  font-style: bold;
  color: #f58426;
  padding: 2px 0;
  margin: 0;
}

.list-item a {
  color: #f58426;
  text-decoration: none;
}

.list-item a:hover {
  text-decoration: underline;
}

.list-item span {
  font-size: 13px;
  color: #666;
}

.filter-container {
  padding: 8px;
  background-color: #eee;
  margin-bottom: 20px;
  max-width: 500px;
}

.filter-container label {
  font-size: 12px;
}

.filter-container div {
  padding: 5px 0;
}


/*
* Forms
*/


.input-container {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  max-width: 500px;
}

.input-container label {
  color: #999;
  padding: 2px 0;
  font-size: 13px;
}

.input-container input, .input-container textarea {
  padding: 4px;
}

.error {
  color: #ff0000;
  font-size: 12px;
  padding: 3px 0;
}

.button-container {
  padding-top: 10px;
}

button {
  background-color: #00366c;
  color: white;
  padding: 10px;
  min-width: 80px;
  border: none;
}

(function ()
{
	angular.module ('tangerine', ["tangerine.accounts"]);
}) ();

(function ()
{
	angular
		.module ("tangerine.accounts")
		.controller ("AccountsSummaryController", ["$scope" , "accountsService", 
		AccountsSummaryController($scope, accountsService)]);
		
	function AccountsSummaryController ($scope, accountsService)
	{
	  
	  $scope.accountsList  = [];
	  accountsService
    .getAccounts ()
    .then (function (response)
    {
      $scope.accountsList = response.data;
    });

	 
	}

}) ();

(function ()
{
	angular.module ("tangerine.accounts", []);
}) ();

[
{
	"id": "1",
	"type": "CHEQUING",
	"name": "tangerine chequing account",
	"nickname": "My Chequing",
	"balance": 500.50
},
{
	"id": "2",
	"type": "SAVINGS",
	"name": "tangerine savings account",
	"nickname": "Retirement",
	"balance": 5000.00
},
{
	"id": "3",
	"type": "CREDITCARD",
	"name": "tangerine money back masterCard",
	"balance": 250.75
}
]

[
{
	"accountId": "1",
	"name": "Payroll Deposit",
	"amount": 1500.45,
	"date": "2016-05-05"
},
{
	"accountId": "1",
	"name": "ATM Withdrawal",
	"amount": -50.00,
	"date": "2016-05-03"
},
{
	"accountId": "1",
	"name": "Interest",
	"amount": 2.50,
	"date": "2016-05-01"
},
{
	"accountId": "1",
	"name": "Starbucks Coffee",
	"amount": -3.84,
	"date": "2016-04-30"
},
{
	"accountId": "1",
	"name": "Tangerine Cafe",
	"amount": -6.41,
	"date": "2016-04-29"
},
{
	"accountId": "1",
	"name": "Payroll Deposit",
	"amount": 1500.45,
	"date": "2016-04-28"
},
{
	"accountId": "1",
	"name": "Starbucks Coffee",
	"amount": -3.84,
	"date": "2016-04-21"
},
{
	"accountId": "1",
	"name": "ATM Withdrawal",
	"amount": -20.00,
	"date": "2016-04-21"
},
{
	"accountId": "1",
	"name": "Tangerine EMT Transfer",
	"amount": 45.00,
	"date": "2016-04-17"
},
{
	"accountId": "1",
	"name": "Tangerine Cafe",
	"amount": -10.71,
	"date": "2016-04-15"
},
{
	"accountId": "1",
	"name": "Tangerine Cafe",
	"amount": -6.47,
	"date": "2016-04-14"
},
{
	"accountId": "1",
	"name": "McDonald's Restaurant",
	"amount": -21.23,
	"date": "2016-04-11"
},
{
	"accountId": "1",
	"name": "Payroll Deposit",
	"amount": 1500.45,
	"date": "2016-04-07"
},


{
	"accountId": "2",
	"name": "Interest Deposit",
	"amount": 5.50,
	"date": "2016-05-01"
},
{
	"accountId": "2",
	"name": "Deposit",
	"amount": 1500.45,
	"date": "2016-04-28"
},
{
	"accountId": "2",
	"name": "Interest",
	"amount": 5.50,
	"date": "2016-04-26"
},
{
	"accountId": "2",
	"name": "Deposit",
	"amount": 300.25,
	"date": "2016-04-25"
},
{
	"accountId": "2",
	"name": "WWW Deposit",
	"amount": 1400.45,
	"date": "2016-04-22"
},
{
	"accountId": "2",
	"name": "WWW Transfer",
	"amount": -200.00,
	"date": "2016-04-20"
},


{
	"accountId": "3",
	"name": "Payment - Thank you",
	"amount": -2000.00,
	"date": "2016-05-01"
},
{
	"accountId": "3",
	"name": "Starbucks Coffee",
	"amount": 3.84,
	"date": "2016-04-30"
},
{
	"accountId": "3",
	"name": "Tangerine Cafe",
	"amount": 6.41,
	"date": "2016-04-29"
},
{
	"accountId": "3",
	"name": "Starbucks Coffee",
	"amount": 3.84,
	"date": "2016-04-21"
},
{
	"accountId": "3",
	"name": "ATM Withdrawal",
	"amount": 20.00,
	"date": "2016-04-21"
},
{
	"accountId": "3",
	"name": "Tangerine Cafe",
	"amount": 10.71,
	"date": "2016-04-15"
},
{
	"accountId": "3",
	"name": "Tangerine Cafe",
	"amount": 6.47,
	"date": "2016-04-14"
},
{
	"accountId": "3",
	"name": "McDonald's Restaurant",
	"amount": 2016.23,
	"date": "2016-04-11"
},
{
	"accountId": "3",
	"name": "IKEA Etobicoke",
	"amount": 950.50,
	"date": "2016-04-10"
},
{
	"accountId": "3",
	"name": "Shoppers Drugmart",
	"amount": 22.96,
	"date": "2016-04-10"
},
{
	"accountId": "3",
	"name": "Metro Supermarket",
	"amount": 51.43,
	"date": "2016-04-09"
},

{
	"accountId": "4",
	"name": "Mortgage payment - Thank you",
	"amount": 2000.00,
	"date": "2016-05-01"
},
{
	"accountId": "4",
	"name": "Mortgage payment - Thank you",
	"amount": 2000.00,
	"date": "2016-04-01"
},
{
	"accountId": "4",
	"name": "Mortgage payment - Thank you",
	"amount": 2000.00,
	"date": "2016-03-01"
}
]

(function ()
{  
  angular
    .module ("tangerine.accounts")
    .service ("accountsService", ["$http", accountsService]);

    function accountsService ($http)
    {
       return { getAccounts : getAccounts  };
       
       function getAccounts(){
        
        return $http.get("accounts.json");
      }
    }
    
    
}) ();