Taking Angular Mobile UI Further in Cross Platform Apps

In the first part of our tutorial on Mobile Angular UI. We saw how to get started by implementing the SignIn functionality. In this part, we’ll implement the SignUp functionality and integrate ladda into our app to enhance its UI.

Getting started

A demo of the app we’ll be creating is available on Heroku. The source code is available on GitHub.

To get started, clone the first part of the tutorial and install it as shown below:

git clone https://github.com/sitepoint-examples/MobileAngularUIApp_Part_1.git
cd MobileAngularUIApp_Part_1
npm install
grunt

Point your browser to http://localhost:3000/BucketApp and you should see the app created in the first tutorial.

Creating a SignUp screen

Start by creating a new signUp.html in the BucketApp folder as shown below:

<div class="scrollable">
    <div class="scrollable-content section">
        <form action="" id="" ng-submit="signUp()">
            <div bs-panel title="">
                <input bs-form-control type="email" 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="Email Id" />
                <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="btnSignUp" ng-disabled="user.username==undefined||user.username=='' || user.password=='' || user.password==undefined" class="btn btn-success">
                    <span>Sign Up</span>
            </div>
        </form>
    </div>
</div>

Take note of the ng-submit function signUp, which we’ll declare later.

The ngDisabled directive is used to validate emails and passwords and enable/disable the SignUp button.

Define the route for the signUp.html in the BucketApp.js as shown below:

$routeProvider.when('/signUp', {
    templateUrl: 'signUp.html'
});

Restart the server and point your browser to http://localhost:3000/BucketApp. Click the SignUp link on the right hand side corner and you should see the sign up page.

Define the signUp function inside BucketApp.js as shown below:

$scope.signUp = function() {
    var email = $scope.user.username;
    var password = $scope.user.password;

    if (email && password) {
        // if non-empty email and password
        auth.$createUser(email, password)
            .then(function(user) {
                // do things if success
                console.log(user);
            }, function(error) {
                // do things if failure
                console.log(error);
            });
    }
}

We have used the createUser api function to create a new user. Restart the server and try to sign up. Once successfully signed up the user object will be logged in the browser console.

Next include the mobile angular ui overlay component to show the user a registration success message. Inside the signUp.html page include the following html code for the overlay:

<div overlay="myOverlay">
    <h4 id="statusMsg" class="overlay-title">{{signUpMessage}}</h4>
    <p toggle="off" bubble target="myOverlay">
        <span class="btn btn-primary">Ok</span>
    </p>
</div>

Inside the overlay html we have a variable, signUpMessage to set the pop up message.

We’ll need the rootScope service to trigger the overlay, so inject that into the controller.

app.controller('MainController', ['$scope', '$firebaseSimpleLogin', '$location', '$rootScope',

    function($scope, $firebaseSimpleLogin, $location, $rootScope) {}

In the signUp function, a successful user creation sets the overlay message and trigger the overlay as shown below:

$scope.signUpMessage = "User Registration Successful. Please SignIn :)";
$rootScope.toggle('myOverlay', 'on');

On an error set the overlay message as shown below:

$scope.signUpMessage = "Error Occurred: Enter valid email id.";
$rootScope.toggle('myOverlay', 'on');

On clicking the Ok button we need to redirect the user to a sign in page, so include the ngClick directive on the Ok button.

<span ng-click="showSignIn()" class="btn btn-primary">Ok</span>

Define the showSignIn as shown below:

$scope.showSignIn = function() {
    //Reset the overlay
    $rootScope.toggle('myOverlay', 'off');
    //Initialized the user object
    $scope.user = {
        username: "",
        password: ""
    };
    //Redirected to Sign In page
    $location.path('/');
}

Now restart the server and browse the app. On successful user sign up, the OK button takes you to the sign in page.

Adding Ladda loading indicator

Next we’ll add the Ladda loading indicator into our app.

We’ll be creating an AngularJS directive for ladda to use in our app. Here is the minimalistic code for our ladda directive:

app.directive('uiLadda', [
     function() {
         return {
             link: function(scope, element, attrs) {
                 // Code logic will be here
             }
         };
     }
 ]);

Modify the sign-in button in signIn.html as shown below:

<button data-ui-ladda="login.loading" ng-disabled="user.username==undefined||user.username=='' || user.password=='' || user.password==undefined" type="submit" id="btnSignIn" class="btn btn-primary segoe-ui-light ladda-button" data-style="expand-right">
    <span class="ladda-label">Sign In</span>
</button>

We have applied the uiLadda directive with a login.loading attribute. We have added an attribute called data-style="expand-right" which defines the style for a loading indicator. Additional classes segoe-ui-light ladda-button are added to style the ladda buttons.

Next include style and javascript files from ladda dist in index.html as shown below:

<link rel="stylesheet" href="/BucketApp/assets/css/style.css" />
<script src="/BucketApp/assets/js/spin.min.js"></script>
<script src="/BucketApp/assets/js/ladda.js"></script>

To know when to start/stop the ladda loading indicator, we’ll set the login.loading as true and false. In the uiLadda directive we’ll watch the login.loading to start/stop the indicator. So inside app controller add a new variable as shown below:

var login={};
$scope.login=login;

Modify the directive uiLadda as shown below:

app.directive('uiLadda', [
    function() {
        return {
            link: function(scope, element, attrs) {
                var Ladda = window.Ladda;
                ladda = Ladda.create(element[0]);
                // Watching login.loading for change
                scope.$watch(attrs.uiLadda, function(newVal, oldVal) {
                    // if true show loading indicator
                    if (newVal) {
                        ladda.start();
                    } else {
                        ladda.stop();
                    }
                });
            }
        };
    }
]);

Inside the $scope.signin function set the login.loading as true. On success and failure set the login.loading as false.

Save the changes, restart the server and try to sign in. On clicking the sign in button, it will expand right showing the loading indicator.

Modify the sign up button as shown below:

<button type="submit" data-ui-ladda="login.loading" id="btnSignUp" ng-disabled="user.username==undefined||user.username=='' || user.password=='' || user.password==undefined" class="btn btn-success segoe-ui-light ladda-button" data-style="expand-right">
    <span class="ladda-label">Sign Up</span>
</button>

And also set the login.loading as true in $scope.signUp. On success and failure reset the login.loading as false.

Conclusion

In this tutorial, we implemented sign up functionality using Mobile Angular UI and firebase. We saw how to add Ladda indicators into our app. We used the overlay component to show pop up messages. There are many other useful components offered by Mobile Angular UI which you can find in the official docs. Check it out and let us know your thoughts in the comments below.