angular定制组件-toastr(消息提醒)

简介: toastr是一个消息提醒工具。 需要的文件 angular-toastr.js angular-toastr.css angular把toastr封装成一个module,使用更方便。 用法 //定义模块时引入依赖angular .module('myApp', [ 'ui.bootstrap', 'toastr' ]); //定义控制器时传入

toastr是一个消息提醒工具。

需要的文件

angular-toastr.js 

angular-toastr.css

angular把toastr封装成一个module,使用更方便。

用法

//定义模块时引入依赖
angular
  .module('myApp', [
    'ui.bootstrap',
    'toastr'
  ]);
  
 //定义控制器时传入依赖
 angular.module('myApp')
  .conroller('MenuCtrl', function ($scope,toastr) {
  //此句会有提提效果,见图1
    toastr.success("祝贺你成功了"); 
	});

图1 toastr成功消息
提醒框在网页的右上角,浮动定位,所以即便你的滚动条滚到了下边也能看到。
目录
相关文章
|
7月前
|
JavaScript
Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
|
4月前
|
JavaScript 测试技术
如何在 Angular 中使用 NgTemplateOutlet 创建可重用组件
如何在 Angular 中使用 NgTemplateOutlet 创建可重用组件
30 0
|
5月前
|
前端开发 JavaScript
前端框架与库 - Angular基础:组件、模板、服务
【7月更文挑战第16天】Angular,谷歌维护的前端框架,专注构建动态Web应用。组件是核心,包含行为逻辑的类、定义视图的模板和样式。模板语法含插值、属性和事件绑定。服务提供业务逻辑,依赖注入实现共享。常见问题涉及组件通信、性能和服务注入。优化通信、性能并正确管理服务范围,能提升应用效率和质量。学习组件、模板和服务基础,打造高效Angular应用。
69 1
|
6月前
|
JavaScript 小程序 API
技术经验分享:Angular动态创建组件之Portals
技术经验分享:Angular动态创建组件之Portals
|
7月前
快速创建Angular组件并定义传参、绑定自定义事件的方法
快速创建Angular组件并定义传参、绑定自定义事件的方法
|
7月前
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
|
JavaScript 定位技术
Angular1.x入门级自定义组件(导航条)
Angular1.x入门级自定义组件(导航条)
|
资源调度 JavaScript 容器
Angular封装WangEditor富文本组件
Angular封装WangEditor富文本组件
316 0
|
资源调度 前端开发 Java
使用Angular CDK实现一个Service弹出Toast组件
使用Angular CDK实现一个Service弹出Toast组件
136 0
|
JavaScript 前端开发 API
让Angular自定义组件支持form表单验证
让Angular自定义组件支持form表单验证
167 0