getting-started-angularjs

View Github Repository Open presentation in a new window

dbtek

See all presentation from dbtek

getting-started-angularjs

1 2

getting-started-angularjs

Getting Started with Angular JS Presentation

On Github dbtek / getting-started-angularjs

Getting Started with Angular JS

HTML enhanced for web apps!

İsmail Demirbilek

Conceptual Overview

  • Template
  • Directives
  • Model
  • Scope
  • Expressions
  • Filters
  • View
  • Controller

Example: Data Binding

<div ng-app ng-init="qty=1;cost=2">
  <b>Invoice:</b>
  <div>
    Quantity: <input type="number" ng-model="qty" required >
  </div>
  <div>
    Costs: <input type="number" ng-model="cost" required >
  </div>
  <div>
    <b>Total:</b> {{qty * cost | currency}}
  </div>
</div>

Directives

Previous example looks like normal HTML, but some extra markup. These are called directives.Directives are used for DOM access.

ng-app directive initializes the application.ng-model directive stores and updates value of form field.

Expressions & Models

Another Angular secific markup is the expression. {{expression}} is a Javascript like code snippet that allows to read and write variables. These variables are stored on scope and referred as models.

In previos example an expression used for calculation with qty and cost models.

{{qty * cost | currency}}

Filters

A filter formats the value of an expression. In previous example currency filter used to format the value.

{{qty * cost | currency}} produces value looks like money.

Example: Controller

index.html

<div ng-app="invoice" ng-controller="InvoiceController">
  <b>Invoice:</b>
  <div>
    Quantity: <input type="number" ng-model="qty" required >
  </div>
  <div>
    Costs: <input type="number" ng-model="cost" required >
    <select ng-model="inCurr">
      <option ng-repeat="c in currencies">{{c}}</option>
    </select>
  </div>
  <div>
    <b>Total:</b>
    <span ng-repeat="c in currencies">
      {{total(c) | currency:c}}
    </span>
    <button class="btn" ng-click="pay()">Pay</button>
  </div>
</div>

app.js

angular.module('invoice', [])
  .controller('InvoiceController', function($scope) {
    $scope.qty = 1;
    $scope.cost = 2;
    $scope.inCurr = 'EUR';
    $scope.currencies = ['USD', 'EUR', 'CNY'];
    $scope.usdToForeignRates = {
      USD: 1,
      EUR: 0.74,
      CNY: 6.09
    };

    $scope.total = function total(outCurr) {
      return $scope.convertCurrency($scope.qty * $scope.cost, $scope.inCurr, outCurr);
    };
    $scope.convertCurrency = function convertCurrency(amount, inCurr, outCurr) {
      return amount * $scope.usdToForeignRates[outCurr] / $scope.usdToForeignRates[inCurr];
    };
    $scope.pay = function pay() {
      window.alert("Thanks!");
    };
  });

Controllers

The purpose of controllers is to expose variables and functionality to expressions and directives.

ng-controller directive tells Angular that InvoiceController is responsible from directive and its children elements. Here a scope is created.

Scope

scope is an object that refers to the application model. Scopes are arranged in hierarchical structure.

In previous example InvoiceController created a scope. Scopes can watch expressions and propagate events.

Services

Previous example has all the logic on controller. As application grows it's a good practice to move view independent logic into services to provide reusabilty and abstraction.

Example: Service

finance.js

angular.module('finance', [])
  .factory('currencyConverter', function() {
    var usdToForeignRates = {
      USD: 1,
      EUR: 0.74,
      CNY: 6.09
    };

    return {
      currencies: ['USD', 'EUR', 'CNY'],
      convert: function (amount, inCurr, outCurr) {
        return amount * usdToForeignRates[outCurr] / usdToForeignRates[inCurr];
      }
    };
  });

app.js

angular.module('invoice', ['finance'])
  .controller('InvoiceController', function($scope, currencyConverter) {
    $scope.qty = 1;
    $scope.cost = 2;
    $scope.inCurr = 'EUR';
    $scope.currencies = currencyConverter.currencies;

    $scope.total = function total(outCurr) {
      return currencyConverter.convert($scope.qty * $scope.cost, $scope.inCurr, outCurr);
    };
    $scope.pay = function pay() {
      window.alert("Thanks!");
    };
  });

Dependency Injection

In previous example we moved currency convertion logic into a service provided by another module finance.

angular.module('invoice', ['finance']) tells Angular that invoice module depends on finance module and injector wires the controller and the service.

Credits

Angular JS Developer Guide

THE END

Getting Started with Angular JS

İsmail Demirbilek - @dbtek

© 2014, License: MIT.