angularJS引入第三方组件库layui
介绍
- 最近在写一个项目,是前后端分离的项目。其中前端是
angular
框架开发的,版本也比较低,是angular1.8.2
。 - 因为在项目中,有很多需要用到类似
layui
的组件的地方。于是,就在引入layui
的路上试错开始。其中我使用的layui
版本是2.6.x
- 在项目开始之前,我介绍一下我的项目,没有
angular.json
文件,使用gulp
作为自动化的构建工具。因此,网上的有些方法并不适用
详细引入过程
1、官网下载layui
组件并引入
- 在官网下载好组件以后,解压放到项目路径下。
- 在首页引入
js
和css
- 引入
css
样式后,我发现任然没效果。具体原因是没有注入css
。如下所示为注入css
,之后样式正常,解决了css
的问题,下面需要解决js
的问题
/**
* [编译之前将scss注入index.scss]
*/
gulp.task('inject_sass',function () {
var injectFiles = gulp.src([
path.join(config.paths.src,'app/**/*.scss'),
path.join(config.paths.src,'app/**/*.css'),
path.join('!'+ config.paths.src, 'app/index.scss')
],{read:false});
var injectOptions = {
transform: function(filePath) {
filePath = filePath.replace(config.paths.src + '/app/', '');
return '@import "' + filePath + '";';
},
starttag: '// injector',
endtag: '// endinjector',
addRootSlash: false
};
return gulp.src(path.join(config.paths.src,'app/index.scss'))
.pipe($.inject(injectFiles,injectOptions))
.pipe(gulp.dest(path.join(config.paths.src,'app/')))
});
2、项目引入过程
- 通过实践,我发现,直接在
angular
项目的html
页面中写script
脚本是失效的,因此,控制layui
的脚本只能放到controller
中,但是在controller
中声明的layui
组件模块也是失效的,因此,只能在index.html
中定义全局的变量。接下来看具体过程吧。此处,我将以layui
中的数据表格为例来说明
定义全局变量
在js文件中引入(重点)
-
表格
HTML
<div class="part top-first"> <table class="layui-hide" id="test" lay-filter="test"></table> <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button> <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button> <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button> </div> </script> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script> </div>
-
网页的控制器部分具体的代码如下
(function() {
layui.use('table',function (){
layuitable=layui.table
});
angular.module('eolinker')
.config(['$stateProvider', 'RouteHelpersProvider', function($stateProvider, helper) {
$stateProvider
.state('home.user.basic', {
url: '/basic',
template: '<user-basic></user-basic>',
});
}])
.component('userBasic', {
templateUrl: 'app/component/content/home/content/user/basic/index.html',
// styleUrls: ['app/layui/css/layui.css'],
controller: indexController
})
.value('layuitable',layuitable)
indexController.$inject = ['$scope', '$rootScope', 'CommonResource', '$state', 'md5', 'NavbarService', '$filter', 'CODE'];
function indexController($scope, $rootScope, CommonResource, $state, md5, NavbarService, $filter, CODE) {
layuitable.render({
elem: '#test'
// ,url:'https://www.layui.com/test/table/demo1.json'
,url:'/eolinker_os/test/getData'
// ,url:'/eolinker_os/Project/getProjectList'
,toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
title: '提示'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
,title: '用户数据表'
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
,{field:'username', title:'用户名', width:120, edit: 'text'}
,{field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){
return '<em>'+ res.email +'</em>'
}}
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
,{field:'city', title:'城市', width:100}
,{field:'sign', title:'签名'}
,{field:'experience', title:'积分', width:80, sort: true}
,{field:'ip', title:'IP', width:120}
,{field:'logins', title:'登入次数', width:100, sort: true}
,{field:'joinTime', title:'加入时间', width:120}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
,page: true
});
//头工具栏事件
layuitable.on('toolbar(test)', function(obj) {
var checkStatus = table.checkStatus(obj.config.id);
switch (obj.event) {
case 'getCheckData':
var data = checkStatus.data;
layer.alert(JSON.stringify(data));
break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('选中了:' + data.length + ' 个');
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全选' : '未全选');
break;
//自定义头工具栏右侧图标 - 提示
case 'LAYTABLE_TIPS':
layer.alert('这是工具栏右侧自定义的一个图标按钮');
break;
}
});
}
})();
- 上面的代码解析
- 首先定义使用
table
,给定义的全局变量layuitable
赋值
- 首先定义使用
-
使用
angular.module().value
把变量传入 -
接下来在控制器中,就可以渲染表格了。注意修改数据渲染的接口,换成自己本地的。如果使用官方的接口会存在跨域错误的问题
图片转存中…(img-bcdcTeTn-1627646190995)]
-
使用
angular.module().value
把变量传入[外链图片转存中…(img-dON4bN1w-1627646191002)]
-
接下来在控制器中,就可以渲染表格了。注意修改数据渲染的接口,换成自己本地的。如果使用官方的接口会存在跨域错误的问题