Angular Dart overview and code sample
•
3 likes•135 views
Dart (https://www.dartlang.org/) is a general-purpose programming language to build web, server, IoT and mobile applications. AngularDart (https://webdev.dartlang.org/angular) - also called Angular 2 for Dart or simply Angular - is a web app framework that focuses on productivity, performance, and stability. Hundreds of Google engineers use AngularDart to build the sophisticated, mission-critical apps that bring in much of Google’s revenue. Dart and AngularDart significantly increase the productivity of the developers. Slides from following meetup https://www.meetup.com/Luxembourg-Dart-Lang-Meetup/events/237781037/
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Angular Dart overview and code sample
Similar to Angular Dart overview and code sample (20)
More from Stéphane Este-Gracias
More from Stéphane Este-Gracias (9)
Recently uploaded
Recently uploaded (20)
Angular Dart overview and code sample
- 1. ANGULAR DART STÉPHANE ESTE-GRACIAS - 15/03/2017
- 2. ANGULAR DART THANKS TO NYUKO.LU REYER.IO
- 3. INTRODUCTION
- 4. ANGULAR DART - INTRODUCTION ANGULAR DART: ORIGINS ▸ Open Source Software under a MIT license ▸ Mainly developed by Google engineers ▸ Pitfall and best practices from AngularJS 1.x ▸ AngularDart 1.5 was the sandbox for AngularJS/Dart 2.x ▸ AngularDart 2.x now
- 5. ANGULAR DART - INTRODUCTION ANGULAR DART: GOALS ▸ Help developers build ▸ Web Applications ▸ Productivity ▸ Write less code Google teams report 2x productivity ▸ Performance ▸ Stability
- 7. ANGULAR DART - GETTING STARTED INSTALL ANGULAR DART ON YOUR FAVORITE PLATFORM ▸ Install Dart on MacOS, Linux Ubuntu/Debian, Windows ▸ Install an IDE ▸ Recommended: WebStorm ▸ Dart Plugins available for ▸ Atom, Sublime Text 3, Visual Studio Code, Emacs, Vim
- 8. OVERVIEW
- 9. ANGULAR DART - OVERVIEW SYMBOLS ▸ () parentheses ▸ [] square brackets ▸ {} curly brackets ▸ <> angle brackets ▸ {{}} moustache
- 10. ANGULAR DART - OVERVIEW DART’S WEB STACK ANGULAR DART COMPONENTS ANGULAR DART DART CORE LIBRARIES DART ECOSYSTEM DART LANGUAGE
- 11. ANGULAR DART - OVERVIEW BUILDING BLOCKS (1/2)
- 12. ANGULAR DART - OVERVIEW BUILDING BLOCKS (2/2) ▸ Module ▸ Metadata / Annotation / Decorator ▸ Template ▸ Directive ▸ View ▸ Component ▸ Data Binding ▸ Service ▸ Dependency Injection ▸ Injector ▸ Provider ▸ Bootstrapping
- 13. ANGULAR DART - OVERVIEW MODULE ▸ Module refers to a Dart compilation unit ▸ Library (i.e. set of files in your application package) ▸ If Dart file has no library or part directive, then that file itself is a library ▸ Package (i.e. shared set of libraries) ▸ e.g. angular2, angular2_components packages
- 14. ANGULAR DART - OVERVIEW METADATA / ANNOTATION / DECORATOR ▸ Metadata refers to a Dart metadata annotation ▸ Begins with the character @ ▸ Followed by either a reference to ▸ a compile-time constant such as Component, Directive, Input, Output… ▸ or a call to a constant constructor ▸ Metadata tells Angular how to process the annotated item
- 15. ANGULAR DART - OVERVIEW DIRECTIVE ▸ Template are dynamic. Angular transforms the DOM according to the instructions given by directives ▸ Directive is a Dart class with @Directive annotation ▸ There are three kinds of directives in Angular: ▸ Components with @Component annotation are building blocks of an Angular application ▸ Attribute directives change the appearance or behaviour of a DOM element ▸ Structural directives alter layout by adding, removing, and replacing elements in DOM
- 16. ANGULAR DART - OVERVIEW VIEW ▸ View is a portion of the screen that ▸ Displays information ▸ Responds to user actions such as clicks, mouse moves and keystrokes ▸ Contains other views ▸ Angular renders a view under the control of one or more Directives ▸ Often convenient to refer to a Component as a View ▸ Any Views might be loaded and unloaded dynamically ▸ Typically under the control of a router
- 17. ANGULAR DART - OVERVIEW COMPONENT ▸ Directive with an embedded view are called Component ▸ Component is a Dart class with @Component annotation ▸ So it’s a dart class responsible for ▸ Exposing data to a view ▸ Handling most of the view’s display ▸ Handling user-interaction logic ▸ Can be built with input parameters identified with @Input annotation on property type ▸ Can emit event identified with @Output annotation on event’s property ▸ Similar to “controller” or “view-model” in MVC / MVVM design pattern
- 18. ANGULAR DART - OVERVIEW TEMPLATE ▸ Template is a chunk of HTML that includes ▸ Data bindings ▸ Directives ▸ Other Components
- 19. ANGULAR DART - OVERVIEW DATA BINDING ▸ Data binding enables ▸ Data to flow from Component to DOM and vice-versa ▸ Possible data bindings are ▸ Interpolation ▸ Property / Event / Attribute / Class / Style binding ▸ Two-way data binding
- 20. ANGULAR DART - OVERVIEW SERVICE ▸ Service is a class with a focused purpose ▸ Separates data and/or logic from Views or Components ▸ Encapsulates any value, function, or feature that your application needs ▸ e.g. logging service, data service, application configuration…
- 21. ANGULAR DART - OVERVIEW DEPENDANCY INJECTION (DI) ▸ Supplies instance of a class with fully-formed “dependencies” ▸ A Provider is a recipe for creating new instances of a “dependency” ▸ An Injector maintains a cache of previously created service instances ▸ To use DI, register the Provider’s “dependency” ▸ when bootstrapping the Application ▸ or in the Component metadata
- 22. ANGULAR DART - OVERVIEW BOOTSTRAPPING ▸ Bootstrapping consists on ▸ An application's top level "root" Component i.e. first Component that is loaded for the application by convention, AppComponent ▸ and optionally registers service Providers with DI
- 23. ANGULAR DART - OVERVIEW OTHERS ▸ Template expression ▸ Pipes ▸ Router ▸ Routing component, RouterOutlet ▸ …
- 24. ANGULAR DART - OVERVIEW WRAP UP ANGULAR DART COMPONENTS ANGULAR DART DART CORE LIBRARIES DART ECOSYSTEM DART LANGUAGE
- 25. CODE SAMPLE
- 26. ANGULAR DART - CODE SAMPLE REMINDER: NOTATIONS ▸ PascalCase ▸ Class names (e.g. AppComponent) ▸ camelCase ▸ Function, property, and method names (e.g. ngOnInit, updateMessage) ▸ snake_case ▸ Dart package names and filenames (e.g. my_app / app_component.dart) ▸ dash-case ▸ Directive selectors (e.g. my-app)
- 27. ANGULAR DART - OVERVIEW COMPONENT / TEMPLATE / DIRECTIVE / BOOTSTRAP / ROOT INJECTOR / SERVICE import 'package:angular2/platform/browser.dart'; import 'package:hello/app_component.dart'; import 'package:hello/message_service.dart'; void main() { bootstrap(AppComponent, [MessageService]); } import 'package:angular2/core.dart'; @Injectable() class MessageService { String _message = 'Hello message'; String get message => _message; set message(String value) => _message = value; } web/main.dart lib/message_service.dart lib/app_component.dart import 'package:angular2/core.dart'; import 'home_component.dart'; @Component( selector: 'my-app', template: ''' <h1>Hello {{name}}</h1> <my-home></my-home> ''', directives: const [HomeComponent]) class AppComponent { var name = ’Angular'; }
- 28. ANGULAR DART - CODE SAMPLE COMPONENT / TEMPLATE / SERVICE import 'package:angular2/core.dart'; import 'message_service.dart'; @Component( selector: 'my-home', templateUrl: 'home_component.html', ) class HomeComponent implements OnInit { final MessageService _messageService; String text = 'This is the about home text'; String message; List<String> list = ["A", "B", "C"]; HomeComponent(this._messageService); ngOnInit() => message = this._messageService.message; String getMessage() => message; String updateMessage(String newMessage) => _messageService.message = newMessage; } lib/home_component.dart lib/home_component.html <h2>{{text}}</h2> <p>{{getMessage()}}</p> <li *ngFor="#item of list"> <ul>{{item}}</ul> </li>
- 29. TEMPLATE
- 30. ANGULAR DART - TEMPLATE DATA BINDING - STRINGS ▸ Binds text content to an interpolated string expression (e.g. function, property, methods…) ▸ <p>Hello {{expression}}</p> ▸ Binds a property to an interpolated string expression ▸ <div title="Hello {{expression}}"> ▸ Equivalent to <div [title]="'Hello' + expression">
- 31. ANGULAR DART - TEMPLATE DATA BINDING - PROPERTY / ATTRIBUTE / CLASS / STYLE ▸ Binds property value to the result of expression ▸ <input [value]=“expression"> ▸ Binds attribute role to the result of expression ▸ <div [attr.role]="expression"> ▸ Binds the presence of the CSS class my-class on the element to the truthiness of the expression ▸ <div [class.my-class]="expression"> ▸ Binds style property width to the result of expression expression in pixels. Units are optional. ▸ <div [style.width.px]="expression">
- 32. ANGULAR DART - TEMPLATE DATA BINDING - EVENTS / TWO-WAY DATA BINDING ▸ Calls method onClick when a click event is triggered on this button element (or its children) and passes in the event object. ▸ <button (click)=“onClick($event)"> ▸ Sets up two-way data binding. ▸ <my-cmp [(title)]="name"> ▸ Equivalent to <my-cmp [title]="name" (titleChange)="name=$event">
- 33. ANGULAR DART - TEMPLATE DATA BINDING - STRUCTURE ▸ Creates a local variable movieplayer that provides access to the video element instance in data- binding and event-binding expressions in the current template. ▸ <video #movieplayer ...> <button (click)="movieplayer.play()"> </video> ▸ The * symbol turns the current element into an embedded template. ▸ <p *myUnless="myExpression">...</p> ▸ Equivalent to <template [myUnless]=“myExpression"><p>...</p></template> ▸ Used by builtin directives such as ngIf, ngFor
- 34. ANGULAR DART - TEMPLATE BUILTIN DIRECTIVES - NGIF / NGFOR ▸ Available using platform_directives in pubspec.yaml ▸ transformers: - angular2: platform_directives: - 'package:angular2/common.dart#COMMON_DIRECTIVES' ▸ Removes or recreates a portion of the DOM tree based on the expression. ▸ <section *ngIf="expression"> ▸ Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list. ▸ <li *ngFor="#item of list"> ▸ <li *ngFor="let item of list"> ▸ Others builtin directives ngSwitch, ngClass, ngStyle, ngTemplateOutlet
- 36. ANGULAR DART - COMPONENT LIFECYCLE HOOKS GOALS ▸ Allow us to perform custom logic at various stages of a component's life ▸ Data isn't always immediately available in the constructor ▸ Implemented as class methods on the Component class
- 37. ANGULAR DART - COMPONENT LIFECYCLE HOOKS LIFECYCLE HOOKS METHODS ▸ ngOnChanges() Called after every change to input properties and before processing content or child views. ▸ ngOnInit() Called after the constructor, initialising input properties, and after the first call to ngOnChanges. ▸ ngOnDestroy() Called once, before the instance is destroyed. ▸ ngDoCheck() Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check. ▸ ngAfterContentInit() Called after ngOnInit when the component's or directive's content has been initialized. ▸ ngAfterContentChecked() Called after every check of the component's or directive's content. ▸ ngAfterViewInit() Called after ngAfterContentInit when the component's view has been initialized. Applies to components only. ▸ ngAfterViewChecked() Called after every check of the component's view. Applies to components only.
- 38. CODE LABS
- 39. ANGULAR DART - CODE LABS DART + ANGULAR DART - CODE LABS ▸ https://codelabs.developers.google.com/codelabs/ng2-dart ▸ Errata ▸ Step 8 const _namesPath = 'https://www.dartlang.org/f/piratenames.json'; ▸ Build & Deploy for production ▸ $ pub build
- 40. COMMUNITY
- 41. ANGULAR DART - COMMUNITY EVENTS ▸ Dart Events https://events.dartlang.org ▸ Dart Developper Summit https://events.dartlang.org/2016/summit/ https://www.youtube.com/playlist?list=PLOU2XLYxmsILKY- A1kq4eHMcku3GMAyp2 ▸ Meetup Luxembourg Dart Lang https://www.meetup.com/Luxembourg-Dart-Lang-Meetup/
- 42. ANGULAR DART - COMMUNITY USEFUL LINKS ▸ AngularDart website https://webdev.dartlang.org/ ▸ Questions on StackOverflow http://stackoverflow.com/tags/angular-dart ▸ Chat on Gitter https://gitter.im/dart-lang/angular2 ▸ Source code on Github https://github.com/dart-lang/angular2
- 43. Q&A