AngularDart Introduction
•
6 gefällt mir•3,382 views
The document discusses AngularDart, which is AngularJS implemented with the Dart programming language. It describes key Angular concepts like dependency injection, controllers, components, directives, filters and services. Components allow defining custom elements, controllers provide application logic, directives add logic to elements, and filters pipe and transform data. Services provide reusable code through dependency injection. The goal is a single framework that can be used with different programming languages like Dart.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie AngularDart Introduction
Ähnlich wie AngularDart Introduction (20)
Mehr von Nikolaus Graf
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
AngularDart Introduction
- 1. #dartlang
- 3. #dartlang ♡
- 4. AngularDart is AngularJS’ new sibling
- 5. “ ” #dartlang Brad Green Our goal is that there will be a single framework with your choice of language.
- 7. #dartlang Extend HTML <div ng-‐click=“ctrl.doSomething()”>Click Me</div> ! ! ! <my-‐calendar select-‐date=“2014-‐02-‐12”></my-‐calendar>
- 9. #dartlang Dependency Injection // hard coded dependency class SomeClass() { this.myObject = new MyClass(); } ! // dependency injection class SomeClass (MyClass myObject) { this.myObject = myObject; }
- 10. Built with Testing in Mind
- 12. #dartlang <!DOCTYPE html> <html ng-‐app> <head></head> <body> <script src=“packages/shadow_dom/shadow_dom.min.js"> </script> <script type="application/dart" src="main.dart"> </script> <script type="text/javascript" src=“packages/browser/ dart.js"> </script> </body> </html> index.html
- 13. #dartlang import 'package:angular/angular.dart'; @MirrorsUsed(override: '*') import 'dart:mirrors'; ! main() => ngBootstrap(); main.dart
- 15. #dartlang <!DOCTYPE html> <html ng-‐app> <head></head> <body> ! <h3>Hello {{name}}!</h3> Name: <input type="text" ng-‐model="name"> ! <script src=“packages/shadow_dom/shadow_dom.min.js"> </script> <script type="application/dart" src="main.dart"></ script> <script type="text/javascript" src=“packages/browser/ dart.js"> </script> </body> </html> index.html
- 18. #dartlang <div recipe-‐book> <ul> <li ng-‐repeat="recipe in ctrl.recipes"> {{recipe.name}} </li> </ul> </div> index.html
- 19. #dartlang class RecipeBookController { ! List<Recipe> recipes; ! RecipeBookController() { recipes = _loadData(); } ! List<Recipe> _loadData() { return [ new Recipe('My Appetizer', ["Ingredient 1", "Ingredient 2"]) ]; } } recipe_book.dart
- 20. #dartlang @NgController( selector: '[recipe-‐book]', publishAs: 'ctrl') class RecipeBookController { … recipe_book.dart
- 21. #dartlang class MyAppModule extends Module { MyAppModule() { type(RecipeBookController); } } ! main() { ngBootstrap(module: new MyAppModule()); } main.dart
- 24. “ ” #dartlang Eric Bidelman Shadow DOM gives us markup encapsulation, style boundaries, and exposes (to web developers) the same mechanics browsers vendors have been using to implement their internal UI. Shadow DOM
- 25. #dartlang Shadow DOM of a Video-Tag
- 26. #dartlang class RatingComponent { ! @NgTwoWay('rating') int rating; ! void handleClick(int value) { rating = value; } ! String renderCharacter(int index) { return index > rating ? "0" : "X"; } } rating_component.dart
- 27. #dartlang @NgComponent( selector: 'rating', templateUrl: 'rating_component.html', cssUrl: 'rating_component.css', publishAs: 'cmp' ) class RatingComponent { … rating_component.dart
- 28. #dartlang class MyAppModule extends Module { ! MyAppModule() { type(RecipeBookController); type(RatingComponent); } } ! main() { ngBootstrap(module: new MyAppModule()); } main.dart
- 29. #dartlang @NgController ! Application-specific logic Example: recipe-book ! @NgComponent ! Custom elements Example: rating ! @NgDirective ! Decorator that adds logic to existing elements Examples: tooltip, ng-class
- 31. #dartlang <li ng-‐repeat="recipe in ctrl.recipes | orderBy:'name'"> {{ name }} </li> index.html
- 32. #dartlang @NgFilter(name: 'categoryfilter') class CategoryFilter { call(recipeList, filterMap) { if (recipeList is List && filterMap is Map) { // filter for something here return recipeList.toList(); } } } category_filter.dart
- 33. #dartlang <li ng-‐repeat="recipe in ctrl.recipes | orderBy:'name' | categoryfilter:ctrl.categoryFilterMap"> {{ name }} </li> index.html
- 35. Services #dartlang ! Services are substitutable objects that are wired together using dependency injection. You can use services to organize and share code across your app. ! ! Angular for example provides a built-in service called the Http Service that handles making HTTP requests to the server. ! !