Introducing the Angular 2 Starter Project by Wijmo

Posted May 5, 2016

Guest post by Chris Bannon, Project Manager at Wijmo, an Angular Attack Partner

Wijmo has been providing comprehensive support of the Angular framework since day one. And now we’ve extended it to the latest version of the framework - Angular 2. The goal of our components, and this Starter Project, is to save time during development.

We hope this Starter Project will help you jump start your application for the Angular Attack contest.

This Starter Project is a true Angular 2 application. It includes all of the basics of an Angular 2 app. It also uses Wijmo components for Angular 2, which are designed to represent Wijmo controls in Angular 2 application markup.

Included in the project:

  • Material Design theme (layout and style)
  • Multiple pages (Components)
  • Navigation menu
  • Wijmo components: FlexGrid, FlexChart, BulletGraph, Input
  • Data Service with mock data

Visit wijmo.com to access Wijmo 5 documentation.

Download to Get Started

Download the source code for the Starter Project to jump start your application.

Try it! Test out the Starter Project online.

Application Views

The Starter Project includes the following pages. These are included in the src/components folder. They are linked to from the src/app.html document. And they are routed from the src/App.ts class. You can copy these pages to create your own or modify them to your liking.

Intro Page

The introduction page includes some simple markup and explanation of the app itself. Files: src/components/introCmp.html, src/components/IntroCmp.ts

Grid Page

The grid page includes the Wijmo FlexGrid, with columns defined in markup and two custom cell templates.

Files: src/components/gridCmp.html, src/components/GridCmp.ts

Dashboard Page

The dashboard page includes the Wijmo FlexChart and BulletGraph that display fictitious sales data.

Files: src/components/dashboardCmp.html, src/components/DashboardCmp.ts

Form Page

The form page includes a variety of Material Design Lite elements as well as Wijmo Input controls and a Radial Gauge. This page gives you an idea of the different UI controls available to build a form.

Files: src/components/formCmp.html, src/components/FormCmp.ts

Running the App

We use Visual Studio in our team, so you’ll notice that the Starter Project contains VS solution and project files. However, you do not need Visual Studio to run the Starter Project.

Use without Visual Studio

  • Install NodeJS https://nodejs.org/, if not installed yet, which is bundled with NPM package manager.
  • Run NodeJS command prompt.
  • Execute the following commands through command prompt:
    • cd "" (where is the one where the package.json file is located.)
    • npm install (which installs angular2 and related modules in the sample's node_modules folder)
  • After completing the above steps, execute the following command in order to run the sample:
    • npm start (which will run the lite-server web server and will open the sample in the default browser)
  • This command also runs the TypeScript compiler in watch mode that allows you to modify the .ts files and get their compiled .js versions automatically.

Visual Studio 2015 Users

  • Make sure that you have installed Visual Studio 2015 Update 1 or above.
  • Simply open the VS solution and run the project.

Visual Studio 2013 Users

Start Building

Download the source code for the Starter Project to save time while developing your application for the Angular Attack competition.

And the Wijmo team wishes good luck to everyone competing in Angular Attack!