There’s a lot of distraction surrounding all the client-side frameworks and libraries available to web developers these days, cause many blog posts full of charge, which in turn result in posts objecting about the complaints.
Well, the good news is that you don’t have to appoint! You can have it all. In this tutorial, you’ll build a simple Tic-Tac-Toe game. It will be an Angular 2 application, but you have to access to the fantastic component collections from Polymer.
This is a middle tutorial, so we won’t spend a lot of time covering Dart, HTML, or CSS basics, instead focusing on using Angular 2 and Polymer to build apps. For info on how you can set up an engaged Dart coding climate and a quick word on Polymer Dart, glance through the first few part of Polymer Dart Code Lab: Your First Elements.
We all like reading docs, don’t we? Well, they may certainly come in handy. Follow these links for in-deep knowledge:
Step 1: Create Your Project
You can access Stagehand on the command line or your favorite IDE/editor to create your project. Whatever you wish, start off by making an Angular 2 application or, for advanced users, I’ll give you what you need to start from a mark.
To match the tutorial’s pubspec.yaml and package imports, you should name your project tic_tac_toe.
Step 2: Manage Your Dependencies
If you created an Angular 2 project, some of your pubspec.yaml file will already be correct, but you’ll want to add Polymer to it.
As you’d assume, Angular 2 and Polymer are both in there but note the
polymer_elements addiction. That makes all of the Polymer element collections available to your app.
Step 3: Index
Component-based Dart web apps don’t regularly do much in index.html. Make yours look like this:
<script> tag forces Polymer to use Shadow DOM by default. When you fuse things up with Angular 2 components, you don’t want to play about with probably incompatible simulation modes.
Iron Flex Layout
With Polymer’s iron-flex-layout enjoyment classes, it’s easy to make your app fill the browser’s exhibit area (
<body class="fullbleed">). The polymer provides classes that are handy casing around the CSS flexbox rules. The classes,
vertical are also sector of iron-flex-layout.
It’s a brand new HTML element that you’re going to create using Angular 2! Exciting, right? Even your application itself will be a basic. Not sure why components are cool? Read Why Web Components? for a reader.
Sideline: Component Breakdown
When writing an app testing components, you want to think about how to perfect break down your function into encapsulated parts. Some of the components you need will have been manufactured by others, such as
<paper-material>, and some are a factor you’ll build clearly for your app, like
Step 4: Main
All Dart programs begin with the
main() function, and Angular apps are no omission. If you created your task with Stagehand, you’ll already have a main.dart file, but if you don’t, you’ll want to create one in your project’s web folder. In either case, use this code for that file:
Step 5: More Folders and a Data Model
Any good Dart project handling the canonical Dart package format. If you created your project with Stagehand, it’s all there.
If you don’t have one previously, create a lib folder in your project’s root catalog. Inside it, you should create two more folders: model and views.
A Data Model for Tic-Tac-Toe
We won’t go into any article on how this class entirely (remember, concentrate on Angular and Polymer), save to point out that it’s a good picture to keep your model data free from your views.
Step 6: Main App
To create the
<main-app> component with Dart, you need an HTML file and a Dart file. The
<main-app> element is an aspect component, so add a main_appfolder inside lib/views.
Angular 2 integral views are built with HTML, but they’re not full HTML files. Because they lack most of the core nodes like
<body>, they’re often referred to as partials.
Create a new HTML file in lib/views/main_app called main_app.html:
The handful of member variables stated at the top of the class involve the view-model.
board: Typed as a TTTBoard, this property holds an instance of the game model data.
currentPlayer: Typically “X” or “O”.
interfaceEnabled: When the game is over, no more moves should be allowed.
boardSize: The width/height of the Tic-Tac-Toe board in pixels.
message: Any message that should be displayed to the user.
Step 7: The Board Component
<board-view> element will be someone else view component, of course, so go earlier and create a folder to house its files: lib/views/board_view.
Like so alive with Angular 2 web components, this one needs a bit of HTML to define its look and layout.
squareSelected() method is called at any time a square on the board is clicked, and if appropriate, it handles building a move in the model and checking for a champion or a tie condition.
Step 8: The Message Bar
You’ll add one more very easy component to keep the players inform of what’s going on. Create a message_bar folder in lib/views to grip the component’s files.
But Polymer has so many handy components ready to use right now, plus a full set of Material Design components, and you don’t need to miss out on the indicated.