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成功消息
提醒框在网页的右上角,浮动定位,所以即便你的滚动条滚到了下边也能看到。
目录
相关文章
|
16天前
|
JavaScript
Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
|
3月前
|
前端开发 JavaScript
Angular 组件模版代码里使用 ngIf 进行条件渲染的例子
Angular 组件模版代码里使用 ngIf 进行条件渲染的例子
22 0
|
4月前
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
|
4月前
快速创建Angular组件并定义传参、绑定自定义事件的方法
快速创建Angular组件并定义传参、绑定自定义事件的方法
|
8月前
|
JavaScript 定位技术
Angular1.x入门级自定义组件(导航条)
Angular1.x入门级自定义组件(导航条)
|
资源调度 JavaScript 容器
Angular封装WangEditor富文本组件
Angular封装WangEditor富文本组件
205 0
|
资源调度 前端开发 Java
使用Angular CDK实现一个Service弹出Toast组件
使用Angular CDK实现一个Service弹出Toast组件
88 0
|
JavaScript 前端开发 API
让Angular自定义组件支持form表单验证
让Angular自定义组件支持form表单验证
114 0
Angular组件传参
Input 是属性装饰器,用来定义组件内的输入属性。在实际应用场合,我们主要用来实现父组件向子组件传递数据。Angular 应用是由各式各样的组件组成,当应用启动时,Angular 会从根组件开始启动,并解析整棵组件树,数据由上而下流下下一级子组件。
|
资源调度
angular使用ngx-vant组件库
angular使用ngx-vant组件库

热门文章

最新文章