Modal/dialog for login/signup for an Angular app [

问题:

I'm trying to implement a login/signin dialog for my app (something like that of Medium) I have searched a lot about it online and I think I will go with the $modal from angular ui-bootstrap. I'm wondering if someone can direct me to a tutorial for making something like that using $model. Any help is appreciated.

Thanks!

回答1:

Docs: https://github.com/angular-ui/bootstrap/tree/master/src/modal << Contains code examples. Markup and Javascript. Start here.

http://www.nganimate.org/ << This can help create an intro transition effect similar to Medium's login thing.

Here's a start (Fill in the blanks, write your modal html + controller):

index.html:

<style type="text/css">
    .login-intro.ng-enter { /*starting css properties. Transparency, position etc*/ }
    .login-intro.ng-enter.ng-enter-active { /*final css properties. The ngAnimate will transition these for you*/ }
</style>

<div ng-controller="MainCtrl as main">
    <a href="#" ng-click="main.openLoginModal()">Log in / Sign up</a>
</div>

main-controller.js:

(
var myModule = angular.module('myModule', ['ui.bootstrap']);
myModule.controller('MainCtrl as main', function($modal){

    var controller = this;

    controller.openLoginModal = function(){
        var modalInstance = $modal.open({
            templateUrl: 'login-template.html',
            controller: 'LoginController as login'
        };

        modalInstance.result.then(function () {
            // Redirect to the logged-in area of your site
        }, function () {
            // optional function. Do something if the user cancels.
        });
});



})();

login-template.html:

<div ng-view class="login-intro">
    <!--login inputs, buttons etc here-->
</div>

回答2:

this may not answer your question directly but I have done login modal dialog using ngDialog (https://github.com/likeastore/ngDialog) with similar functionality as the Medium site. You may want to look into ngDialog.