Creating a Pokémon hybrid app with Angular 2 and Onsen UI
A couple of months ago we published an article on how to create a Pokedex application using Angular 2. Since then, the stable version of Angular 2 has been released and we have released the RC version of our Angular 2 bindings.
In this article we will use Onsen UI 2 and Angular 2 to create a simple mobile Pokedex app. We will use some of the code from the previous article, but we will integrate it with Onsen UI. We will also take a look at the Monaca CLI, which is a great tool for creating, debugging, and developing apps with Angular 2 and Onsen UI.
With the Monaca CLI you get access to several templates that can serve as starting points for your own apps. The CLI is using Webpack to build and package your app so you don’t have to set it up yourself. The Monaca CLI also integrates with the Monaca Debugger so you can test and debug your apps in real devices.
This app is using the great PokéAPI. The API contains all the necessary information to create a complete Pokedex app, with information from all the Pokemon games. Since this is just a sample app, we will only use a small part of the information available.
You can try out the app below:
The source code for the app is available in this GitHub repo.
Installing the Monaca CLI
This app was created using the Monaca CLI. It’s a command line tool that can be used to create, debug and build hybrid apps. It is available on NPM so you can install it with the following command:
[sudo] npm install -g monaca
Or, if you are using
yarn you can install it like this:
yarn global add monaca
When the program is successfully installed, you can run
monaca -v to see the current version:
$ monaca -v 2.1.6
Creating an application
Creating an app with the Monaca CLI is very simple. All you need to do is to navigate to the directory where you want to create your app and run:
monaca create my-app
You can now see what kind of templates are available.
Since we are creating an app with Angular 2 and Onsen UI we will select that and press enter.
In the next screen we select what kind of navigation pattern the app will use. Here we can create an app with tabs, a swipeable side menu or stack navigation. The app we are creating will use stack navigation so we select the Onsen UI V2 Angular 2 Navigation template.
If we press enter again the application will be created for us and all the dependencies will be installed. This might take a while.
Now enter the directory:
To preview the app you can use the following command:
This will start a web server. The app will be automatically rebuilt every time a change occurs so it’s recommended to always have this server running so we can see the changes instantly.
Creating the app
We will put all our code in the
src/app folder. This is where the Angular 2 components, services, etc. are located.
The Monaca CLI has created a very simple app for us where we can push and pop pages from the stack. This stack navigation is made possible with the
<ons-navigator> component which is rendered by the
MyApp component in the
We need to add some behavior to this component. This component will render the master page of the app which contains a list of Pokemon fetched from the PokeAPI. When a Pokemon is clicked we will push a new component called
DetailPage to the page stack that displays some additional information about the Pokemon.
ngOnInit method is called when the component is initialized and we use it to load the first 20 Pokemon from the API using the
loadMore() method. This method is also called when the user clicks a button at the bottom of the list.
constructor method two services are injected. The
PokedexService is used to fetch information from the Pokemon API and the
CaughtPokemonService is a simple service that keeps track of the Pokemon that have been caught using a
To push a page to the stack the
ViewChild decorator is used to get a reference to the
The template in
app.html looks like this:
What this does is that it will render the
MasterPage component as the first page in the navigator stack.
The component that displays the details for a Pokemon is also quite simple.
One important note is how the parameters that were passed in the
push() method of the
MasterPage component are retrieved. This is done by injecting the
Params service in the constructor:
This is the code for the whole component. It can be found in the
The template will display some information about the Pokemon and a checkbox that will call the
onChange() method when toggled. The template code is in the
A service is an object that can be shared among all your components. It is often used to fetch and store data. In our app, we will create a service that fetches data from the Pokémon API as well as a service that maintains a list of all the Pokemon that have been caught.
CaughtPokemonService uses the
CaughtPokemonService code is in the
In addition to maintaining a set of Pokemon IDs it will also save the list to
localStorage so the app can remember even if it is restarted or if the page is reloaded.
We already created a simple
PokedexService in the previous blog post. This time it has been extended to also fetch some additional information that is displayed on the details page:
In this article we have created a very simple Pokedex app using Angular 2 and Onsen UI 2. Even if this Pokedex app doesn’t display a lot of information, we hope you can see how it could be expanded into a more complete app by adding more pages to the navigator and adding more information from the PokeAPI. The Angular 2 bindings for Onsen UI are currently in RC stage but we are getting closer to a stable version.
Onsen UI is an open source library used to create the UI of hybrid apps. You can find more information on our GitHub page. If you like Onsen UI, please don’t forget to give us a star! ★★★★★