building angular apps using directives as components
TRANSCRIPT
![Page 1: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/1.jpg)
Web Components in
![Page 3: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/3.jpg)
WEB COMPONENTS
![Page 4: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/4.jpg)
MODULAR + CLEANER + SINGLE FOCUSED + REUSABLE
ITERATE FASTER
=
![Page 5: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/5.jpg)
The Future of Web Development
Custom Elements
Templates
HTML Imports
Shadow DOM
![Page 6: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/6.jpg)
<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>
![Page 7: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/7.jpg)
![Page 8: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/8.jpg)
DIRECTIVES
How Do You Make Web Components In Angular?
![Page 9: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/9.jpg)
Simple vs. Easy
![Page 10: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/10.jpg)
Rick Henly, 2012 RailsConf Keynote: Simplicity Matters
![Page 11: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/11.jpg)
Controllers are EASY
Directives are SIMPLE
![Page 12: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/12.jpg)
![Page 13: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/13.jpg)
![Page 14: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/14.jpg)
Controllers: ng-controller
• Out of Control Inheritance• Tightly Coupled• Globalish• Duplicate DOM
![Page 15: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/15.jpg)
$scope is JS’s Prototype Chain
![Page 16: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/16.jpg)
![Page 17: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/17.jpg)
![Page 18: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/18.jpg)
Controllers: ng-controller
![Page 19: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/19.jpg)
Effective Directive
1. Isolated Scope
2. HTML Template
3. A Controller
![Page 20: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/20.jpg)
<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>
![Page 21: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/21.jpg)
<todo-list items="todos" on-select="go( item )"></todo-list>
![Page 22: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/22.jpg)
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 } ); };});
![Page 23: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/23.jpg)
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 } ); };});
![Page 24: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/24.jpg)
<ul> <li ng-repeat="item in items” values="item" ng-click="todoList.onItemClick( item )"> {{item.name}} </li></ul>
todoList.html
![Page 25: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/25.jpg)
<todo-list items="todos" on-select="go( item )"></todo-list>
![Page 26: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/26.jpg)
Folder Structuring!
![Page 27: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/27.jpg)
Cons• Hard to Write• More Code• Everything Can’t Be Components• Few Benefits for Small Apps
![Page 28: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/28.jpg)
• One Purpose• Maintainable• Modular• Composable
Pros
![Page 29: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/29.jpg)
What’s Next in Angular?
![Page 30: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/30.jpg)
AngularJS1.5 Beta
.component()
![Page 31: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/31.jpg)
// before.directive('todo-item', function todoItem() { return { };});
// after.component('todo-item', { });
![Page 32: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/32.jpg)
// before.directive('todoItem', function todoItem() { return { scope: {}, bindToController: { item: '=' } };});
// after.component('todoItem', { bindings: { item: '=' }});
![Page 33: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/33.jpg)
// 1.4{ ... controller: 'SomeCtrl', controllerAs: 'something' ...}
// 1.5{ ... controller: 'SomeCtrl as something' ...}
![Page 35: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/35.jpg)
@Component({ selector: 'talk-cmp', directives: [FormattedRating, WatchButton, RateButton], templateUrl: 'talk_cmp.html'})class TalkCmp { @Input() talk: Talk; @Output() rate: EventEmitter; //...}
![Page 36: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/36.jpg)
If you are familiar with Angular 1, you must be wondering “What happened to directives?”
“A component is a directive with a template.”
![Page 37: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/37.jpg)
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
![Page 38: Building Angular Apps using Directives as Components](https://reader035.vdocuments.net/reader035/viewer/2022081520/587cfd4c1a28ab1e7e8b58d7/html5/thumbnails/38.jpg)
THANK YOU