Back home

AngularJs

apps.berlin.js 28 February 2013

Handouts:

Who am I?

You?

What is AngularJs

AngularJs Overview

MVVM architecture

function TodoCtrl($scope, $log) {
  // use console log
  $log.log('Test');

  $scope.addTodo = function() {
    $scope.todos.push({text:$scope.todoText, done:false});
    $scope.todoText = '';
  };

  $scope.remaining = function() {
    var count = 0;
    angular.forEach($scope.todos, function(todo) {
      count += todo.done ? 0 : 1;
    });
    return count;
  };

  $scope.archive = function() {
    var oldTodos = $scope.todos;
    $scope.todos = [];
    angular.forEach(oldTodos, function(todo) {
      if (!todo.done) $scope.todos.push(todo);
    });
  };
}

Dependency injection

$scope; // view model
$log; // console: ie friendly
$window; // testable window counter part
$http; // http requests
// and all our services

Directives

<div ng-controller="ProductCtrl">
<ul>
  <li ng-repeat="friend in friends">
    []  who is  yrs old.
 </li>
</ul>
<input type="checkbox" ng-model="confirmed" ng-change="change()"
<blink>Click me</blink>

Declarative programming

<p>Text</p>
p { color: red}
<p></p>

TESABILITY!

//Code:
function PasswordCtrl($scope) {
  $scope.password = '';
  $scope.grade = function() {
    var size = $scope.password.length;
    if (size > 8) {
      $scope.strength = 'strong';
    }
    else if (size > 3) {
      $scope.strength = 'medium';
    }
    else {
      $scope.strength = 'weak';
    }
  };
}

// test:
var scope = {};

var pc = new PasswordCtrl(scope);
pc.password('abc');
pc.grade();
expect(scope.strength).toEqual('weak');

Doubt

html validator are going to hate it

<tabs>
   <pane title="Localization">
<li ng-repeat="todo in todos">
<input type="text" ng-model="todoText" />
<blink>CLICK ME!</blink>

Back to 90's?

<form ng-submit="addTodo()">
<button ng-click="fireAlert()">

Not proper tags

No - it's our future

Will be native apis. Now we can get some of benefits with angular. All is safly separeted into scopes.

Shadow DOM

Yeoman

Testacular

Want to give it a try?

How to start with angular?

Questions?

How to catch me