Thursday, 20 September, 2018 UTC
Summary
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.
If you’re a Dart developer, at the date there are only two big ones to worry about: The Angular 2 application framework and the Polymer web composing library.
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.
The Basics?
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.
Docs
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.
Tic
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:
Shadow DOM
That first
<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,fitlayout, and vertical are also sector of iron-flex-layout.What’s a <main-app>?
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
Component BreakdownWhen 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-header-panel> or <paper-material>, and some are a factor you’ll build clearly for your app, like <board-view> and.<message-bar>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.
Stay Organized
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.HTML
Angular 2 integral views are built with HTML, but they’re not full HTML files. Because they lack most of the core nodes like
<html>, <head>, and <body>, they’re often referred to as partials.Create a new HTML file in lib/views/main_app called main_app.html:
lib/views/main_app/main_app.html
Properties
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
The
<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.HTML
Like so alive with Angular 2 web components, this one needs a bit of HTML to define its look and layout.
lib/views/board_view/board_view.html
Making Moves
The
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.
HTML
lib/views/message_bar/message_bar.html
Conclusion
With Dart, Angular 2, and Polymer, you really can have it all! Angular’s data required is considerably easier to work with than Polymer’s version, so it’s beautiful to structure your app and data models using Angular. Model classes in Angular are PODOs (plain old Dart objects), which means they can be common between the client and the server if you’ve got Dart code constant server side. Polymer models have to be reflectable to JavaScript, which aid they’re only relevant for running where there is a JavaScript VM.
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.
See more:
The Best Sites to Learn Programming
Most Popular JavaScript Frameworks 2015 – 2016
The post Dart, Angular 2, and Polymer Together appeared first on I'm Programmer.