Step 1: Get to Know the Software 0.11
In this step, you’ll download the code for the app, and you’ll familiarize yourself with both the app and the components you’ll be adding to it.
Get the app code
All the code for this codelab is in the
angular-examples/lottery GitHub repo.
- Go to the angular-examples/lottery repo page.
- Click Clone or download.
- Get the code, either by cloning the repo or by clicking Download ZIP.
Get familiar with the base app
The base app—the app you’ll be starting from—is in the
Get the base app’s dependencies. For example:
> cd 1-base > pub get
Use the tool of your choice to run the base app.
Play with the base app. It works, but it’s not pretty. Consider these issues:
- The app doesn’t adhere to Google’s Material Design guidelines.
- The buttons would be prettier and easier to understand if they had images.
- The user must scroll to see the whole UI.
- Settings are visible even when the user has no interest in changing them.
To fix the base app’s UI issues, you’ll need to modify most of its custom components. The following table describes each of the custom components in the app. You don’t need implement any other custom components; you’ll just modify these ones to use AngularDart Components in place of some of their vanilla HTML elements.
|Custom component||What it does|
||As the root of the app’s Angular component hierarchy, contains all the other components.|
||Presents an attractive, animated view of lottery wins and losses. This is the only component you won’t need to change.|
||Textually presents lottery wins and losses.|
||Displays the results of betting and investing.|
||Allows the user to change the app’s settings.|
||Displays help content.|
Get familiar with AngularDart Components
Think about how AngularDart Components might improve the app. The rest of this codelab leads you through making the following changes:
- Improving the progress bar by changing
- Adding small, pre-packaged images by changing text to
- Displaying small amounts of data in a more compelling way with
<input>elements to specialized components:
- Reimplementing settings to use expansion panels, to hide controls until they’re needed:
- Dividing the UI into three tabs — Simulation, Help, and
About — by putting most of the UI into three
<material-tab>components inside a