Building mobile apps with famo.us and angular material
Marrying famo.us and Google Material Design projects is ideally the future of building cross-platform mobile apps using angular. Earlier this year Google introduced Material Design, and around the same time famo.us introduced a fresh way of thinking and building web apps. Google inroduced Material Design project as
a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science
Google also introduced angular bindings for Material Design in angular/material project. Famo.us on the other hand, has been introduced as
the only JavaScript framework that includes an open source 3D layout engine fully integrated with a 3D physics animation engine that can render to DOM, Canvas, or WebGL.
That being said, I wanted to build a demo/POC with the two projects. You can find the finished code here. I have used thaiat's yeoman generator with gulp which I highly recommend. After generating the base project, make sure to add the required ngMaterial
bower packages.
"material-design-icons": "~1.0.1",
"angular-aria": "~1.3.8",
"angular-material": "~0.6.1"
Once added, we have to also modify package.json
for browserify
shims.
"angular-aria": "./bower_components/angular-aria/angular-aria.min.js",
"hammerjs": "./bower_components/hammerjs/hammer.min.js",
"ngMaterial": "./bower_components/angular-material/angular-material.js"
....
"ngMaterial": {
"exports": "ngMaterial",
"depends": [
"hammerjs",
"angular",
"angular-animate",
"angular-aria"
]
}
Now that ngMaterial
is available, let's add a module
and contoller
using the gulp generators.
We now have a route to hit in our app, let's modify the index.html
to be a famo.us
app.
<body>
...
<fa-app class="full-screen">
<ui-view></ui-view>
</fa-app>
...
</body>
Next, let's modify the generated view html
file with <fa-surface>
<fa-view>
<fa-modifier fa-translate="[20, 20, 0]">
<fa-surface>
<md-button class="md-primary" ng-click="vm.openBottomSheet()">
Open a Bottom Sheet!
</md-button>
<md-content class="md-padding">
Lorem ipsum dolor sit amet, ne quod novum mei.
<form style="padding: 20px;">
<md-text-float label="Company" ng-model="user.company" disabled> </md-text-float>
</form>
</md-content>
</fa-surface>
</fa-modifier>
</fa-view>
Any rendered content on the screen has to be within <fa-surface>
angular module, so that's why we have all of the ngMaterial
contents within famo.us
surface.
Let's also make sure you have required the ngMaterial
in index.js
require('ngMaterial');
...
var app = angular.module(fullname, [
'ui.router', 'ionic', 'famous.angular',
'ngCordova', 'ngMaterial'
]);
...
That's it. If you now run the gulp browsersync
you should see a ngMaterial
module running within famo.us
3D redering engine. Running in iOS with ios-sim
is as simple as running;
gulp dist
cd dist/app/dev
cordova platform add ios (one-time)
cordova build && cordova emulate ios
Clone the finished code to see how you can easily add the Bottom Sheet module for ngMaterial
to your page. Leave any questions or comments below.