Skip to content

First example in book is out of date #13

Description

@haysclark

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;
    };
  }]);

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions