A book component in AngularDart
We already saw how to encapsulate a 3D book from Chapter 4, Developing a Mobile App with Dart, into a polymer.dart custom element. Now we'll do the same but in AngularDart now.
We can skip main.dart
, because there's nothing new for us there, and see <body>
in index.html
:
<!-- web/index.html --> <body> <p>angular: <input type="number" ng-model="elementsCount"></p> <shelf books-count="elementsCount"></shelf> <script type="application/dart" src="main.dart"></script> </body>
Note that we're setting ng-model
outside any component, so it'll be kept in the root scope, which is automatically set to <html>
. Also, we're using <input type="number">
, which tells AngularDart to convert the input from this field into an integer automatically.
The <shelf>
element has one custom attribute called books-count
, and we'll also use cssUrl
to set a custom CSS file for this Shadow DOM:
// lib/component...