Sample Project: Use Famo.us and Angular to Create a Mobile Application
This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible.
By the end of this project you will be able to:
- Understand how Angular works within the context of a Famo.us application
- Create smooth animations
My goal for this project to illustrate how easily you can create HTML5 / JS projects which work at near native speeds on mobile applications.
- The mobile applications runs on iOS and Android via Cordova
- The Windows 10 universal app runs natively on well, Windows 10
- This project can also be run as a hosted website, although I have it scaled best for mobile devices
- PC or Mac
- Web server
- Cross-platform test matrix (like a BrowserStack, IDE, or free virtual machines for EdgeHTML, the rendering engine for Microsoft Edge and hosted web app content on Windows 10).
- 1.Download the source from GitHub
- 2.Download & install a web server (I use MAMP on OS X, or the built-in IIS server with Visual Studio on Windows)
Opening the project
- 1.Start your web server
- 2.Navigate to famous-angular-Pokemon/app/
The project is designed to work on mobile devices, so use the mobile emulator in your browser to get the correct view. Here’s what it would look like on an iPhone 6 inside the emulator via the Chrome desktop browser (375×667):
How it works
Hitting the database
I pull all of the information from the PokeAPI, which has a well-documented API, but it’s missing images for each of the Pokémon. For the images, I just pull the name of the currently chosen pokemon and appending it to the end of this URL: http://img.pokemondb.net/artwork/. For example: http://img.pokemondb.net/artwork/venusaur.jpg will lead you to an image of Vanosaur. Nifty, right? Sadly, they do not have an API available.
Each time the user presses the Next button, a random number is generated between a min / max value that I’ve defined (say, 1-20), and it pulls a Pokémon from the database which matches that number. Here’s what it looks like:
Continue reading %Sample Project: Use Famo.us and Angular to Create a Mobile Application%