First example in book is out of date #13
Description
I found the start of Chapter 1 very frustrating because you sit down and are ready to learn Angular and the very first experience is Angular.js not working. After messing around for a while I sorted out why the code included in the book does not work with the latest version of Angular. Hope this helps unblocks other developers jumping into Angular.JS who purchased the book.
While the book could use an update, I recommend validating any of the core method calls here:
https://docs.angularjs.org/guide/
app/test.html
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Finance Meter</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body ng-controller="FinanceController">
Your Salary?
<input type="text" ng-model="salary">
<br/>How much should you invest in shopping?
<input type="text" ng-model="percentage">%
<br/>The amount to be spent on gadgets will be: <span>{{result()}}</span>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
app/js/app.js
'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', [
'myApp.controllers'
]);
app/js/controllers.js
angular.module('myApp.controllers', []).
controller('FinanceController', ['$scope', function($scope) {
$scope.salary = 0;
$scope.percentage = 0;
$scope.result = function() {
return $scope.salary * $scope.percentage * 0.01;
};
}]);