building angular apps using directives as components
TRANSCRIPT
Web Components in
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