When working on my project in AngularDart, I created a component called LoginComponent:
// lib/component/login.dart
#Component(
selector: 'login',
templateUrl: 'login.html')
class LoginComponent {
String username;
String password;
}
In the same folder where I created the login.dart script, I also put it's template code:
<!-- /lib/component/login.html -->
<form ng-submit="login()">
<input type="text" placeholder="Username" ng-model="username" />
<input type="password" placeholder="Password" ng-model="password" />
<input type="submit" value="Submit" />
</form>
The project's structure looks as follows:
.
├── CHANGELOG.md
├── LICENSE
├── README.md
├── lib
│ ├── annotations.dart
│ └── component
│ ├── login.dart
│ └── login.html
├── pubspec.lock
├── pubspec.yaml
└── web
├── index.html
└── main.dart
I also added the html template to the angular transformer:
name: 'duseapp'
version: 0.0.1
description:
An absolute bare-bones web app.
environment:
sdk: '>=1.0.0 <2.0.0'
dependencies:
browser: any
web_components: ">=0.10.1 <0.11.0"
angular: ">=1.1.0 <2.0.0"
restpoint:
git: git://github.com/Adracus/restpoint.git
duse:
git: git://github.com/duse-io/duse-dart.git
transformers:
- angular:
html_files:
- lib/component/login.html
But now, I'm receiving the error:
Target of URI does not exist: 'login.html'
Does anybody know what's the cause of this?
For further insight, the github url of the project is here.
Thanks for your help.
After digging around for a day, I found an interesting post on Google Groups, which solved my problem (except for a little mistake, it is 'packages' instead of 'package'). According to the post, one should specify the templateUrl as follows:
templateUrl: 'packages/<package-name>/<any-lib-subdirectory>/<filename>'
That solved my problem.
Related
I'm testing with the developer preview of Angular Version 2 and serving it up using pub serve
I would like to estalblish a convention to structure my files inside /lib/ as follows:
└── project/lib/root
├── root.css
├── root.dart
└── root.html
└── project/web/
├── index.html
└── index.dart
In my /web/index.dart file i am successfully able to initialize the #View and #Component from root.dart
However, when i preview in Dartium via pub serve - i can't seem to serve up /lib/root/root.html
#Component(
selector: 'jroot'
)
#View(
templateUrl: '../../lib/root/root.html',
directives: const [If]
)
class Root {
String content = 'Root - This is the entry point to the component';
List<Times> list;
Root(){
print('RootComponent Init');
}
}
Dartium Console:
GET http://localhost:8080/lib/root/root.html 404 (Not Found)
I've been reading the documents for polymer here which states:
"Non-Dart files under lib must use relative paths to import assets under lib:"
https://www.dartlang.org/polymer/app-directories.html
<!-- lib/a5/a6/a6.html imports lib/a4.html -->
<link rel="import" href="../../a4.html">
Running a python simple web server seems to work, so the problems is with pub serve:
python -m SimpleHTTPServer
Question: How do a configure pub serve to work with nested html files from the lib folder?
Ensure you have the proper entry points on your pubspec.yaml transformers:
name: 'project'
version: 0.0.1
dependencies:
angular2: '2.0.0-alpha.23'
browser: any
transformers:
- angular2:
entry_points:
- web/index.dart //this
reflection_entry_points:
- web/index.dart //this
Then I think this should work
templateUrl: 'packages/project/root/root.html',
or just
templateUrl: 'root.html',
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.
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?