Menu hamburger icon

Angular 2 for Onsen UI is here! 🚀

Onsen UI for Angular 2

It’s time to unveil the beta version of our Angular 2 components for Onsen UI. We have worked hard to bring you these components and hope you are as excited as we are!

Angular 2 has come a long way since it was released at ng-conf last year and is shaping up to be a powerful framework, both for creating traditional web apps and hybrid apps. We are proud to make our own contribution to the growing ecosystem of Angular 2.

These components are based on Onsen UI 2.0, which is a complete framework agnostic rewrite and reimplementation of the original Onsen UI components. We can’t wait to see what kind of amazing apps you will create!

We have created a new landing page where you can learn more about the Angular 2 components. We also added new docs for the Angular 2 directives to make it easy for you to get started.

If you want to take a look at some code right away, we have an extensive kitchen sink example using Webpack. Feel free to use this project as a starting point for you own apps.

Easy to use

One focus of Onsen UI has always been simplicity and ease of use. We want it to be as easy as possible to create pages and add navigation. We’ve had simplicity in mind when creating the Angular 2 components as well.

To use the Onsen UI directives in your Angular 2 app you just need to import the ONS_DIRECTIVES variable from the angular2-onsenui (available on npm) package. To install it you just need to do:

npm install --save-dev angular2-onsenui

Using the directives in a component is as easy as doing:

import {ONS_DIRECTIVES} from 'angular2-onsenui';

@Component({
  directives: [ONS_DIRECTIVES],
  ...
})

You are then able to use the components in your templates:

<ons-list>
  <ons-list-header>My Items</ons-list-header>
  <ons-list-item *ngFor="let item of items">
    {{item}}
  </ons-list-item>
</ons-list>

For people who have used Onsen UI 1 with AngularJS the tag names and attributes should be familiar. Of course we have added a bunch of new components for Onsen UI 2.0 that we believe will make building apps easier for you. For a list of all components and directives that are available you can take a look at the Onsen UI reference for Angular 2.

What’s new in Angular 2?

If you are coming from an AngularJS 1.x background there are some new concepts that you need to learn before getting started with Onsen UI development using Angular 2. Even though you can create Angular 2 apps using normal JavaScript we recommend you to use TypeScript since it will make your life a lot easier with things like annotations and static typing.

TypeScript is probably the biggest challenge when transitioning from AngularJS 1.x to Angular 2, especially if you are not used to statically typed languages. There are some other key differences as well. With Angular 2 everything is component based and things like controllers and the $scope variable are a thing of the past. We believe this is a good thing since it makes it a lot easier to structure and to reason about your app.

A good place to get started is the official Angular 2 tutorial where you learn how to create a simple app. If you are migrating apps from AngularJS 1.x to Angular 2 we also recommend you to take a look at the migration guide.

We love your feedback

The Angular 2 directives for Onsen UI are currently in beta. If you want to get your hands dirty and start using them today you are more than welcome but keep in mind that there might be some glitches and missing features. We are currently working on fixing these issues and would love to get your feedback while we’re doing it. Here are some resources that you can use if you get stuck or find a bug:

  • If you want to ask questions about using the framework please check out our Community forum
  • When you discover a bug or want to request a new feature you can open an issue on GitHub.
  • More than anything we love getting Pull requests that solve issues and add new features.

Let’s work together making Onsen UI a great library for creating hybrid apps with Angular!

Comments