用于Angular应用程序的登录/注册的模态/对话框 [英] Modal/dialog for login/signup for an Angular app
问题描述
我正在尝试为我的应用程序实现登录/登录对话框(类似于中等)我有在网上搜索了很多关于它的信息,我想我会选择角度ui-bootstrap的$ modal。我想知道是否有人可以指导我使用$ model制作类似的东西的教程。感谢任何帮助。
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.
谢谢!
推荐答案
文档:< a href =https://github.com/angular-ui/bootstrap/tree/master/src/modal =nofollow> https://github.com/angular-ui/bootstrap/tree/master/ src / modal
<<包含代码示例。标记和Javascript。从这里开始。
Docs: https://github.com/angular-ui/bootstrap/tree/master/src/modal << Contains code examples. Markup and Javascript. Start here.
http://www.nganimate.org/
<<这可以帮助创建类似于Medium的登录事物的介绍过渡效果。
http://www.nganimate.org/ << This can help create an intro transition effect similar to Medium's login thing.
这是一个开始(填写空白,编写模态html +控制器):
Here's a start (Fill in the blanks, write your modal html + controller):
index.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:
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:
login-template.html:
<div ng-view class="login-intro">
<!--login inputs, buttons etc here-->
</div>
这篇关于用于Angular应用程序的登录/注册的模态/对话框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!