I am using AngularJs ui-grid http://ui-grid.info/.
While implementing, I get something which you can see in the following img in right corner of the cell instead of dropdown symbols.
Which files to include to solve this bug?
You need to download the font files:
ui-grid.woff
ui-grid.eot
ui-grid.svg
ui-grid.ttf
from here. And move them where your ui-grid.min.css lives.
Please include ui-grid CSS file by this way
<link rel="stylesheet" href="/release/ui-grid-unstable.css">
and ommit the script tag from the Authors Tutorial or Api
<script src="/release/ui-grid-unstable.css"></script>
for eg (http://ui-grid.info/docs/#/tutorial/102_sorting)
I would just like to add this answer (stolen verbatim from panciz) for the folks using Grunt who would like to have these automatically copied. This needs to be placed in your Gruntfile.js:
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'
]
}
]},
You may also want to look at a recently added tutorial: http://ui-grid.info/docs/#/tutorial/116_fonts_and_installation
This covers how to install the fonts correctly, and a little bit of trouble shooting.
Another way to solve the issue is modify the CSS class as follows
.ui-grid-icon-down-dir:before {
content: '\25bc';
}
.ui-grid-icon-up-dir:before {
content: '\25b2';
}
.ui-grid-selection-row-header-buttons.ui-grid-row-selected:before{
content:'\2714' !important;
}
.ui-grid-all-selected:before{
content:'\2714' !important;
}
Try to include in your project :
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css">
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>
If you are using gulp, add this task.
gulp.task('styles', function() {
// Copy font files needed for angular-ui-grid
gulp.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'
])
.pipe(gulp.dest('dist/styles/'))
// Other style tasks here
});
{
expand: true,
cwd: 'bower_components/angular-ui-grid',
src: ['.eot', '.svg', '.ttf', '.woff'],
dest: '<%= yeoman.dist %>/styles'
}
add this code to grunt file at copy: {
dist: {
If you use ui-grid - v4.6.6, you need to put ui-grid.ttf and ui-grid.woff into folder fonts. So the structure of directory will looks like this:
ui-grid.min.css
fonts # <-- this is a folder
ui-grid.ttf # <-- in fonts folder
ui-grid.woff # <-- in fonts folder
Adding this answer to hopefully save someone a headache. I had this problem and went through all the steps I could find. However, the problem wasn't file location, etc, my issue is the .woff file was corrupted. I downloaded the fonts to my local machine and ftp'd them to the server. Unfortunately, the .woff on the server ended up in a bad state and was bombing the #font-face declaration. Although this particular problem doesn't mention any console warnings/errors, they will match issues resolved by adding the fonts to grunt/gulp/etc.
I don't recall the error in Chrome, but in Firefox it was:
downloadable font: rejected by sanitizer
So, if you've gone through the hoops and nothing seems to work, check if the font files are correct because my FTP failed for .woff and it resulted in the same Korean characters, etc.
Related
I've created my app the normal way with cmd in ext 5 and what I had done was simply put my css files (in the index.html file) and when I would run sencha app build my styles word override the ones in ext (that is things like the body tag).
Now, I've recreated my ext project with cmd again from scratch, copied in my app.js and app folder and it works but it seems that my app flashes my body tag but then it goes away and the standard css takes over.
That is, in my in my index.html I have the lines:
<link href="/Content/Styles/scrum-style.css" rel="stylesheet" type="text/css"/>
<link href="/Content/Styles/SessionSchedule.css" rel="stylesheet" type="text/css"/>
***Added Note:
After reading, I've copied the css from the two files into /sass/etc/all.scss and that pushed the css into the top of the generated file but it still seems to be overridden.
(also posted to sencha forums yesterday but got no response so trying here)
You could try adding them to app.json:
"css": [
{ "path": "Content/Styles/scrum-style.css" },
{ "path": "Content/Styles/SessionSchedule.css" },
{
// this entry uses an ant variable that is the calculated
// value of the generated output css file for the app,
// defined in .sencha/app/defaults.properties
"path": "${build.out.css.path}",
"bundle": true,
"exclude": ["fashion"]
}
],
Or you could load them remotely:
"css": [
{ "path": "Content/Styles/scrum-style.css", "remote": true },
{ "path": "Content/Styles/SessionSchedule.css", "remote": true },
{
// this entry uses an ant variable that is the calculated
// value of the generated output css file for the app,
// defined in .sencha/app/defaults.properties
"path": "${build.out.css.path}",
"bundle": true,
"exclude": ["fashion"]
}
],
But add them to "resources": [] as well to copy them on build.
There are 2 ways to include external CSS files in your application.
You can add references in index.html file. In this case after build you need to manual copy CSS files in build application resources folder.
You can add reference in app.json file in css array and build app. In this case if you do change in css file , you need to build app.
So I ran into an issue when trying to use toastr as a global error notification system in my angular application.
This was logged as an issue with angular-toastr and the proposed solution was to push all templates into the templatecache. Apparently this is a good thing to do and after reading up on why, I have to agree.
My problem is that I am really new to grunt (only just installed it today) and although I have now managed to successfully set up my gruntfile.js and run some tasks (minification, concatination, etc) using grunt-angular-templates is a mystery to me.
I have set up my gruntfile like this:
ngtemplates: {
options: {
module: 'project',
},
dist: {
src: [
'wwwroot/lib/angular-toastr/**.html'
],
dest: 'wwwroot/js/templates.js'
}
}
But my templates file that is generated is empty.
I assume this is because scripts are creating in the JS files.
Does anyone know how I can get access to the them so I can add them to the cache?
I would guess that your source files are not being 'seen'. This worked for me with the following configuration and I am using a similar structure where the output is in a wwwroot/lib folder. I am also using the cwd (source directory option). Make sure that the templates are copied to the wwwroot folder before the grunt task is executed. I have other grunt tasks that 'clean' the wwwroot/lib folder so I store my source html(s) in another folder. That may also help if you are not doing that.
If all else fails, run in verbose -V (like alex said). The task source file is in the following location. You can also add additional debug in this file to further trouble shoot.
node_modules\grunt-angular-templates\tasks\angular-templates.js
this.files.forEach(function(file) {
if (!file.src.length) {
grunt.log.warn('No templates found');
}
This is the setup we use.
Project structure
Source
project/assets/templates/admin/partials/(html files here)
Output
project/wwwroot/lib/templates(html files here)
Grunt Task
ngtemplates: {
app: {
cwd: 'assets/templates',
src: '**/partials/*.html',
dest: 'assets/templates/partials.js',
options: {
module: 'cms.admin'
}
}
},
The Output Generates
angular.module('cms.admin').run(['$templateCache', function($templateCache) {
'use strict';
$templateCache.put('Admin/partials/navmenu.template.html',
"<nav class=\"navbar navbar-default navbar-fixed-top\">\r" +
"</nav>"
);
}]);
Your problem probably lies with your src: wwwroot/lib/angular-toastr/**.html
Maybe try using this grunt plugin, it's easy to use and does the same thing.
https://github.com/karlgoldstein/grunt-html2js
grunt.initConfig({
html2js: {
options: {
// custom options, see below
},
main: {
src: ['src/**/*.tpl.html'],
dest: 'tmp/templates.js'
},
},
})
Try running the task individually like this: grunt ngtemplates -v. The -v argument stands for verbose mode. You should get the filenames that have been read. If there are no files being read, you might have a file path problem.
For simplicity or to avoid the rabbit whole, you can also manually push the template to the cache so you can test the toastr issue.
Go to http://www.accessify.com/tools-and-wizards/developer-tools/html-javascript-convertor/
Convert the html to javascript
Use the output in the following code to cache manually.
var strVar = "";
strVar += "";
strVar += "<div class=\" container-fluid wrapper-md\">";
strVar += " <h3>Title<\/h3>";
strVar += " <div id=\"markupArea\"> <\/div>";
strVar += " ";
strVar += "<\/div>";
strVar += "";
angular.module('cms.admin').run(['$templateCache', function($templateCache) {
'use strict';
$templateCache.put('<CacheKEy>',strVar );
}]);
If one is not using grunt's "concat" and "bower_concat", angular-i18n is used this way:
<html ng-app>
<head>
...
<script src="angular.js"></script>
<script src="i18n/angular-locale_de-de.js"></script>
...
</head>
</html>
(According to here: https://docs.angularjs.org/guide/i18n)
But... of course: I'm using concat and bower_concat.
I'm using them this way:
First I use bower_concat and create build/bower-concat.js
Note: bower_concat reads every bower.json of every subdirectory living in bower_components and it concatenates all the main files.
Note 2: the bower.json of "angular-18n" has "ignore": ["**/.*", ...
Then I concat all my js's (my controllers, etc), into build/inouse-concat.js
Finally I concat bower-concat.js with inhouse-concat.js into all-concat.js
<script src="build/all-concat.js"></script>
So I though that I could include the corresponding locale, "angular-i18n/angular-locale_de-de.js", in the third step, like this:
// inhouse js with bower's js with angular's i18n into one file
allJsConcat: {
src: ['build/bower-concat.js', 'bower_components/angular-i18n/angular-locale_de-de.js', 'build/inhouse-concat.js',],
dest: 'build/all-concat.js',
}
But this is not working. I'm getting:
Uncaught ReferenceError: require is not defined
Question: how would you recommend using grunt, concat, and bower_concat with angular's locale js? what am I doing wrong?
Damn, I hate to answer my own questions because of rushing in asking...
Anyway, this worked:
Gruntfile.js
bower_concat: {
all: {
dest: 'build/bower-concat.js',
cssDest: 'build/bower-concat.css',
exclude: [
'angular-i18n'
],
bowerOptions: {
relative: false
}
}
},
concat: {
...
allJsConcat: {
src: ['build/bower-concat.js', 'bower_components/angular-i18n/angular-locale_de-de.js', 'build/inhouse-concat.js',],
dest: 'build/all-concat.js',
}
}
The trick was using the exclude parameter of grunt-bower-concat.
There is also a mainFiles parameter that I think would do the trick too:
mainFiles
Some Bower components don’t list their main files or (more likely)
don’t have bower.json file at all. In this case bower-concat will try
to guess main file but sometimes it can’t or choose wrong one. You
could explicitly define main files for that components.
So I think that using this would work too:
mainFiles: {
'angular-i18n': 'angular-locale_de-de.js',
}
Without doing the "three file concat" (so its more elegant)
How can I configure Express to render all Jade files regardless of path? The application I'm on is large with a very complex structure. I'm successfully serving static files however I need many of them to be rendered. We are using Jade for all files needing markup.
I'm worried that the pattern below will force me to create a route alias for every folder that has a Jade file... which would be bad. I would like to tell Express to simply render everything with a .jade extension... OR... allow me to create a route PREFIX for the root that would cause a Render operation instead of Static.
client
app
services
modules
moduleA
itemA
itemAList.jade
itemAList.js
itemADetails.jade
itemADetails.js
itemB
itemBList.jade
itemBList.js
itemBDetails.jade
itemBDetails.js
moduleB
itemC
itemCList.jade
itemCList.js
itemCDetails.jade
itemCDetails.js
itemD
itemDList.jade
itemDList.js
itemDDetails.jade
itemDDetails.js
assets
js
css
server
config
views
Routes.Config.js
module.exports = function(app){
app.get('/*', function(req, res){
res.render('../../client/' + req.params[0]);
});
app.get('/', function(req, res){
res.render('../../client/index', {});
})
}
Express.Config.js
[snip]
app.use(express.static(path.join(constants.rootPath, '/client')));
I would use a Grunt file watcher to kick off a compile any time your .jade files are created or saved. By using the Gruntfile.js below, you can issue the command grunt watch and have this automagically occur in the background:
module.exports = function(grunt){
grunt.initConfig({
jade: {
compile: {
options: {
client: false,
pretty: true
},
files: [{
cwd: "client/app/templates",
src: "**/*.jade",
dest: "client/app/modules",
ext: ".html",
expand: true
}]
}
},
watch: {
html: {
files: 'client/app/templates/**/*.jade',
tasks: ['jade'],
options: {
atBegin: true,
interrupt: true
}
}
}
});
grunt.loadNpmTasks("grunt-contrib-jade");
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.registerTask('default', ['jade']);
}
Now, this assumes that you will create a "templates" folder parallel to the "modules" folder and put all of your .jade files there in the structure you want. You may then add your controllers and other .js files to the modules folder structure as normal.
I'm not sure how Grunt will behave with the source and destination both pointing to the same folder. However, if you REALLY want to keep your .jade and .html files in the same folder, or if you don't want to create a "templates" structure, you SHOULD be able to simply change the cwd variable to point to the "modules" folder:
files: [{
cwd: "client/app/modules", // templates folder removed
src: "**/*.jade",
dest: "client/app/modules",
ext: ".html",
expand: true
}]
NOTE:
Sounds like you've misunderstood some of the fundamentals. From what I'm learning, within a typical MEAN application, there is generally a folder structure that is meant to be purely static. In your example, this would be your "client" folder. By specifying special routes, you individually decide how every other case is handled. The example above is meant to accomplish what I think you're asking while still maintaining the purpose of the "static" area.
UPDATE: Don't use same folder!
I went back and tried using the same folder for the source and destination. This caused Grunt to hang without any way to break out of it. This hang does NOT occur when they are different. So, use the file as-is with the "templates" folder.
I worked along the following tutorial to try to optimize my project into one single .js file, but unfortunately I can't seem to get the expected results. I get r.js to create an optimized folder for me, but instead of a single file, I get uglified copies of each individual .js file in their respective folders. Seems like that last concatenation step is somehow missing.
I'm trying to leverage an existing config file instead of using paths, I don't know if that specific step is breaking it.
My build/app.build.js is:
({
appDir: '../',
baseUrl: 'js',
mainConfigFile: '../js/config.js',
dir: '../../my-app-build',
modules: [{
name: 'main'
}]
})
My main.js file has the config file as its dependency:
require(["config"], function() {
require(['underscore', [...]
[...]
}
}
And the config file is where all of my project dependencies are declared:
require.config({
baseUrl: "js",
paths: {[...]},
shim: {...]},
});
Does anyone have insight into why I might not be getting that single file output that I'm looking for? I tried the other approach in this post, but that only ever produces main.js for me with the config file prepended to it.
Thanks!
The issue was caused by the following option missing from the r.js build configuration file:
findNestedDependencies: true
Without it, r.js would not go past the first require in main.js, thus loading only config.js and none of the next level of dependencies. Just for reference (note that it saves the product of optimization in the same source folder, which is not ideal) looks like this:
({
baseUrl: '.',
mainConfigFile: 'config.js',
name: 'main',
out: 'main-build.js',
findNestedDependencies: true,
})
I had the same problem and got the solution from the Github Issue list. May be this configuration parameters will help you too
https://github.com/jrburke/r.js/issues/379
If you only want one JS file built, instead of using dir: use out: for a single JS file build.
Specify output filepath:
({
// ...
out: '../main.min.js'
})