angular #3

Transcript

1. AngularJS 1.5.x Marchenkov Danila, Software Developer
2. Components
3. Components vs Directives Compile, pre-link хуки Селекторы class, attribute Свойста priority, terminal Упрощенная инициализация template - injectable Всегда изолированный $scope lifecycle хуки ‘<‘ - синтакс. Однонаправленный поток данных
4. • Директивы - декораторы DOM элементов. • Компоненты - часть DOM и ng-приложения.
5. Что насчет стилей?
6. NO.
7. ng-transclude .component('pane', function() { return { restrict: ‘E’, bindings: { title: ‘<’ }, transclude: true, template: ‘<div>' + ‘<span>{{ title }}</span>' + ‘<ng-transclude>fallback</ng-transclude>' + '</div>' . . . }; restrict: ‘A’, ‘E’, ‘C’
8. <div ng-controller="ExampleController"> <input ng-model="title" aria-label="title"> <br/> <textarea ng-model="text" aria-label="text"></textarea> <br/> <pane> <pane-title><a ng-href="{{link}}">{{title}}</a></pane-title> <pane-body><p>{{text}}</p></pane-body> </pane> </div> angular.module('multiSlotTranscludeExample', []) .directive('pane', function() { return { restrict: 'E', transclude: { 'title': '?paneTitle', 'body': 'paneBody', 'footer': '?paneFooter' }, template: '<div style="border: 1px solid black;">' + '<div class="title" ng-transclude="title">Fallback Title</div>' + '<div ng-transclude="body"></div>' + '<div class="footer" ng-transclude="footer">Fallback Footer</div>' + '</div>' }; }) .controller('ExampleController', ['$scope', function($scope) { $scope.title = 'Lorem Ipsum'; $scope.link = 'https://google.com'; $scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...'; }]);
9. Factory vs Service vs Provider
10. myApp.provider('helloWorld', function() { this.name = 'Default'; this.$get = function() { var name = this.name; return { sayHello: function() { return "Hello, " + name + "!"; } } }; this.setName = function(name) { this.name = name; }; }); myApp.service('helloWorldFromService', function() { this.sayHello = function() { return "Hello, World!"; }; }); myApp.factory('helloWorldFromFactory', function() { return { sayHello: function() { return "Hello, World!"; } }; }); Service - function instance Factory - the value that is returned by invoking the function reference passed to module.factory Provider - (new ProviderFunction()).$get()
11. Filters {{ expression | filter }}
12. Built-in filters
13. filter Filter API {{ filter_expression | filter : expression : comparator : anyPropertyKey}} expression: string | Object | function(value, index, array) comparator: function(actual, expected) | boolean true: A shorthand for function(actual, expected) { return angular.equals(actual, expected)} false: A short hand for a function which will look for a substring match in a case insensitive way
14. Custom filters let inverseColor = function() { 'ngInject'; return function(color, dark, light) { color = color.replace(/[^0-9a-f]/ig, '').toUpperCase(); let r = parseInt(color.substring(0, 2), 16), g = parseInt(color.substring(2, 4), 16), b = parseInt(color.substring(4, 6), 16); let returnColor; if (dark && light) { returnColor = ((r + g + b) / 3) > (255 / 2) ? dark : light; } else { returnColor = 'rgb(' + (255 - r) + ',' + (255 - g) + ',' + (255 - b) + ')'; } return returnColor; }; }; export default inverseColor;