Create a Mobile App Using and Angular

Create a Mobile App Using and Angular

I love
high-performance JavaScript, and I love sharing what I believe is its true
potential. In this tutorial, I want to focus on, which can allow you to
maintain a silky-smooth 60 frames per second while having fluid animations on
screen. does this by utilizing the CSS3 primitive -webkit-transform:
, which lets the framework compute the composite matrix and skip the
browser’s renderer. No plug-in, no download, no hack. By appending this to each
DIV, developers can render the composite matrix and go straight to the GPU.

I go
more in-depth when discussing the ins and outs of in this blogpost. Thanks to Zack Brown for all of his assistance with this! Let’s get started.

By the
end of this project you will be able to:

  • understand
    how Angular works within the context of a application
  • harness
    the true power of JavaScript and the good parts of HTML5
  • create
    smooth animations

My goal
for this project is to illustrate how easily you can create HTML5 and JavaScript projects
that work at near-native speeds on mobile applications.


  • The
    mobile application 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 which is best for mobile devices.


  • PC
    or Mac
  • Web
  • 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
    and install a web server (I use MAMP on OS X, or the built-in IIS server with Visual Studio on Windows).

Open the Project

  1. Start
    your web server.
  2. Navigate
    to famous-angular-Pokemon/app/.

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 (375x667):

Mobile app were creating displayed on iPhone 6 emulator

How It

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 Pokémon and append it to the end of this URL: For
example: will lead you to an image
of Vanosaur. Nifty, right? Sadly, they do not have an API available.

time the user presses the Next button, a random number
is generated between a min/max value that I've defined (say, 1 to 20), and it
pulls a Pokémon from the database that matches that number. Here's what it
looks like: returns a JSON object for
Bulbasaur. You can play with their API.

Through the Data

I then
loop through that JSON object and set the properties I find to variables
in Angular, using the $Scope object.

an example:

You may
notice that I also have a few other functions here, such as capitalizeFirstLetter, which
does exactly that. I wanted the abilities and type (e.g. poison, grass, flying)
to have the first letter capitalized, since they come back from the database in
all lowercase characters.

I also
loop through the abilities and push them to an ability object, which looks like this:

The database
also returns multiple types for certain Pokémon, such as Charizard, who is
flying as well as fire. To keep things simple, though, I only wanted to return
one from the database.

Drawing It to the Screen
has two waves of drawing content to the screen by creating surfaces, which are the elements that contain your text, images,

  • JavaScript
  • FA-Directives

didn't use JavaScript to draw the surfaces in this app. Instead I chose to use only FA (Famous-Angular) Directives, such as:

This is for the
name above the Pokémon on the front screen.

notice that the surface is wrapped by a fa-modifier. You can read about those in the documentation, but
they essentially adjust the properties of a surface, such as alignment, size,
and origin. It took me a while to wrap my head around the difference between
alignment and origin, so here's how I came to understand it.


This is the reference point on
any surface. If I want to draw a rectangle and move it around the screen, I
need to decide which point on that rectangle will be my starting point. The docs explain it well. The
values are laid out as follows:


This is a surface's location on
the screen. When you make changes to the alignment, it is using the origin as
the reference point to start from.

Angular Finally Comes In

here's where you can put all of your Angular skills and data binding to work
with the Angular implementation. If you're already experienced with
Angular, then it's not radically different here.

button appears on the first screen and simply pulls another Pokémon from the
database. All of the ng (Angular) directives you are familiar with are here,
such as ng-click. I have multiple functions
here. Notice that they are not comma-separated.

I am
also binding the value of $scope.nextBtn to {{nextBTn}} in HTML.

allow and Angular to work together, we need to include $ at the
top of our JavaScript file. Here's how you do it:


would a high-performance app be without animations? is packed with
them, which makes it easy to get started. Here's one for animating the image on
the front.

are several curve types you can use here. Checkout the docs for more info. I'm
also using a callback function, returnToOrigSize, to have the image grow
and then shrink back to the original size.

of Frustration

I ran
into a few issues along the way.

FA-Directives Have Their Properties Set as Strings

If you
have a spelling error, the app will just use the default values for that
property. This snagged me several times, which is why you see I set all of my
properties as an object, such as align.frontName, to
make it easier to read.


FA-Directives you add multiple classes as strings and they are not comma-separated.

If you
try to add classes by creating surfaces in JavaScript, you pass in an array of

It took
me a while to understand that, as I only found the solution in thisthread.
+ Angular Seems to Be Deprecated (For Now)

through this project, I saw that was working on an improved version of
the framework that includes Mixed Mode. + Angular doesn't
take advantage of these additions (yet) at least. That doesn't mean FA is going
anywhere, as it works perfectly fine—it's just that you won't be getting the
latest features.


More Hands-On With JavaScript

This article is
part of the web development series from Microsoft tech evangelists on practical
JavaScript learning, open-source projects, and interoperability best practices, including Microsoft
browser and the new EdgeHTML rendering engine

We encourage
you to test across browsers and devices including Microsoft Edge—the default
browser for Windows 10—with free tools on dev.modern.IE:

In-depth tech
learning on Microsoft Edge and the Web Platform from our engineers and

More free
cross-platform tools and resources for the web platform:

Source: Tuts Plus

About the Author


  1. … [Trackback]

    […] Read More here: […]

  2. … [Trackback]

    […] There you will find 67024 more Infos: […]

  3. … [Trackback]

    […] Read More Infos here: […]

  4. … [Trackback]

    […] Find More Informations here: […]

  5. … [Trackback]

    […] Read More: […]

  6. … [Trackback]

    […] Read More: […]

  7. lawyer says:

    … [Trackback]

    […] Read More: […]

  8. … [Trackback]

    […] There you will find 92484 more Infos: […]

  9. eshopex says:

    … [Trackback]

    […] Read More here: […]

  10. … [Trackback]

    […] Read More here: […]