building angular apps using directives as components

Web Components in

Craig Simpson

@_craigmrcraigmr@gmail.com

PureCars

WEB COMPONENTS

MODULAR + CLEANER + SINGLE FOCUSED + REUSABLE

ITERATE FASTER

=

The Future of Web Development

Custom Elements

Templates

HTML Imports

Shadow DOM

<todo-app> <search onUpdate="searchTodos( query )"></search><add-todo onComplete="addTodo( todo )"></add-todo><todo-list items="todos" onSelect="go( todo)"></todo-list>

</todo-app>

DIRECTIVES

How Do You Make Web Components In Angular?

Simple vs. Easy

Rick Henly, 2012 RailsConf Keynote: Simplicity Matters

Controllers are EASY

Directives are SIMPLE

Controllers: ng-controller

• Out of Control Inheritance• Tightly Coupled• Globalish• Duplicate DOM

$scope is JS’s Prototype Chain

Controllers: ng-controller

Effective Directive

1. Isolated Scope

2. HTML Template

3. A Controller

<todo-app> <search onUpdate="searchTodos( query )"></search><add-todo onComplete="addTodo( todo )"></add-todo><todo-list items="todos" on-select="go( todo )"></todo-list>

</todo-app>

<todo-list items="todos" on-select="go( item )"></todo-list>

angular.module('app').directive('todoList', function(){ return { restrict: 'E', scope: { items: '=', onSelect: '&' }, template: 'todoList.html', controller: 'TodoListCtrl', controllerAs: 'todoList' };}).controller('TodoListCtrl', function($scope){ this.onItemClick = function( item ){ $scope.onSelect( { item: item } ); };});

angular.module('app').directive('todoList', function(){ return { restrict: 'E', scope: { items: '=', onSelect: '&' }, template: 'todoList.html', controller: 'TodoListCtrl', controllerAs: 'todoList' };}).controller('TodoListCtrl', function($scope){ this.onItemClick = function( item ){ $scope.onSelect( { item: item } ); };});

<ul> <li ng-repeat="item in items” values="item" ng-click="todoList.onItemClick( item )"> {{item.name}} </li></ul>

todoList.html

<todo-list items="todos" on-select="go( item )"></todo-list>

Folder Structuring!

Cons• Hard to Write• More Code• Everything Can’t Be Components• Few Benefits for Small Apps

• One Purpose• Maintainable• Modular• Composable

Pros

What’s Next in Angular?

AngularJS1.5 Beta

.component()

// before.directive('todo-item', function todoItem() { return { };});

// after.component('todo-item', { });

// before.directive('todoItem', function todoItem() { return { scope: {}, bindToController: { item: '=' } };});

// after.component('todoItem', { bindings: { item: '=' }});

// 1.4{ ... controller: 'SomeCtrl', controllerAs: 'something' ...}

// 1.5{ ... controller: 'SomeCtrl as something' ...}

The Core Concepts of Angular 2VICTOR SAVKIN

@Component({ selector: 'talk-cmp', directives: [FormattedRating, WatchButton, RateButton], templateUrl: 'talk_cmp.html'})class TalkCmp { @Input() talk: Talk; @Output() rate: EventEmitter; //...}

If you are familiar with Angular 1, you must be wondering “What happened to directives?”

“A component is a directive with a template.”

Articles

Imageshttps://www.flickr.com/photos/thorinside/https://www.flickr.com/photos/davehamster/https://www.flickr.com/photos/petergorges/https://www.flickr.com/photos/x-ray_delta_one/https://www.flickr.com/photos/marirn/https://www.flickr.com/photos/boedker/https://www.flickr.com/photos/kentamabuchi/https://www.flickr.com/photos/gerq/https://www.flickr.com/photos/capi_camagua/

https://www.youtube.com/watch?v=rI8tNMsozo0http://teropa.info/blog/2014/10/24/how-ive-improved-my-angular-apps-by-banning-ng-controller.htmlhttp://busypeoples.github.io/post/thinking-in-components-angular-js/http://toddmotto.com/exploring-the-angular-1-5-component-method/http://victorsavkin.com/post/118372404541/the-core-concepts-of-angular-2

THANK YOU