Friday, May 7, 2021
More

    Dart, Angular 2, and Polymer Together

    Must Read

    Programmerhttp://www.improgrammer.net
    We started this site to inspire young minds to motivate and encourage them towards Programming Language. In this site you will get programming tutorials, tech, programming facts, programming fun and programming blogs.

    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
    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 Breakdown
    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-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

    Latest Articles

    More Recipes Like This