Back home

AngularJs: Warsztaty - stopień 2

Ś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świeżenie 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

<tr ng-repeat="contact in contacts | between:'age':min:max">

Rozwiązanie 1

return function (input, key, min, max) {
  if (angular.isArray(input)) {
    var toReturn = [];

    angular.forEach(input, function (element) {
      if (min <= element[key] && element[key] <= max) {
        toReturn.push(element);
      }
    });

    return toReturn;
  }

  // is not array - just return unmodified and forget
  return input;
};

Angular 1.1.x

Animacje

ngAnimation

Zadanie 2: zastosowanie animacji

Rozwiązanie 2

<li ng-animate="'animate'" ng-repeat="contact in contacts | between:'age':min:max">

.animate-enter,
.animate-leave
{
  -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  position: relative;
  display: block;
  overflow: hidden;
  text-overflow: clip;
  white-space:nowrap;
}

Cel: śledzenie userów

Global controller

<!-- Before -->
<div class="container" ng-view></div>

<!-- After -->
<div ng-controller="GlobalCtrl">
  <div class="container" ng-view></div>
</div>

Generator UUID (Universally unique identifier)

return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'
  .replace(/[xy]/g, 
    function(c) {var r = Math.random()*16|0,v=c=='x'?r:r&0x3|0x8;return v.toString(16);});

Ciasteczka - cookies

Zastosowanie

Cookies w angularze

Zadanie 3: tracking cookies

Rozwiązanie 3

angular.module('workshop2App')
.controller('GlobalCtrl', function ($scope, $cookies, wsUuidGenerator) {
  // if it's empty set trackingId on cookie to new created UUID
  if (!angular.isString($cookies.trackingId)) {
    $cookies.trackingId = wsUuidGenerator.createUuid();
  }
});

Directives

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

Pisanie directives

angular.module('workshop2App')
  .directive('wsAcceptCookies', function () {
    return {
      template: '<div></div>',
      restrict: 'E',
      link: function postLink(scope, element, attrs) {
        element.text('this is the wsAcceptCookies directive');
      }
    };
  });

ngTransclude

{
  transclude: true,
  template: '<div ng-transclude></div>'
}

Zadanie 4: template dla ws-accept-cookies

Rozwiązanie 4

return {
    template: '<div ng-transclude></div>' +
              '<button>Akceptuje</button>',
    restrict: 'A',
    transclude: true,
    link: function postLink(scope, element, attrs) {
  }

Linking function

Zadanie 5: ws-accept-cookies - implementacja chowania

Rozwiązanie 5

link: function postLink(scope, element, attrs)  {
    // accept button logic
    scope.accept = function () {
      $cookies.accepted = 'true';
      element.css('display', 'none');
    };

    // hide element if cookies are already accepted
    if ($cookies.accepted) {
      element.css('display', 'none');
    }
  }

Podsumowanie

Materiały do nauki

Co na następnych warsztatach?

Stay tuned