angularjs - style - ui-grid columndefs

Cómo incluir archivos de fuente ui-grid en el proyecto

Question

Me he quedado atascado con anjularjs ui-grid, muestra algunos símbolos chinos en lugar de iconos. Después de analizarlo, tengo que usar algunos archivos de fuentes proporcionados por el equipo de ui-grid, descargué los archivos y los incluí en mi proyecto, pero aún no obtengo las imágenes y las fuentes de iconos correctas, cómo incluir estos archivos. en el proyecto?

Estos son los nombres de archivos que descargué e incluí en mi proyecto:

1 ui-grid.eot 
2 ui-grid.svg
3 ui-grid.ttf
4 ui-grid.woff

Answer 1

Casi la misma respuesta que Panciz y Vicruz, pero especifiqué los directorios relevantes de manera ligeramente diferente:

copy: {
     dist: {
        files: [{
           // other files here...
        }, {
           expand : true,
           cwd : ''bower_components/angular-ui-grid'',
           dest : ''<%= yeoman.dist %>/styles'',
           src : [''*.eot'',''*.svg'',''*.ttf'',''*.woff'']
        }]
     },

Answer 2

Con Gulp puede agregar esta tarea en el archivo build.js

gulp.task(''copyfonts'', function() {
   gulp.src(''./bower_components/angular-ui-grid/**/*.{ttf,woff}'')
   .pipe(gulp.dest(path.join(conf.paths.dist, ''/styles/'')));

});

Answer 3

En mi proyecto, por lo general, uso grunt para colocar los archivos de fuentes en el directorio de build/assets y los archivos de proveedores en el directorio de build/vendor/lib-name .

Pero ui-grid.css tiene una ruta relativa para obtener el archivo de fuente y no tiene ningún modo para configurar una ubicación diferente sin modificar su archivo css. Pero creo que no es una buena idea porque entonces necesita cambiar este archivo para cada actualización de proveedor.

Así que puede configurar su gruñido para poner esta fuente en particular con los archivos de su proveedor también.

Este es tu build.config.js :

module.exports = {
    ...
    vendor_files: {
        ...
        js: [
            ''vendor/angular/bundle.min.js'',
            ''vendor/angular-ui-grid/ui-grid.min.js'',
        ],
        css: [
            ''vendor/angular-ui-grid/ui-grid.min.css'',
        ],
        uigrid_fonts: [
            ''vendor/angular-ui-grid/ui-grid.woff'',
            ''vendor/angular-ui-grid/ui-grid.ttf'',
            ''vendor/angular-ui-grid/ui-grid.eot'',
            ''vendor/angular-ui-grid/ui-grid.svg'',
        ],
        ...
    }
    ...
}

Luego, en su Gruntfile.js puede administrar este archivo:

module.exports = function (grunt) {

    grunt.loadNpmTasks(''grunt-contrib-copy'');
    //.. other require

    var userConfig = require(''./build.config.js'');
    var taskConfig = {
        copy: {
            //.. other copy task
            build_vendor_fonts: {
                files: [
                    {
                        src: [ ''<%= vendor_files.fonts %>'' ],
                        dest: ''<%= build_dir %>/assets/fonts/'',
                        cwd: ''.'',
                        expand: true,
                        flatten: true
                    }
                ]
            },
            build_uigrid_font: {
                files: [
                    {
                        src: [ ''<%= vendor_files.uigrid_fonts %>'' ],
                        dest: ''<%= build_dir %>/'',
                        cwd: ''.'',
                        expand: true,
                    }
                ]
            },
            build_vendor_css: {
                files: [
                    {
                        src: [ ''<%= vendor_files.css %>'' ],
                        dest: ''<%= build_dir %>/'',
                        cwd: ''.'',
                        expand: true
                    }
                ]
            },
            build_appjs: {
                files: [
                    {
                        src: [ ''<%= app_files.js %>'' ],
                        dest: ''<%= build_dir %>/'',
                        cwd: ''.'',
                        expand: true
                    }
                ]
            },
            build_vendorjs: {
                files: [
                    {
                        src: [ ''<%= vendor_files.js %>'' ],
                        dest: ''<%= build_dir %>/'',
                        cwd: ''.'',
                        expand: true
                    }
                ]
            }
        },
    };

    grunt.registerTask(''build'', [
        ''clean'', 
        ''concat:build_css'', 
        ''copy:build_vendor_fonts'', 
        ''copy:build_uigrid_font'',
        ''copy:build_vendor_css'', 
        ''copy:build_appjs'', 
        ''copy:build_vendorjs'', 
        ''index:build''
    ]);

    //..
}

Answer 4

Estoy usando Grunt tuve que añadir

copy: {
      dist: {
        files: [
           ...
        //font di ui grid
         {
              expand: true,
              flatten: true,
              dest: ''dist/styles/'',
              src: [''bower_components/angular-ui-grid/ui-grid.ttf'',
                    ''bower_components/angular-ui-grid/ui-grid.woff'',
                    ''bower_components/angular-ui-grid/ui-grid.eot'',
                    ''bower_components/angular-ui-grid/ui-grid.svg''
                    ]
            }
    ]},

to the Gruntfile.js Para copiar las fuentes de ui-grid en el directorio de style .

Answer 5

Estoy usando Gulp y agregué una tarea fonts:dev para ser agregada como dep a mi tarea de serve :

 gulp.task(''fonts:dev'', function () {
    return gulp.src($.mainBowerFiles())
      .pipe($.filter(''**/*.{eot,svg,ttf,woff,woff2}''))
      .pipe($.flatten())
      .pipe(gulp.dest(options.tmp + ''/serve/fonts/''));
  });

Esto lo resolvió para mí. Más contexto here .

Answer 6

Sé que es un poco tarde pero solo quiero compartir mi respuesta. Uso Bower para instalar ui-grid y gruntjs para cargar archivos. Es casi lo mismo con la respuesta de Panciz pero cámbiela a *.{ttf,woff,eot,svg} para obtener todos los archivos de fuentes necesarios sin especificarlos.

añadir esto en la copia:

copy: {
  dist: {
    files: [
      //other files here
      , {
          expand: true,
          flatten: true,
          cwd: ''<%= yeoman.client %>'',
          dest: ''<%= yeoman.dist %>/public/app'', //change destination base to your file structure
          src: [
            ''*.{ttf,woff,eot,svg}'',
            ''bower_components/angular-ui-grid/*'',
          ]
        }
    ]
  }
}

Answer 7

Si instala ui grid utilizando "instalación de bower", los archivos deben instalarse en su ubicación correcta. El problema que tuvimos fue que estamos usando ui-router, que requiere que todas las solicitudes se vuelvan a escribir en index.html. Tuvimos que agregar las extensiones de fuente a nuestras reglas de reescritura para que Angular pudiera cargarlas. Estamos usando un complemento de middleware para ejecutar localmente. En el servidor Apache / Nginx el concepto es el mismo.

middleware: function (connect) {
        return [
          modRewrite([''!//.html|//.js|//.svg|//.woff|//.ttf|//.eot|//.css|//.png$ /index.html [L]'']),
          connect.static(''.tmp''),
          connect().use(
            ''/bower_components'',
            connect.static(''./bower_components'')
          ),
          connect().use(
            ''/app/styles'',
            connect.static(''./app/styles'')
          ),
          connect.static(appConfig.app)
        ];
      }

Answer 8

Tuve el mismo problema, ahora se rectifica de la siguiente manera

Actualicé la Ui-grid con la última versión estable (v3.0.0-rc.3) o la versión inestable (v3.0.0-rc.16).

a continuación, coloque todos los archivos de fuentes en el mismo directorio en que vive su ui-grid.css, así

app
- lib
  - ui-grid.js
  - ui-grid.css
  - ui-grid.eot
  - ui-grid.svg
  - ui-grid.ttf
  - ui-grid.woff

o

puede abrir el CSS y cambiar la ruta del archivo a la ubicación relativa en @ font-face url''s

consulte aquí http://ui-grid.info/docs/#/tutorial/116_fonts_and_installation