用于Angular应用程序登录/注册的模式/对话框

穆库·雷纳(Mukul Raina)

我正在尝试为我的应用程序实现登录/登录对话框(类似于Medium),我在网上进行了很多搜索,我认为我将使用有角度的ui-bootstrap中的$ modal。我想知道是否有人可以指导我使用$ model制作类似的教程。任何帮助表示赞赏。

谢谢!

汉克天蝎座

文档:https : //github.com/angular-ui/bootstrap/tree/master/src/modal <<包含代码示例。标记和Javascript。从这里开始。

http://www.nganimate.org/ <<这可以帮助创建类似于Medium的登录内容的介绍过渡效果。

这是一个开始(填补空白,编写模态html +控制器):

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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Facebook显示登录对话框而不是应用程序请求对话框

来自分类Dev

dlg.DoModal()使对话框成为应用程序的模式,而不是前一个对话框的模式

来自分类Dev

登录Android应用程序时,Facebook进度对话框微调框

来自分类Dev

当对话框的ShowInTaskBar = false时,如何通过任务栏关闭应用程序或模式对话框?

来自分类Dev

当对话框的ShowInTaskBar = false时,如何通过任务栏关闭应用程序或模式对话框?

来自分类Dev

在应用程序本机共享对话框和iOS中的Google+登录中

来自分类Dev

FBSDKLoginManager无法在本机ios应用程序中打开登录对话框

来自分类Dev

没有本地应用程序或对话框的Android Facebook登录

来自分类Dev

ajax 调用在 Web 应用程序项目中引发意外的登录对话框

来自分类Dev

MFC应用程序:从窗体按钮启动一个(模式)对话框

来自分类Dev

使用Rails应用程序无法获得弹出模式对话框

来自分类Dev

SP2013 SharePoint托管的应用程序模式对话框错误:无法读取“ hiddenButtonValueBeforeDialog”

来自分类Dev

SP2013 SharePoint托管的应用程序模式对话框错误:无法读取“ hiddenButtonValueBeforeDialog”

来自分类Dev

React Context API不适用于单个应用程序对话框

来自分类Dev

对话框抛出“无法添加窗口-令牌null不适用于应用程序”

来自分类Dev

如何向我的 angular 7 应用程序添加一个简单的对话框?

来自分类Dev

Angular,为应用程序创建通用对话框时出错

来自分类Dev

基于 MFC 对话框的应用程序无法两次调用对话框

来自分类Dev

在首次启动应用程序时显示对话框

来自分类Dev

Windows 8应用程序的“打开文件”对话框

来自分类Dev

从Django / Python应用程序填充对话框参数

来自分类Dev

Applescript“退出当前应用程序”对话框

来自分类Dev

哪个应用程序触发“ Windows功能”对话框?

来自分类Dev

从片段退出应用程序对话框

来自分类Dev

警报对话框使应用程序崩溃

来自分类Dev

关闭模态对话框后应用程序退出

来自分类Dev

由于对话框,我的应用程序崩溃

来自分类Dev

通过外部应用程序打开松弛对话框

来自分类Dev

如何从终端打开“运行应用程序”对话框?

Related 相关文章

  1. 1

    Facebook显示登录对话框而不是应用程序请求对话框

  2. 2

    dlg.DoModal()使对话框成为应用程序的模式,而不是前一个对话框的模式

  3. 3

    登录Android应用程序时,Facebook进度对话框微调框

  4. 4

    当对话框的ShowInTaskBar = false时,如何通过任务栏关闭应用程序或模式对话框?

  5. 5

    当对话框的ShowInTaskBar = false时,如何通过任务栏关闭应用程序或模式对话框?

  6. 6

    在应用程序本机共享对话框和iOS中的Google+登录中

  7. 7

    FBSDKLoginManager无法在本机ios应用程序中打开登录对话框

  8. 8

    没有本地应用程序或对话框的Android Facebook登录

  9. 9

    ajax 调用在 Web 应用程序项目中引发意外的登录对话框

  10. 10

    MFC应用程序:从窗体按钮启动一个(模式)对话框

  11. 11

    使用Rails应用程序无法获得弹出模式对话框

  12. 12

    SP2013 SharePoint托管的应用程序模式对话框错误:无法读取“ hiddenButtonValueBeforeDialog”

  13. 13

    SP2013 SharePoint托管的应用程序模式对话框错误:无法读取“ hiddenButtonValueBeforeDialog”

  14. 14

    React Context API不适用于单个应用程序对话框

  15. 15

    对话框抛出“无法添加窗口-令牌null不适用于应用程序”

  16. 16

    如何向我的 angular 7 应用程序添加一个简单的对话框?

  17. 17

    Angular,为应用程序创建通用对话框时出错

  18. 18

    基于 MFC 对话框的应用程序无法两次调用对话框

  19. 19

    在首次启动应用程序时显示对话框

  20. 20

    Windows 8应用程序的“打开文件”对话框

  21. 21

    从Django / Python应用程序填充对话框参数

  22. 22

    Applescript“退出当前应用程序”对话框

  23. 23

    哪个应用程序触发“ Windows功能”对话框?

  24. 24

    从片段退出应用程序对话框

  25. 25

    警报对话框使应用程序崩溃

  26. 26

    关闭模态对话框后应用程序退出

  27. 27

    由于对话框,我的应用程序崩溃

  28. 28

    通过外部应用程序打开松弛对话框

  29. 29

    如何从终端打开“运行应用程序”对话框?

热门标签

归档