Create a Mobile App Using Famo.us and Angular_ part 2(end)

Where Angular Finally Comes In

Now 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.

1. <!-- Next button -->
2. <fa-modifier
3.     fa-origin    ="origin.center"
4.     fa-align     ="align.nextBtn"
5.     fa-size      ="size.btn"
6.     fa-scale     ="scale.nextBtn.get()"
7.     fa-translate ="trans.topLayer">
8.     <fa-surface
9.         class    ="one-edge-shadow center-align next-btn"
10.         ng-click ="getPokemon(); nextBtnPressAnim(); frontImgAnim()">
11.         {{nextBtn}}
12.     </fa-surface>
13. </fa-modifier>

This 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.

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

1. angular.module('famousAngularStarter')
2.   .controller('PokemonCtrl', ['$scope', '$http', '$famous', function ($scope, $http, $famous) {
3.  
4.     /* Inject famo.us to DOM */
5.     var View           = $famous['famous/core/View'                 ];
6.     var Modifier       = $famous['famous/core/Modifier'             ];
7.     var Surface        = $famous['famous/core/Surface'              ];
8.     var Transform      = $famous['famous/core/Transform'            ];
9.     var Transitionable = $famous['famous/transitions/Transitionable'];
10.     var Timer          = $famous['famous/utilities/Timer'           ];

Animations

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

1. /*
2.  * @OnClick: Sets the opacity and scale for the front image when user clicks "Next" btn
3.  * 1) Turns opacity invisible quickly before returning to original opacity, revealing new Pokemon
4.  * 2) Turns scale down before quickly turning it back up to original size
5.  */
6. $scope.frontImgAnim = function() {
7.   var hideDuration   =  200;
8.   var returnDuration = 1300;
9.  
10.   $scope.opac.imgFront.    set(0,           {duration: hideDuration,   curve: "easeIn"},
11.     function returnToOrigOpacity() {
12.       $scope.opac.imgFront.set(1,           {duration: returnDuration, curve: "easeIn"})
13.     }
14.   );
15.   $scope.scale.imgFront    .set([0.5, 0.5], {duration: hideDuration,   curve: "easeIn"},
16.     function returnToOrigSize() {
17.       $scope.scale.imgFront.set([0.8, 0.8], {duration: returnDuration, curve: "easeIn"})
18.     }
19.   )
20. };

There 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.

Points of Frustration

I ran into a few issues along the way.

FA-Directives Have Their Properties Set as Strings

1. fa-origin    ="origin.center"

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.

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

1. <fa-surface
2.     class    ="one-edge-shadow center-align next-btn"
3.     ng-click ="infoBtnPressAnim(); flip()">
4.     {{infoBtnText}}
5. </fa-surface>

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

1. var logo = new Surface({
2.     properties: {
3.          ...
4.     },
5.     classes: ['backfaceVisibility, class-two'] 
6. });

It took me a while to understand that, as I only found the solution in thisthread.

Famo.us + Angular Seems to Be Deprecated (For Now)
Midway through this project, I saw that Famo.us was working on an improved version of the framework that includes Mixed Mode. Famo.us + 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 Edge 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:

Scan your site for out-of-date libraries, layout issues, and accessibility
Use virtual machines for Mac, Linux, and Windows
Remotely test for Microsoft Edge on your own device
Coding Lab on GitHub: Cross-browser testing and best practices
Written by David Voyles

If you found this post interesting, follow and support us.
Suggest for you:

Learn Angular 2 Development By Building 10 Apps