话不多说直入主题，最常见的有三种方式来引用第三方插件，下面以jquery插件及基于JQuery的两款插件：nicescroll和rangeSlider为例。 一、第一种方式：在.angular-cli.json文件中配置 步骤： 1.在项目根目录.angular-cli.json文件中找到script字段，在数组中添加要引用的所有js文件（注意先后顺序） "scripts": ["assets/jquery-3.2.1.js","assets/jquery.nicescroll.js","assets/ion.rangeSlider.js"], 2.在需要用该插件的组件中（...
我们都知道swiper是交互体验十分好的轮播插件 但是通过angular（ng-repeat）循环出来的swiper不能轮播的解决方案 通常我们都是通过以下方法来执行： html <div class="swiper-container" ng-controller="swiperController"><div class="swiper-wrapper"><div class="swiper-slide" ng-repeat="informarion in imgSrcs"><img ng-src="{{informarion.sliderSrc}}" /></div></div><!-- Add Pagination --><div class="swiper-paginati...
Angular浏览器插件Batarang介绍 对于Angular新手来说，刚接手Angular的时候都会比较痛苦。确实，相对于JQuery、Backbone等，Angular门槛确实相对较高，而且比较难以调试。今天给大家带来一个Angular Chrome 插件Batarang的介绍，运用好改插件，会帮助加深对Angular的理解。 准备工作 安装Batarang： 方法一：在Chrome应用商店中查找Batarang，并安装。方法二：在网上查找Batarang的安装包，直接在Chrome浏览器中安装。使用 在已安装...
前言：现在有很多朋友在接触Angular2的时候，总是不可避免的会使用一些其他的第3方的插件，而这些插件可能都是基于jQuery的，而且也没有对应的angular2的版本，这里我就来讲解一下，在这种情况下，如何整合第3方的jQuery插件。我们以Angular2整合zTree为例来说明整合的思路及过程。 zTree官方网站：http://www.treejs.cn/v3/main.php#_zTreeInfo 1.一般我在想要将像zTree这种插件集成进来的时候，我会先直接去看zTree它们的在线例子...
前言 laydate.js经过贤心大大的重写之后功能越来越强大，用起来也愈渐灵活了，大家都知道。Angular是不支持直接引入js文件的，下面介绍项目如果引入laydate.js的方法(可同样用于其他js文件引入，可能会有一些差别) 方法如下： 一、将下载的laydate中的js和theme文件放到一个统一的文件下面，我把它放到asset下二、在angular-cli.json配置js三、修改laydate.js找到这一句补全路径和删除版本号 "modules/laydate/":"assets/theme/")d...
本文介绍了Angularjs 手写日历的实现代码（不用插件），分享给大家，具体如下：效果：Html: <div class="plan_content_box" data-ng-init="showTime()"><div class="field" style="width: 100%;"><span class="field_label" style="width: 100%;text-align: center;"><select id="time_year" ng-change="change_year(select_year)" ng-model="select_year" ng-options="x.id as x.value for x in all_year"><!--<option value="190...
由于最近的一个项目使用的是angularjs1.0的版本，涉及到分页查询数据的功能，后来自己就用自定义指令实现了该功能。现在单独做了个简易的小demo，主要是为了分享自己写的分页功能。注：本实例调用的是真实接口数据。 首先、小demo的目录结构如下：一、代码部分 下面直接把每一个文件的代码贴出来，重点是ListCtrl.js和pageDirective.js： 1、index.html <!DOCTYPE html> <html lang="en" ng-app="app" ng-cloak> <head><meta chars...
npm 安装 ng-bootstrap 模块 npm install @ng-bootstrap/ng-bootstrap --save在 Angular 项目配置 app.module.ts 添加 import { NgbModule } from "@ng-bootstrap/ng-bootstrap";imports: [/*** ngx-bootstrap*/NgbModule.forRoot()], 添加 bootstrap.min.css 样式 在 assets 文件夹下 bootstrap/bootstrap.min.css ， 并在 style.css 文件中添加 @import "assets/bootstrap/bootstrap.min.css";测试 app.component.html 添加代码：...
前言 本文将介绍在 Angular4 项目中配置 ngx-translate i18n 国际化组件的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍： npm 安装 ngx-translate 模块 npm install @ngx-translate/core --save npm install @ngx-translate/http-loader --save在 Angular 项目配置 app.module.ts 添加 import { TranslateLoader, TranslateModule} from @ngx-translate/core; import { TranslateHttpLoader } from @ngx-translate...
前言 除了 AngularJS 内置的指令外，我们还可以创建自定义指令。 通过 .directive() 函数来添加自定义的指令。 调用自定义指令时，需要在HTMl 元素上添加自定义指令名。 自定义指令命名规则：使用驼峰命名法来命名，即除第一个单词外的首字母需大写。如： myDirective。 在html页面调用该指令时需要以 - 分割，如： my-directive。示例代码： <body ng-app="myApp"><my-directive></my-directive><script>var app = angular.module...
在AngularJs中我们会不可避免的使用第三方库，例如jquery插件库。我们不能散乱的在AngularJS中引入这些库，例如在controller中。那么应该怎么在Angular中使用第三方库呢？ 如何使用？ 很简单，给插件写一个directive。 在这里，我会使用一个简单的jquery插件Toolbar.js 的DEMO。 这是我们如何在jquery中创建一个tooltip的： <!-- Click this to see a toolbar --> <div id="format-toolbar" class="settings-button"> <img src="h...
写了一个生日联动插件具体的效果是这样的： 具体的数据 我取得数据是今年的数据，如果是想要做三级联动的日期插件，改一下时间就好了 var app=angular.module("dataPicker",[]) app.factory(dataPicker, [$http, $q, function ($http, $q) {return {query: function () {var lengthYear=100;var dataPicker={month:[],year:[],day:[]};var data = new Date();var nowyear = data.getFullYear();for(var i=nowyear,j=0; i>nowyear-l...
前言最近因为工作的原因，需要在Angualr2建的项目里做一个pdf显示的功能，在网上找了个插件，不过由于是第一次使用额外插件，在用的时候遇到了一些坑，这里权且记一下使用的步骤，方便以后的参考。 安装这里需要安装两个包：pdfjs-dist和ng2-pdf-viewer，安装时是要顺便保存到package.json里的，因此在项目根目录下输入下面命令： npm install pdfjs-dist --save npm install ng2-pdf-viewer --save于此同时，我们还要在system.con...
本文实例讲述了jQuery插件FusionWidgets实现的AngularGauge图效果。分享给大家供大家参考，具体如下： 1、设置AngularGauge图的数据源 AngularGauge.xml： <?xml version="1.0" encoding="UTF-8"?> <chart lowerLimit="0" upperLimit="100" lowerLimitDisplay="差" upperLimitDisplay="好"numberSuffix="%" showValue="1" baseFontSize="16" showBorder="1"><colorRange><color minValue="0" maxValue="60" code="FF0000"/><color ...
angularjs与pagination插件可以完美实现前端的分页，筛选，搜索等功能，前提当然需要有后台开发配合，今天我们只说前端实现： 1、引入pagination插件，在angularjs引入之前先加载pagination插件；2、在定义controller的时候，需要注入pagination插件； 3、分页前端原理基本需要有个默认异步请求，当点击分页，再次请求数据并向后台发送当前页码，如果有搜索数据或者筛选数据功能，在发送请求的同时需要带上与后台开发共同定义的搜索...