Back home

AngularJs: Warsztaty - stopień 2 (8 VI sobota)

Środowisko

Start

Projekt

index.html

<!-- Add your site or application content here -->
<div class="container" ng-view></div>

<script src="components/angular/angular.js"></script>
<script src="components/underscore/underscore.js"></script>

Ścieżki

$routeProvider
  .when('/', {
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
  })
  .when('/contact/:id', {
    redirectTo: '/contact/:id/view'
  })

Kontrolery

angular.module('workshop2App')
  .controller('ContactViewCtrl',
      function ($scope, $routeParams, contacts) {
    $scope.contact = contacts.get($routeParams.id);
    $scope.id = $routeParams.id;
  });

Serwis z danymi

angular.module('workshop2App')
  .factory('contacts', function () {
    var exampleContacts = [ ... ];

    // Public API here
    return {
      getAll: function () {
        return exampleContacts;
      },
      get: function (id) {}

Underscore

var evens = _.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
// => [2, 4, 6]

var sum = _.reduce([1, 2, 3], function(memo, num){ return memo + num; }, 0);
// => 6

_.isString(object)
_.isNumber(object)

Struktura plików

Yeoman

Prezentacja:

  1. Generowanie ścieżki
  2. Odpalenie serwera
  3. Automatyczne odświerzenie na zmianę

Filtry

<p></p>

<p>Output: </p>

<tr ng-repeat="friend in friends | filter:searchText">
</tr>

Pisanie filtrów

angular.module('workshop2App')
  .filter('filterName', function () {
    return function (input, arg1, arg2) {
      return 'between filter: ' + input;
    };
  });
<li ng-repeat="element in list | filterName:value1:value2">

angular.forEach

var array = [1, 2, 3];

angular.forEach(array, function(value){
    this.push('Value: ' + value);
});

Zadanie 1: filtr przedziału

Rozwiązanie 1

Angular 1.1.x

Animacje

ngAnimation

Zadanie 2: zastosowanie animacji

Rozwiązanie 2

Cel: śledzenie userów

Global controller

Generator UUID (Universally unique identifier)

Ciasteczka - cookies

Zastosowanie

Cookies w angularze

Zadanie 3: tracking cookies

Rozwiązanie 3

Directives

<span my-dir="exp"></span>
<span class="my-dir: exp;"></span>
<my-dir></my-dir>
<!-- directive: my-dir exp -->

Pisanie directives

ngTransclude

Zadanie 4: template dla ws-accept-cookies

Rozwiązanie 4

Linking function

Zadanie 5: ws-accept-cookies - implementacja chowania

Rozwiązanie 5

Instalowanie yeomana

Co na następnych warsztatach?

Stay tuned