angular 弹窗

2024-08-30

angular创建一个独立弹窗服务

1.说明: 这个服务用于创建一个modal(弹窗),通常下,这个弹窗会插入到body的底部,并且拥有自己的作用域($scope),也可以和外界通讯. 2.逻辑: (1).创建模版 (2).拿到模版里要插入的内容 console templateAndResolvePromise 的结果: value数组有两项,分别是template(模版)和resolve(数据). templateAndResolvePromise是一个promise对象解析参数里的模版和resolve的方法: templa

Angular 弹窗控件

这个控件个人很喜欢,比起primgNG等弹窗组建,这款弹窗可以很轻松的定义自己的样式和布局. 可控参数有:宽度,高度,是否带有关闭图标,基本满足基础弹窗需求. 并且 Title/Content/Footer可以不强制三者并存. 调用组件方法如下: <popup-common *ngIf="showPupup" [width]="600" [height]="300" [closebtn]="true" (popupDat

动态创建angular组件实现popup弹窗

承接上文,本文将从一个基本的angular启动项目开始搭建一个具有基本功能.较通用.低耦合.可扩展的popup弹窗(脸红),主要分为以下几步: 基本项目结构搭建弹窗服务弹窗的引用对象准备作为模板的弹窗组件使用方法基本项目结构因为打算将我们的popup弹窗设计为在npm托管的包,以便其他项目可以下载并使用,所以我们的启动项目大概包含如下结构: package.json // 定义包的基本信息,包括名字.版本号.依赖等 tsconfig.json // angular项目基于typesc

Angular之模态弹窗ui-bootstrap-modal及轻量级弹窗ngDialog

ui-bootstrap 中模态官网 angular-ui-bootstrap 对于ui-bootstrap集成大量指令如折叠ui.bootstrap.accordion.时间插件ui.bootstrap.datepicker.接下来要说明的模态窗ui.bootstrap.modal等..... 疑问? angular-ui-bootstrap-1.3.2 引入时遇到问题: Error: [$injector:unpr] Unknown provider: $templateRequest

angular可自定义的对话框,弹窗指令

指令不明的,推荐 AngularJS指令参数详解 github地址以下为示例代码 <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../dist/lib/angular/angular.m

Angular页面加载后自动弹窗

首先在控制器内写好一个弹窗,我用的是ionic的默认提示对话框 // 一个确认对话框 $scope.showConfirm = function() { var confirmPopup = $ionicPopup.confirm({ title: 'Consume Ice Cream', template: 'Are you sure you want to eat this ice cream?' }); confirmPopup.then(function(res) { if(res) {

Ionic中弹窗

Ionic中弹窗有两种ionicModal和ionicPopup; $ionicModal是完整的页面: $ionicPopup是(Dialog)对话框样式的,直接用JavaScript设定对话框的一些参数,通常用于通知消息.确认等作用: 案例: 1 angular.module('testApp', ['ionic']) 2 .controller('MyController', function($scope, $ionicModal) { 3 $ionicModal.fromTemplat

angular自动化测试--protractor

前戏面向模型编程: 测试驱动开发: 先保障交互逻辑,再调整细节.---by 雪狼. 为什么要自动化测试? 1,提高产出质量. 2,减少重构时的痛.反正我最近重构多了,痛苦经历多了. 3,便于新人接手. angular自动化测试主要分:端到端测试和单元测试,很明显两者都要熟练掌握. 端到端测试是从用户的角度出发,认为整个系统是个黑盒,只会有UI暴露给用户,主要是模仿人工操作测试. 单元测试认为整个系统是白盒,可以用来测试服务,控制器,过滤器还有基础函数等. 端到端测试使用protractor,今

从源码看 angular/material2 中 dialog模块的实现

本文将探讨material2中popup弹窗即其Dialog模块的实现. 使用方法引入弹窗模块自己准备作为模板的弹窗内容组件在需要使用的组件内注入 MatDialog 服务调用 open 方法创建弹窗,并支持传入配置.数据,以及对关闭事件的订阅深入源码进入material2的源码,先从 MatDialog 的代码入手,找到这个 open 方法: open<T>( componentOrTemplateRef: ComponentType<T> | TemplateRef

浅谈 Angular 项目实战

为什么使用 Angular 我不是 Angular 的布道者,但如今痴迷 Angular,使用 Angular 做项目让我有一种兴奋感.目前的三大主流前端框架都研究过,博客中也有三者的相关教程,最早接触的是 React,但是并没有实际的项目经验,只做过一些 Demo .使用 Vue 做过一个比较复杂的移动端大数据项目,技术栈采用 Framework7 + Vue + Vuex,整体效果还是满意的. 因为去年的项目几乎都是后台管理系统,所以框架用的不多,主要还是传统方式开发,后期为了改善前端开发体

ASP.NET Core知多少（6）：VS Code联调Angular + .NetCore

ASP.NET Core知多少系列:总体介绍及目录 1. 引言最近在看<程序员的成长课>,讲到程序员如何构建技能树,印象深刻.作为一名后台开发的程序员,深感技能单一,就别说技能树了.作为一名合格的后台程序员,至少要掌握一门静态语言,一门动态语言和一门前端语言.静态语言C#算不上精通,动态语言Python也刚刚入门.但前端却是空白,虽说有了解过jquery.bootstrap,但因为项目无所涉及,早已忘得一干二净. 近几年,前端框架大行其道,Web开发已经是一个不容忽视的大趋势,在这个趋势下对

angular 路由项目例子

angular 路由是我在工作中体验非常便捷的一点, 这是详细的API ,查看API 可以了解很多东西, https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-view 下面是我使用angular ui-route 做到开发例子,代码都未压缩可以方便查看, http://heboliufengjie.github.io/appRoute/#/index https://github.com/heboliufengjie/

Angular中sweetalert弹框的使用详解

最近太忙了,项目中使用的弹框老板嫌太丑,让我们优化一下,我在网上找了一下,找到了sweetalert弹框,算是比较好看的弹框了.所以我就想办法将sweetalert用到项目中,在项目中引入sweetalert时,遇到诸多问题,但最终在我不懈坚持下,都解决了,实现了效果.具体用法请看下文.写的有问题的地方欢迎留言,我会及时更改. 一.下载文件 npm install angular-sweetalert npm install sweetalert 当npm 下载angular-sweetaler

angular之interceptors拦截器

<!DOCTYPE html> <html ng-app="nickApp"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title&g

angular 首屏优化

前一段时间把公司的一个angular项目做了一次大的优化,记录一下过程. 起因: 起因是用户反映网站加载时间过长,从loading画面显示到页面可响应要13s,对于一般的页面恐怕没有用户愿意等待这么久.因为这是一个在线编辑的工具类的项目,有使用需求的用户只能等待页面加载完成,所以才会反馈到客服那边. 分析: 页面加载时间过长,首先就是要分析到底是哪些环节导致的,工具呢就是用 chrome 开发者工具里 Performance 进行 Record 后根据数据分析.有很多相关的教程贴,此处不做具体操

触发ionic弹窗区域外的方法

最近项目需要在页面弹窗的时候需要点击弹窗区域外的地方,其实也就是点击页面HTML就可以关闭弹窗, 首先在controller通过js获取到html的dom节点,然后绑定点击事件,话不多说上代码: var htmlEl = angular.element(document.querySelector('html')); htmlEl.on('click', function (event) { if (event.target.nodeName === 'HTML') { if (myPopu

ionic2\ionic3 自定义弹窗

ionic2及ionic3没有了popup及其templateUrl属性那我们如何对弹窗里加入自定义元素从而达到自定义弹窗样式那么就可以通过写h5页面来实现自定义弹窗效果: 写个H5的弹窗及控制其显示.隐藏,再加上animation就完美应用了: !!!! 但有个新的问题,从底部弹出的窗口h5元素无论怎么设置z-index始终无法盖住tabs栏: 如下解决: 1.如果只是子页面有自定义弹窗: 所有子页面隐藏tabs就可以解决: 可以通过在app.module.ts 写入如下: impo

一个基于Angular+Ionic+Phonegap的混合APP实战

这个项目做得比较早,当时是基于ionic1和angular1做的.做了四个tabs的app,首页模仿携程首页,第二页主要是phonegap调用手机核心功能,第三页模仿微信和qq聊天页,第四页模仿一般手机的表单设置页.同时还模仿知乎做了一个侧边栏页(账号:wty,密码:123456). 没有后台,纯前端展示,功能还比较多,调用系统的声音.震动和手机设备信息等.有二维码扫描功能,还做了类似qq消息可拖拽效果,上拉下拉刷新,轮播图组件. 安卓apk下载线上地址一.基本概念 1. Angularjs

angular material dialog应用

1. 打开弹窗的点击事件 project.component.html <button mat-icon-button class="action-button" (click)="editDialog(project)"> <mat-icon>create</mat-icon>编辑 </button> <button mat-mini-fab color="warn" class="

angular版聊天室|仿微信界面IM聊天|NG2+Node聊天实例

一.项目介绍运用angular+angular-cli+angular-router+ngrx/store+rxjs+webpack+node+wcPop等技术实现开发的仿微信angular版聊天室angular-chatroom实例项目,实现了下拉刷新.聊天消息右键菜单.发送消息.表情(动图),图片.视频预览,红包打赏等功能. 二.技术实现 MVVM框架:angular8.0 / @angular/cli 状态管理:@ngrx/store / rxjs 地址路由:@angular/route

angular 弹窗

热门专题