在跨平台应用程序中进一步推广Angular Mobile UI

在我们的Mobile Angular UI教程的第一部分中 。 我们看到了如何通过实现SignIn功能入门。 在这一部分中，我们将实现SignUp功能并将ladda集成到我们的应用中以增强其UI。

入门

Heroku上提供了我们将要创建的应用程序的演示。 源代码可在GitHub上获得 。

首先，请克隆教程的第一部分并按如下所示进行安装：

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

将浏览器指向http://localhost:3000/BucketApp ，您应该会在第一个教程中看到创建的应用程序。

创建注册屏幕

首先在BucketApp文件夹中创建一个新的signUp.html ，如下所示：

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

请注意ng-submit函数signUp ，我们将在稍后进行声明。

ngDisabled指令用于验证电子邮件和密码并启用/禁用“注册”按钮。

在signUp.html中定义signUp.html的BucketApp.js ，如下所示：

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

重新启动服务器，然后将浏览器指向http://localhost:3000/BucketApp 。 点击SignUp在右手边的角落链接，你会看到注册网页。

定义signUp内部功能BucketApp.js如下所示：

$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);
            });
    }
}

我们使用了createUser api函数来创建一个新用户。 重新启动服务器，然后尝试注册。 成功注册后，该用户对象将被记录在浏览器控制台中。

接下来包括移动角度ui 覆盖组件，以向用户显示注册成功消息。 在signUp.html页面内，包含以下html代码用于叠加层：

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

在覆盖HTML内，我们有一个变量signUpMessage来设置弹出消息。

我们将需要rootScope服务来触发覆盖，因此将其注入到控制器中。

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

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

在signUp功能中，成功创建用户会设置叠加层消息并触发叠加层，如下所示：

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

出现错误时，如下所示设置叠加消息：

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

单击确定按钮后，我们需要将用户重定向到登录页面，因此在确定按钮上包括ngClick指令。

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

定义showSignIn ，如下所示：

$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('/');
}

现在，重新启动服务器并浏览该应用程序。 成功注册用户后，“ OK按钮将带您进入登录页面。

添加Ladda加载指示器

接下来，我们将Ladda加载指示器添加到我们的应用中。

我们将为ladda 创建一个AngularJS指令 ，以在我们的应用程序中使用。 这是我们的ladda指令的简约代码：

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

修改signIn.html的登录按钮，如下所示：

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

我们已将uiLadda指令与login.loading属性一起应用。 我们添加了一个名为data-style="expand-right"的属性，该属性定义了加载指示器的样式。 已添加其他类segoe-ui-light ladda-button来样式化ladda按钮。

接下来，将来自ladda dist的样式和javascript文件包含在index.html ，如下所示：

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

为了知道何时启动/停止ladda加载指示器，我们将login.loading设置为true和false。 在uiLadda指令中，我们将观看login.loading以启动/停止指示器。 因此，在应用程序控制器内部添加一个新变量，如下所示：

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

修改指令uiLadda ，如下所示：

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();
                    }
                });
            }
        };
    }
]);

里面的$scope.signin功能设置login.loading为真。 成功或失败时，将login.loading设置为false。

保存更改，重新启动服务器，然后尝试登录。单击“登录”按钮后，它将向右展开，显示加载指示符。

修改注册按钮，如下所示：

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

并且还设置了login.loading为真$scope.signUp 。 成功和失败时，将login.loading重置为false。

结论

在本教程中，我们使用Mobile Angular UI和firebase实现了注册功能。 我们了解了如何将Ladda指标添加到我们的应用中。 我们使用了叠加组件来显示弹出消息。 Mobile Angular UI还提供了许多其他有用的组件，您可以在官方文档中找到它们。 检查一下，并在下面的评论中让我们知道您的想法。

From: https://www.sitepoint.com/taking-angular-mobile-ui-cross-platform-apps/