dart-archive · traceypowersg · Oct 24, 2013 · Oct 11, 2013 · Oct 11, 2013 · Oct 14, 2013
diff --git a/Chapter_01/index.html b/Chapter_01/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html ng-app>
+<head>
+    <title>Hello, World!</title>
+</head>
+<body>
+
+  <h3>Hello {{name}}!</h3>
+  name: <input type="text" ng-model="name">
+
+  <script type="application/dart" src="main.dart"></script>
+  <script src="packages/browser/dart.js"></script>
+</body>
+</html>
diff --git a/Chapter_01/main.dart b/Chapter_01/main.dart
@@ -0,0 +1,5 @@
+import 'package:angular/angular.dart';
+
+main() {
+  bootstrapAngular([new AngularModule()]);
+}
diff --git a/Chapter_01/pubspec.yaml b/Chapter_01/pubspec.yaml
@@ -0,0 +1,10 @@
+name: angular_dart_demo
+version: 0.0.1
+dependencies:
+  angular: 0.0.2
+    # git: https://github.com/angular/angular.dart.git
+    # git: https://github.com/mhevery/angular.dart.git
+
+  browser: any
+  js: any
+  unittest: any
diff --git a/Chapter_02/index.html b/Chapter_02/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html ng-app>
+<head>
+    <title>Chapter Two - A Simple Recipe Book</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+  <div recipe-book>
+    <h3>Recipe List</h3>
+    <ul>
+      <li class="pointer"
+          ng-repeat="recipe in ctrl.recipes"
+          ng-click="ctrl.selectRecipe(recipe)">{{recipe.name}}</li>
+    </ul>
+
+    <h3>Recipe Details</h3>
+    <div><strong>Name: </strong>{{ctrl.selectedRecipe.name}}</div>
+    <div><strong>Category: </strong>{{ctrl.selectedRecipe.category}}</div>
+    <div><strong>Rating: </strong>{{ctrl.selectedRecipe.rating}}</div>
+    <div>
+      <ul>
+        <li ng-repeat="ingredient in ctrl.selectedRecipe.ingredients">
+          {{ingredient}}
+        </li>
+      </ul>
+    </div>
+    <div><strong>Directions: </strong>{{ctrl.selectedRecipe.directions}}</div>
+  </div>
+
+  <script type="application/dart" src="main.dart"></script>
+  <script src="packages/browser/dart.js"></script>
+</body>
+</html>
diff --git a/Chapter_02/main.dart b/Chapter_02/main.dart
@@ -0,0 +1,75 @@
+import 'package:angular/angular.dart';
+
+/* Use the NgDirective annotation to indicate that this class is an
+ * Angular Directive. The compiler will instantiate the directive if
+ * it finds it in the DOM.
+ *
+ * The selector field defines the CSS selector that will trigger the
+ * directive. It can be any valid CSS selector which does not cross
+ * element boundaries.
+ *
+ * The publishAs field specifies that the directive instance should be
+ * assigned to the current scope under the name specified.
+ *
+ * The directive's public fields are available for data binding from the view.
+ * Similarly, the directive's public methods can be invoked from the view.
+ */
+@NgDirective(
+    selector: '[recipe-book]',
+    publishAs: 'ctrl')
+class RecipeBookController {
+
+  List recipes;
+  RecipeBookController() {
+    recipes = _loadData();
+  }
+
+  Recipe selectedRecipe;
+
+  void selectRecipe(Recipe recipe) {
+    selectedRecipe = recipe;
+  }
+
+  List<Recipe> _loadData() {
+    return [
+      new Recipe('My Appetizer','Appetizers',
+          ["Ingredient 1", "Ingredient 2"],
+          "Some Directions", 1),
+      new Recipe('My Salad','Salads',
+          ["Ingredient 1", "Ingredient 2"],
+          "Some Directions", 3),
+      new Recipe('My Soup','Soups',
+          ["Ingredient 1", "Ingredient 2"],
+          "Some Directions", 4),
+      new Recipe('My Main Dish','Main Dishes',
+          ["Ingredient 1", "Ingredient 2"],
+          "Some Directions", 2),
+      new Recipe('My Side Dish','Side Dishes',
+          ["Ingredient 1", "Ingredient 2"],
+          "Some Directions", 3),
+      new Recipe('My Awesome Dessert','Desserts',
+          ["Ingredient 1", "Ingredient 2"],
+          "Some Directions", 5),
+      new Recipe('My So-So Dessert','Desserts',
+          ["Ingredient 1", "Ingredient 2"],
+          "Some Directions", 3),
+          ];
+  }
+}
+
+class Recipe {
+  String name;
+  String category;
+  List<String> ingredients;
+  String directions;
+  int rating;
+
+  Recipe(this.name, this.category, this.ingredients, this.directions,
+      this.rating);
+}
+
+main() {
+  var module = new AngularModule()
+    ..type(RecipeBookController);
+  bootstrapAngular([module]);
+}
diff --git a/Chapter_02/pubspec.yaml b/Chapter_02/pubspec.yaml
@@ -0,0 +1,10 @@
+name: angular_dart_demo
+version: 0.0.1
+dependencies:
+  angular: 0.0.2
+    # git: https://github.com/angular/angular.dart.git
+    # git: https://github.com/mhevery/angular.dart.git
+
+  browser: any
+  js: any
+  unittest: any
diff --git a/Chapter_02/style.css b/Chapter_02/style.css
@@ -0,0 +1,3 @@
+.pointer {
+  cursor: pointer;
+}
diff --git a/Chapter_03/index.html b/Chapter_03/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html ng-app>
+<head>
+    <title>Chapter Three - A Simple Recipe Book</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+  <div recipe-book>
+    <h3>Recipe List</h3>
+    <ul>
+      <li class="pointer"
+          ng-repeat="recipe in ctrl.recipes">
+          <rating max="5" rating="recipe.rating"></rating>
+          <span class="extra-space"
+                ng-click="ctrl.selectRecipe(recipe)">{{recipe.name}}</span>
+      </li>
+    </ul>
+
+    <h3>Recipe Details</h3>
+    <div ng-if="ctrl.selectedRecipe != null">
+      <div><strong>Name: </strong>{{ctrl.selectedRecipe.name}}</div>
+      <div><strong>Category: </strong>{{ctrl.selectedRecipe.category}}</div>
+      <div><strong>Rating: </strong>
+          <rating max="5" rating="ctrl.selectedRecipe.rating"></rating>
+      </div>
+      <div>
+        <ul>
+          <li ng-repeat="ingredient in ctrl.selectedRecipe.ingredients">
+            {{ingredient}}
+          </li>
+        </ul>
+      </div>
+      <div><strong>Directions: </strong>{{ctrl.selectedRecipe.directions}}</div>
+    </div>
+  </div>
+
+  <script type="application/dart" src="main.dart"></script>
+  <script src="packages/browser/dart.js"></script>
+</body>
+</html>
diff --git a/Chapter_03/main.dart b/Chapter_03/main.dart
@@ -0,0 +1,69 @@
+library recipe_book;
+
+import 'package:angular/angular.dart';
+import 'package:di/di.dart';
+
+part 'rating_component.dart';
+
+@NgDirective(
+    selector: '[recipe-book]',
+    publishAs: 'ctrl')
+class RecipeBookController {
+
+  List recipes;
+
+  RecipeBookController() {
+    recipes = _loadData();
+  }
+
+  Recipe selectedRecipe;
+
+  void selectRecipe(Recipe recipe) {
+    selectedRecipe = recipe;
+  }
+
+  List<Recipe> _loadData() {
+    return [
+      new Recipe('My Appetizer','Appetizers',
+          ["Ingredient 1", "Ingredient 2"],
+          "Some Directions", 1),
+      new Recipe('My Salad','Salads',
+          ["Ingredient 1", "Ingredient 2"],
+          "Some Directions", 3),
+      new Recipe('My Soup','Soups',
+          ["Ingredient 1", "Ingredient 2"],
+          "Some Directions", 4),
+      new Recipe('My Main Dish','Main Dishes',
+          ["Ingredient 1", "Ingredient 2"],
+          "Some Directions", 2),
+      new Recipe('My Side Dish','Side Dishes',
+          ["Ingredient 1", "Ingredient 2"],
+          "Some Directions", 3),
+      new Recipe('My Awesome Dessert','Desserts',
+          ["Ingredient 1", "Ingredient 2"],
+          "Some Directions", 5),
+      new Recipe('My So-So Dessert','Desserts',
+          ["Ingredient 1", "Ingredient 2"],
+          "Some Directions", 3),
+      ];
+  }
+}
+
+class Recipe {
+  String name;
+  String category;
+  List<String> ingredients;
+  String directions;
+  int rating;
+
+  Recipe(this.name, this.category, this.ingredients, this.directions,
+      this.rating);
+}
+
+main() {
+  var module = new AngularModule()
+    ..type(RecipeBookController)
+    ..type(RatingComponent);
+
+  bootstrapAngular([module]);
+}
diff --git a/Chapter_03/pubspec.yaml b/Chapter_03/pubspec.yaml
@@ -0,0 +1,10 @@
+name: angular_dart_demo
+version: 0.0.1
+dependencies:
+  angular: 0.0.2
+    # git: https://github.com/angular/angular.dart.git
+    # git: https://github.com/mhevery/angular.dart.git
+
+  browser: any
+  js: any
+  unittest: any
diff --git a/Chapter_03/rating_component.css b/Chapter_03/rating_component.css
@@ -0,0 +1,10 @@
+.star-off {
+  color: #6E6E6E;
+}
+.star-on {
+  color: #FACC2E;
+}
+.stars {
+  letter-spacing: -2px;
+  cursor: pointer;
+}
diff --git a/Chapter_03/rating_component.dart b/Chapter_03/rating_component.dart
@@ -0,0 +1,78 @@
+part of recipe_book;
+
+/* Use the NgComponent annotation to indicate that this class is an
+ * Angular Component.
+ *
+ * The selector field defines the CSS selector that will trigger the
+ * component. Typically, the CSS selector is an element name.
+ *
+ * The templateUrl field tells the component which HTML template to use
+ * for its view.
+ *
+ * The cssUrl field tells the component which CSS file to use.
+ *
+ * The publishAs field specifies that the component instance should be
+ * assigned to the current scope under the name specified.
+ *
+ * The map field publishes the list of attributes that can be set on
+ * the component. Users of this component will specify these attributes
+ * in the html tag that is used to create the component. For example:
+ *
+ * <rating max-rating="5" rating="mycontrol.rating">
+ *
+ * TODO: adopt new map naming conventions as soon as they're ready.
+ *   OLD:
+ *     'max' : '@.max',
+ *     'rating' : '=.rating'
+ *   NEW:
+ *     'max-rating' : '@maxRating',
+ *     'rating' : '=rating'
+ *
+ * The compnoent's public fields are available for data binding from the
+ * component's view. Similarly, the component's public methods can be
+ * invoked from the component's view.
+ */
+@NgComponent(
+    selector: 'rating',
+    templateUrl: 'rating_component.html',
+    cssUrl: 'rating_component.css',
+    publishAs: 'ctrl',
+    map: const {
+      'max' : '@.max',
+      'rating' : '=.rating'
+    }
+)
+class RatingComponent {
+  String _starOnChar = "\u2605";
+  String _starOffChar = "\u2606";
+  String _starOnClass = "star-on";
+  String _starOffClass = "star-off";
+
+  List<int> stars = [];
+
+  int rating;
+
+  set max(String value) {
+    stars = [];
+    var count = value == null ? 5 : int.parse(value);
+    for(var i=1; i <= count; i++) {
+      stars.add(i);
+    }
+  }
+
+  String starClass(int star) {
+    return star > rating ? _starOffClass : _starOnClass;
+  }
+
+  String starChar(int star) {
+    return star > rating ? _starOffChar : _starOnChar;
+  }
+
+  void handleClick(int star) {
+    if (star == 1 && rating == 1) {
+      rating = 0;
+    } else {
+      rating = star;
+    }
+  }
+}
diff --git a/Chapter_03/rating_component.html b/Chapter_03/rating_component.html
@@ -0,0 +1,7 @@
+<span class="stars"
+      ng-if="ctrl.rating != null"
+      ng-repeat="star in ctrl.stars"
+      ng-click="ctrl.handleClick(star)"
+      ng-class="ctrl.starClass(star)">
+  {{ctrl.starChar(star)}}
+</span>
diff --git a/Chapter_03/style.css b/Chapter_03/style.css
@@ -0,0 +1,7 @@
+.pointer {
+  cursor: pointer;
+}
+
+.extra-space {
+  padding-left: 10px;
+}
diff --git a/Chapter_04/categories.json b/Chapter_04/categories.json
@@ -0,0 +1,8 @@
+[
+  "Appetizers",
+  "Salads",
+  "Soups",
+  "Main Dishes",
+  "Side Dishes",
+  "Desserts"
+]