Getting Started with Mobile Angular UI
AngularJS is one of the many buzz frameworks in mobile and web development. We’ll create an app using Mobile Angular UI, a framework to develop HTML 5 mobile apps that combines AngularJS with Bootstrap. It provides essential mobile components missing in Bootstrap 3 such as switches and overlays etc. It has no dependency on jQuery but instead relies on libraries such as fastclick.js
and overthrow.js
to achieve a better mobile experience.
Getting Started
A demo of the app we’ll be creating is available on Heroku. The username is sam@sam.com
and password is sam
. Source code is available on GitHub.
In this tutorial, we’ll see how to develop a responsive mobile application using Mobile Angular UI. This tutorial expects the reader to have a basic knowledge of AngularJS and Bootstrap.
Download and install Mobile Angular UI as shown below:
cd mcasimir-mobile-angular-ui-90b1528
npm install
grunt
The version number in the folder path above may vary.
Point your browser to http://localhost:3000/
and you should see a demo of Mobile Angular UI.
Creating a home screen
Let’s take a look inside the Mobile Angular UI folder that we downloaded. Files related to the sample demo are inside the demo folder. In addition to the html and css files, we have a demo.js
file. If we open up demo.js
we can see the AngularJS code.
If this file seems a little complicated, don’t worry. We’ll try to create our own little app from scratch and decipher what is inside demo.js
at the same time.
To get started, create a folder called BucketApp
inside the mcasimir-mobile-angular-ui-90b1528
folder. Create an html file called index.html
. Add in the flowing code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<base href="/BucketApp/" />
<title>Bucket App</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<link rel="shortcut icon" href="/favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="/dist/css/mobile-angular-ui-hover.min.css" />
<link rel="stylesheet" href="/dist/css/mobile-angular-ui-base.min.css" />
<link rel="stylesheet" href="/dist/css/mobile-angular-ui-desktop.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-touch.min.js"></script>
<script src="/dist/js/mobile-angular-ui.min.js"></script>
<script src="BucketApp.js"></script>
</head>
<body ng-app="AngularUIBucketApp">
// App Data will be here shortly :)
</body>
</html>
Take note of the ng-app
directive in the body. Next create BucketApp.js
which is already included in index.html
. Add this code:
var app = angular.module('AngularUIBucketApp', [
"ngRoute",
"ngTouch",
"mobile-angular-ui"
]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: "signIn.html"
});
});
We have established two things in the code above. First, we have registered the mobile-angular-ui
module. We have declared the root route for our app as signIn.html
. Create signIn.html
and leave it blank for the time being. In index.html
place the following code inside the body
tags which will serve as the basic template.
<div class="app">
<div class="navbar navbar-app navbar-absolute-top">
<div class="navbar-brand navbar-brand-center" yield-to="title">
<span>Bucket List App</span>
</div>
<div class="btn-group pull-right" yield-to="navbarAction">
<div class="btn btn-navbar">
<i class="fa fa-plus"></i> New
</div>
</div>
</div>
<div class="navbar navbar-app navbar-absolute-bottom">
<div class="btn-group justified">
<a href="#" class="btn btn-navbar btn-icon-only"><i class="fa fa-home fa-navbar"></i></a>
<a href="#" class="btn btn-navbar btn-icon-only"><i class="fa fa-list fa-navbar"></i></a>
</div>
</div>
<div class="app-body">
<ng-view class="app-content"></ng-view>
</div>
</div>
In the above code most of the code is self explanatory. The last div
may cause some confusion. It contains a ngView directive which renders the templates of the current route into index.html
.
Restart the server, point your browser to http://localhost:3000/BucketApp/
and you should see the basic app template. Here is how it should look:
Next, inside our basic template we need to include a sign-in form. Open up signIn.html
and include the following html :
<div class="scrollable">
<div class="scrollable-content section">
<form action="" id="" ng-submit="signin()">
<div bs-panel title="">
<input bs-form-control type="text" ng-model="user.username" label="" label-class="col-xs-3 col-sm-2 col-lg-1" class="col-xs-10 col-sm-11 col-lg-12" placeholder="Username" />
<input bs-form-control type="password" ng-model="user.password" label="" label-class="col-xs-3 col-sm-2 col-lg-1" class="col-xs-10 col-sm-11 col-lg-12" placeholder="Password" />
<button type="submit" id="btnSignIn" class="btn btn-primary" data-style="expand-right">
Sign In
</button>
</div>
</form>
</div>
</div>
A few things to note are the ngSubmit and ngModel directives in the html code. We have to bind the username and password input to $scope. On a form submit it validates the user and calls the signIn
function. Let’s define it in BucketApp.js
as shown below:
app.controller('MainController', ['$scope',
function($scope) {
// Initialized the user object
$scope.user = {
username: "",
password: ""
};
// Sign In auth function
$scope.signin = function() {
var email = $scope.user.username;
var password = $scope.user.password;
if (email && password) {
// Sign In Logic
}
}
}
]);
Add the ngController directive to the body tag in index.html
as shown below:
<body ng-app="AngularUIBucketApp" ng-controller="MainController">
Before passing the username and password to the signin
function, we need to check for empty values. We’ll make use of ngDisabled to enable/disable the SignIn button. Add the ng-disabled
attribute to the SignIn
button in signIn.html
as shown below:
ng-disabled = "user.username==undefined||user.username=='' || user.password=='' || user.password==undefined"
We’ll be using Firebase as our app’ backend. To use Firebase you first need to register for a free account. After registration, you’ll get a firebase url. In my case the firebase url is
https://burning-fire-1723.firebaseio.com
Include the following firebase scripts in index.html
before BucketApp.js
:
<script src="https://cdn.firebase.com/js/client/1.0.18/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js"></script>
<script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
We’ll be implementing a simple login using an email id and password. Include the firebase module in the application by replacing the code at the top of BucketApp.js
with the below:
var app = angular.module('AngularUIBucketApp', [
"ngRoute",
"ngTouch",
"mobile-angular-ui",
"firebase"
]);
Next inject $firebaseSimpleLogin
into our controller and define the firebase authentication object. Replace our current controller code in BucketApp.js
with the below:
app.controller('MainController', ['$scope','$firebaseSimpleLogin',
function($scope,$firebaseSimpleLogin) {
// Init Firebase
var ref = new Firebase("https://burning-fire-1723.firebaseio.com");
var auth = $firebaseSimpleLogin(ref);
// Initialized the user object
$scope.user = {
username: "",
password: ""
};
// Sign In auth function
$scope.signin = function() {
var email = $scope.user.username;
var password = $scope.user.password;
if (email && password) {
// Sign In Logic
}
}
}
]);
We’ll need to enable the Simple Login
from Firebase to use this functionality. Login to firebase and select the Simple Login
tab from the left side. From the listed tabs select Email & Password
and check enabled. Add a new user with an email id and password.
Firebase provides a method called login
which we’ll use for authentication. Change the signin
function to the below:
$scope.signin = function() {
var email = $scope.user.username;
var password = $scope.user.password;
if (email && password) {
// Sign In Logic
auth.$login('password', {
email: email,
password: password
})
.then(function(user) {
// On success callback
console.log('Username and password found');
}, function(error) {
// On failure callback
console.log('Username and password not found');
});
}
}
Restart the server, point your browser to http://localhost:3000/BucketApp
and you should see the sign-in page as shown below:
Try to sign-in using the credentials of the user you added in firebase. If all goes well you should see the success message in your browser console.
Creating the User Home page
Create a new html file called userHome.html
with following code:
<div class="container">
<div class="jumbotron">
<h1>Welcome !!</h1>
<p class="lead"><i>{{userEmailId}}</i> Here is your Dashboard</p>
</div>
</div>
Add the userHome.html
page to the app.config
in BucketApp.js
as shown below:
$routeProvider.when('/userHome', {
templateUrl: 'userHome.html'
});
When a user successfully signs in they will be redirected to /userHome
. Change the controller code to inject the $location service as shown below:
app.controller('MainController', ['$scope','$firebaseSimpleLogin','$location',
function($scope,$firebaseSimpleLogin,$location) {
In the signin
success callback, we need to set $scope.userEmailId
from the returned user
object and then redirect to /userHome
. Here is the newly added code:
console.log('Username and password found');
$scope.userEmailId = user.email;
$location.path('/userHome');
Restart the server and try to sign-in. On successful a sign-in you will be redirected to /userHome
with a welcome message as shown below:
Next open up index.html
and replace the following div
<div class="btn-group pull-right" yield-to="navbarAction">
<div class="btn btn-navbar">
<i class="fa fa-plus"></i> New
</div>
</div>
with:
<div class="btn-group pull-right" yield-to="navbarAction">
<div class="btn btn-navbar">
<i class="fa"></i><a ng-click="showSignUp()" ng-hide="loggedIn" class="btn">SignUp</a><a ng-click="logout()" ng-show="loggedIn" class="btn">Logout</a>
</div>
</div>
When a guest user loads the app, it will show a SignUp
link in the top right corner and when a user logs in, it will show a Logout
link.
We have used the ngHide and ngShow directives to toggle the display. Now when a user signs in, we’ll set the $scope.loggedIn
to true and vice versa.
Add the following code to the $scope.signin
function’s success callback:
$scope.loggedIn = true;
Also, define the logout
and showSignUp
function as shown below:
$scope.logout = function() {
$scope.loggedIn = false; // to toggle display of SignUp/Logout
$scope.user = { // re init the user object
username: "",
password: ""
};
$location.path('/'); // redirect to home page after logout
}
$scope.showSignUp = function() {
$scope.user = { // re init the user object
username: "",
password: ""
};
$location.path('/signUp'); // redirect to SignUp page
}
Restart the server and point your browser to http://localhost:3000/BucketApp/
and try signing in.
Conclusion
In this tutorial, we focused on how to get started with developing a mobile web application using Mobile AngularUI. In the next tutorial, we’ll take this further by implementing a SignUp
interface to add items to our bucket list and integrate the awesome Ladda into our app. We’ll also play with some other components offered by Mobile Angular UI.