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;
            }

        });

    }
})();