marcin-wosinek / angular.meet.js Goto Github PK

• Marcin Wosinak
• 5 lat doświadczenia w IT
  • WebDev: Javascript
  • C# dev: UnitTests
• Aktualnie kontraktor w Roche

• Kto już pracował z angularem?
• Kto lubi unit testy?
• Kto używa yeomana?

• framework aplikacji
• 29KB zminimalizowany i spakowany
• backbone: 19KB (z underscore & backbone)
• backbone: 32KB (z lodash & jQuery)
• ember: 49KB
• brak zależności:
• może używać jQuery, o ile jest dostępne przy uruchomieniu

• MVVM [G+] 1
• Proste objekty js
• Wstrzykiwanie zależności
• TESTOWALNOŚĆ!
• Directives
• Programowanie deklaratywne

• proste objekty js
• sprawdzanie wszystkich zmian po kolecji - ale object.observer nadchodzi

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

• usprawnia testowanie
• ładnie posumowywuje powiązania między częściami aplikacji

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

• narzędzie do uczenia html nowych sztuczek
• dowiązuje kontrolery

<div ng-controller="ProductCtrl">

• pętle

<ul>
  <li ng-repeat="friend in friends">
    [{{$index + 1}}] {{friend.name}} who is {{friend.age}} yrs old.
 </li>
</ul>

• dowiązanie modelu

<input type="checkbox" ng-model="confirmed" ng-change="change()"

• wskrzeszanie dawnych featureów

<blink>Click me</blink>

• Brak manipulacji DOMem w kontrolerze

• Czyli to co mamy w html, css a teraz też w js
• html: chcesz paragraf?

<p>Text</p>

• css: chcesz go na czarwono?

p { color: red}

• js: dowiązujemy zawartość do module - co piszemy w zwykłym html

<p>{{modelData}}</p>

• Wstrzykiwanie zależności
• Directives
• proste objekty js jako modele

//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');

• dla niektórych nawet deal breaker

• niestandardowe tagi

<tabs>
   <pane title="Localization">

• niestandardowe atrybuty

<li ng-repeat="todo in todos">
<input type="text" ng-model="todoText" />

• a część z nich była specjanie usunięta z html

<blink>CLICK ME!</blink>

• angular używa własnych tagów, pozwala nam tworzyć kolejne, i oczekuje że będziemy pisać takie rzeczy:

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

• wszystkie directives
• dla atrybutów jest wersja z data-* or x-*
• dodatkowe tagi potrzebują shimów dla ie8

• web components
• shadow dom

Będą podobne api w przeglądarkach. Już teraz możemy korzystać z części możliwości - dzięki angularowi. A wszystko jest bezpiecznie wydzielone w scopy.

• Uzywane wewnętrzenie przez przeglądarki do tworzenia kontrolek
• Wystawi te same funkcjonalności do web developerów
• Szkic roboczy http://www.w3.org/TR/shadow-dom/
• Przyjemny opis http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/

• CLI
• super narzędzie do tworzenia kodu
• wypycha zmainy z serwera do przeglądarki - bez odświerzania

• Test runner
• Odpala testy w prawdziwych przeglądarkack
• Pracuje na linuxie, nie potrzebuje graficznego środowiska
• Build by angular team, all angular tests are on testacular
• Zbudowany przez team angulara, wszystkie testy angulara są oparte o testacular
• Pracuje z jasmine, sinon

• Przygotowałem maszyne ze środowiskiem developerskim
• Pełna maszyna https://docs.google.com/folder/d/0Bzhquk4DfXAtYUhKNlJhb01jaEk/edit?usp=sharing - oparta o ubuntu server
• user: developer
• hasło: developer
• Skrypt instalujący https://github.com/marcin-wosinek/angular-dev

• Is possible to use in legacy projects
• Da się używać z legacy code
• Goes well allong with jquery
• Dogaduje się z jquery
• Istnieje projekt przepisania bootstrapowego js do angulara [angular-ui-bootstrap] 2
• They say it is possible to use it along with require.js [angular-require-js] 3
• Mówią że da się korzystać z require.js [angular-require-js] 3

• Jeśli twój css nie działa dobrze z ng-show i ng-hide spróbuj ui-if z angular-ui

• [email protected]
• #marcin.wosinek
• podsumowanie i linki:
• http://marcin-wosinek.github.com/angular.meet.js