I'm trying to create a directive in AngularJS to split my HTML into reusable partials:
app/assets/javascripts/products/directives/products.js:
app.directive('productsfilter', function() {
return {
restrict: 'E',
templateUrl: "/templates/filter-template.html"
}
});
However, the templates are not found:
Error: [$compile:tpload] Failed to load template: /templates/filter-template.html http://errors.angularjs.org/1.2.20/$compile/tpload?p0=%2Ftemplates%2Ffilter-template.html
I also tried ../templates/filter-template.html and templates/filter-template.html but neither worked. Is it because of Rails's asset pipeline?
Here's my folder tree from within app/assets/javascripts:
└── products
├── controllers
│ ├── mens_controller.js
│ ├── productscontroller.js
│ ├── womens_eyeglasses_controller.js
│ └── womens_sunglasses_controller.js
├── directives
│ └── products.js
├── filters
│ └── productsfilters.js
├── services
│ └── productsservices.js
└── templates
└── filter-template.html
I've encountered same issue. My path to my template was:
assets/templates/partials/question/multipleChoice.html
when I moved the template into: assets/templates/multipleChoice.html
the embedded: <%= asset_path('multipleChoice.html') %> worked. Perhaps, it is the limitation of asset_path() method to dig much deeper.
To make the method be able to find the template, I pointed it out, like this:
templateUrl: "<%= asset_path('partials/question/multipleChoiceSingleAnswer.html') %>" and it worked. (of course, you have to change the extension to .js.erb).
I don't want to place my templates inside the public folder. I want Rails to handle it for me and make it dynamic.
app.directive('productsfilter', function() {
return {
restrict: 'E',
templateUrl: "filter-template.html"
}
});
Use this gem if you are not using it.
gem 'angular-rails-templates'
Worked for me.
Related
I have a project like this (in fact, there are more files and dirs):
.
├── src
│ ├── main.lua
│ └── smth.lua
└── tests
├── others
│ ├── others_1.lua
│ ├── others_2.lua
│ └── others_3.lua
├── speed_tests
│ ├── test1.lua
│ └── test2.lua
└── sql
├── join.lua
└── select.lua
and I have such .luacheckrc:
include_files = {
"**/*.lua"
}
exclude_files = {
"tests/**/*.lua",
}
I want luacheck utility to check files in tests/sql directory, but not to touch other directories in tests/. Of course, I can explicitly write:
exclude_files = {
"tests/others/*.lua",
"tests/speed_tests/*.lua"
}
, but in real project there're 15+ dirs and it doesn't look good to do that.
How can I reach a goal elegantly?
Don't use exclude then, only include dirs you wish to traverse.
include_files = {
"src/*.lua",
"tests/sql/*.lua"
}
I am copying over the jQueryUI library from bower. I only want to copy over two themes from their "themes" directory. The theme folders I want to keep are "base" and "ui-lightness".
How can I accomplish this with a globbing pattern?
I've tried this...
gulp.src([
'./bower_components/jqueryui/**',
'!./bower_components/jqueryui/themes/**(!base/**)'
])
Here is the directory structure:
├── themes
│ ├── base
│ ├── black-tie
│ ├── blitzer
│ ├── cupertino
│ ├── dark-hive
│ ├── dot-luv
│ ├── eggplant
│ ├── excite-bike
│ ├── flick
│ ├── hot-sneaks
│ ├── humanity
│ ├── le-frog
│ ├── mint-choc
│ ├── overcast
│ ├── pepper-grinder
│ ├── redmond
│ ├── smoothness
│ ├── south-street
│ ├── start
│ ├── sunny
│ ├── swanky-purse
│ ├── trontastic
│ ├── ui-darkness
│ ├── ui-lightness
│ └── vader
└── ui
├── i18n
└── minified
Gulp v4.x
The current gulp docs include an example glob pattern which can be customized to meet your requirement. Try the following:
gulp.task('copyfoobar', function() {
gulp.src([
'bower_components/jqueryui/**', // [1]
'!bower_components/jqueryui/themes/**', // [2]
'bower_components/jqueryui/themes/{base,ui-lightness}/**' // [3]
], { base: './' } )
.pipe(gulp.dest('./dist'));
});
The Array of globs shown above does the following:
[1] Matches everything under the bower_components/jqueryui/ directory.
[2] Negates the bower_components/jqueryui/themes directory, (and everything in it), from the list created via the previous glob pattern.
[3] Adds the bower_components/jqueryui/themes/base and bower_components/jqueryui/themes/ui-lightness directories, (and everything in them), back to the list.
Note: The solution above assumes that the bower_components directory resides in the same directory as your gulpfile.js, and the target directory is dist.
Resultant directory tree:
If you don't want the bower_components directory added to your target/destination directory, (i.e. dist), then set the base option to:
{ base: './bower_components/' }
This will result in something like this:
.
└── dist
└── jqueryui
├── themes
│ ├── base
│ │ └── ...
│ └── ui-lightness
│ └── ...
└── ...
Where as setting the base option to:
{ base: './' }
results in something like this:
.
└── dist
└── bower_components
└── jqueryui
├── themes
│ ├── base
│ │ └── ...
│ └── ui-lightness
│ └── ...
└── ...
Gulp v3.x
Unfortunately, the example shown above does not work in Gulp version 3.x because Negations (!) were handled differently - they were always done last regardless of the order they were specified in the glob Array. More info of that discussed in issue 837.
The workaround, (for v.3.x), is to utilize gulp-src-ordered-globs which will allow you to use the same Array of globs as the previous example.
The code for this will be:
var gulpSrc = require('gulp-src-ordered-globs'); // require the gulp.src() wrapper.
gulp.task('copyfoobar', function() {
gulpSrc([ // <-- gulpSrc() used instead of gulp.src()
'bower_components/jqueryui/**',
'!bower_components/jqueryui/themes/**',
'bower_components/jqueryui/themes/{base,ui-lightness}/**'
], { base: './' } )
.pipe(gulp.dest('./dist'));
});
I just did this instead. I think it was a little too difficult to figure it out in one task.
var task1 = gulp.src(base + 'jqueryui/*.*').pipe(gulp.dest(target));
var task2 = gulp.src(base + 'jqueryui/ui/**').pipe(gulp.dest(target + '/ui/'));
var task3 = gulp.src(base + 'jqueryui/themes/base/**').pipe(gulp.dest(target + '/themes/base/'));
var task4 = gulp.src(base + 'jqueryui/themes/ui-lightness/**').pipe(gulp.dest(target + '/themes/ui-lightness/'));
return [task1, task2, task3, task4];
Try this one
gulp.task('copy_flolder',function(){
gulp.src(['./bower_components/jqueryui/**', '!./bower_components/jqueryui/themes/**'])
.pipe(gulp.dest('your dist folder'))
});
gulp.task('copy_only_Themes',['copy_flolder'], function() {
gulp.src(['./bower_components/jqueryui/themes/base/**', './bower_components/jqueryui/themes/ui-lightness/**'])
.pipe(gulp.dest('your dist folder'))
});
Disclaimer: I'm a total AMD n00b.
I have a project that I'm trying to convert over to AMD. Originally, all the code was in a single file. I was able to split functional units into their own modules, but they were all in the same file. I decided to split them into AMD modules and then combine everything using the optimizer. A helpful contributor already converted my module into UMD and so it seemed to be pretty simple to move everything over.
My main file (i.e., my library that I'm writing) looks like this:
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(factory);
} else {
// Browser globals
root.regula = factory();
}
}(this, function () {
define(
[
"utils/MapUtils",
"utils/DOMUtils",
"service/BindingService",
"service/ExceptionService",
"service/ConstraintService",
"service/ValidationService",
"service/GroupService"
],
function (MapUtils, DOMUtils, BindingService, ExceptionService, ConstraintService, ValidationService, GroupService) {
...
...
return {
configure: configure,
bind: bind,
unbind: unbind,
validate: validate,
custom: custom,
compound: compound,
override: override,
Constraint: ConstraintService.Constraint,
Group: GroupService.Group,
DateFormat: DateFormat,
Exception: ExceptionService.Exception
};
}
);
}));
And my directory structure is as follows:
regula
├── amdtest.html
├── dist
│ └── src
└── src
├── build.js
├── domain
│ └── CompositionGraph.js
├── jquery.regula.js
├── lib
│ ├── closure
│ │ └── compiler.jar
│ ├── require
│ │ ├── require.js
│ │ └── r.js
│ └── rhino
│ └── js.jar
├── parser
│ └── Parser.js
├── regula.js
├── service
│ ├── BindingService.js
│ ├── ConstraintService.js
│ ├── ExceptionService.js
│ ├── GroupService.js
│ └── ValidationService.js
└── utils
├── ArrayUtils.js
├── DOMUtils.js
└── MapUtils.js
My build.js is:
({
appDir: "../",
baseUrl: "src",
dir: "../dist",
modules: [{
name: "regula"
}]
})
I'm using Rhino and Closure to run the optimizer as follows:
java -cp lib/rhino/js.jar:lib/closure/compiler.jar org.mozilla.javascript.tools.shell.Main lib/require/r.js build.js
Unfortunately this doesn't produce any sort of output or error. All Javascript modules that are referenced in regula.js are AMD modules as well. Any idea what I'm doing wrong? I can post more information if that would help. I didn't want to do a huge dump of random information because as I mentioned before, I'm a complete newbie when it comes to AMD and so I'm not entirely sure what is relevant.
You forgot to pass the -o flag to run r.js in the optimizer mode! More details in the official docs
This is the structure of the files:
├── data
│ ├── icon.png
│ ├── upload.js
│ └── upload.js~
├── doc
│ └── main.md
├── icon.png
├── lib
│ ├── icon.png
│ ├── main.js
│ └── main.js~
├── package.json
├── package.json.backup
├── README.md
├── share2.xpi
└── test
└── test-main.js
This is the code in main.js:
const contextMenu = require("context-menu");
const data = require("self").data;
exports.main = function(options,callbacks){
var cm = require("context-menu").Item({
label:"share it",
contentScriptFile:data.url("upload.js"),
image:data.url("icon.png")
});
}
"share it" is displayed in the context menu, and the contentScriptFile is be excuted, but the image doesn't display. How can I solve this problem?
Make sure you're using a sufficient version of the Add-on SDK; the 'image' property was only added in version 1.1. If you're using 1.0, you'll need to update. Otherwise, it should be working.
I could be wrong but from the comments on Chris' answer, it seems like the issue is not with the icon but with your upload script.
It could be that the run process never reaches the image property to add it.
Do you get the same error if you remove the image property altogether?
Try this, it has worked for me:
var self = require("sdk/self");
require("sdk/context-menu").Item({
label: "Buscar lugar geográfico...",
contentScript: 'self.on("click", self.postMessage);',
onMessage: function () {
doSearch();
},
image:self.data.url("logo.png")
});
The Plupload plugin is a good example. Here's the listing of the plugin added to the vendor directory:
./plupload/jquery.plupload.queue
./plupload/jquery.plupload.queue/css
./plupload/jquery.plupload.queue/css/jquery.plupload.queue.css
./plupload/jquery.plupload.queue/img
./plupload/jquery.plupload.queue/img/backgrounds.gif
./plupload/jquery.plupload.queue/img/buttons-disabled.png
./plupload/jquery.plupload.queue/img/buttons.png
./plupload/jquery.plupload.queue/img/delete.gif
./plupload/jquery.plupload.queue/img/done.gif
./plupload/jquery.plupload.queue/img/error.gif
./plupload/jquery.plupload.queue/img/throbber.gif
./plupload/jquery.plupload.queue/img/transp50.png
./plupload/jquery.plupload.queue/jquery.plupload.queue.js
./plupload/jquery.ui.plupload
./plupload/jquery.ui.plupload/css
./plupload/jquery.ui.plupload/css/jquery.ui.plupload.css
./plupload/jquery.ui.plupload/img
./plupload/jquery.ui.plupload/img/plupload-bw.png
./plupload/jquery.ui.plupload/img/plupload.png
./plupload/jquery.ui.plupload/jquery.ui.plupload.js
./plupload/plupload.browserplus.js
./plupload/plupload.flash.js
./plupload/plupload.flash.swf
./plupload/plupload.full.js
./plupload/plupload.gears.js
./plupload/plupload.html4.js
./plupload/plupload.html5.js
./plupload/plupload.js
./plupload/plupload.silverlight.js
./plupload/plupload.silverlight.xap
Instead of relocating these files into various stylesheets, javascripts, and images directories, it's better to leave them in place and reference them with the Sprockets require directive. How is this done, particularly with respect to image files and other assets like .swf and .xap?
You can use the Sprockets provide directive.
For example, this is how I am using Plupload:
# app/assets/javascripts/plupload.js
//= require plupload/plupload
//= require plupload/plupload.flash
//= require plupload/plupload.silverlight
//= provide plupload/dependencies
The corresponding vendor directory is organised like this:
vendor
├── assets
│ ├── javascripts
│ │ └── plupload
│ │ ├── dependencies
│ │ │ ├── plupload.flash.swf
│ │ │ └── plupload.silverlight.xap
│ │ ├── plupload.flash.js
│ │ ├── plupload.js
│ │ └── plupload.silverlight.js
│ └── stylesheets
└── plugins
I then use <%= javascript_include_tag 'plupload' %> when I want to use Plupload, and use the asset_path helper to populate the Plupload configuration:
<%= javascript_include_tag 'plupload' %>
<script type="text/javascript">
$(function() {
var uploader = new plupload.Uploader({
runtimes : 'flash,silverlight',
multipart : true,
multipart_params : {
'authenticity_token' : '<%= form_authenticity_token %>'
},
flash_swf_url :
'<%= asset_path "plupload/dependencies/plupload.flash.swf" %>',
silverlight_xap_url :
'<%= asset_path "plupload/dependencies/plupload.silverlight.xap" %>',
url : '<%= url_for [#item, :photos] %>',
// ...
});
Hope that helps.
I may be wrong, but, as mentioned in Rails documentation :
This is not to say that assets can (or should) no longer be placed in
public; they still can be and will be served as static files by the
application or web server. You would only use app/assets if you wish
your files to undergo some pre-processing before they are served.
http://ryanbigg.com/guides/asset_pipeline.html
As you don't want any pre-processing on these files, could the good old public folder be your answer?