I'm using angular.js as my clientside framework and rails as my serverside framework. One slight stumbling block is where should I store my angular view templates?
Let's say I'm making a custom directive:
directive("foobaz", function (cart) { return {
restrict: "E",
templateUrl: "components/bing/foobaz.html"
}
How should I serve up components/bing/foobaz.html? Should I put it in my public folder:
root/public/bing/foobaz.html
Or should I make routes and a controller to serve up angular views?
Make a folder app/assets/templates/.
It will hold all of your angular templates. please refer this link to get more details http://start.jcolemorrison.com/setting-up-an-angularjs-and-rails-4-1-project/
you can use layouts folder in
app -> views -> layouts
or
with .yml, we can store it in config and no need to mention in routes.
We have angular-rails application.
And we store templates in app/assets/templates dir, and use haml for templates. For those purposes we're using angular-rails-templates gem
Related
I'm working on a rails + angularjs app.
Here is my file structure:
app/
assets/
javascript/
templates/
home.html
partial.html
Inside the home.html.erb file I want to include the partial.html.erb file.
home.html.erb
<ng-include src="'partial.html'"></ng-include>
I also tried
<ng-include src="'<%= asset_path('partial.html') %>'"></ng-include>
But still doesn't work... Thanks for your help
Setup gem "angular-rails-templates"
It will automaticaly compile your templates into javascript, and make them available to angular. After that you may use ng-include as usual.
<ng-include src="'templates/partial.tpl.html'"></ng-include>
It's not a good idea to mix server templates and AngularJS' templates. Put your AngularJS templates in your public directory, then put in the src attribute the path to this template from the client.
public/templates/partial.tpl.html => <ng-include src="'/templates/partial.tpl.html'></ng-include>"
Another way to get the template from the client is to compile your templates to a JS file with html2js for example.
Sorry that I am new to ruby on rails.
I am trying to create a directive in angularjs.
What I was doing is create an html file in folder view/forms, named topRight-buttonGroup.html
Then I just created a simple directive for test:
app.directive('topRightButtonTools', function(){
return {
restrict: 'C',
templateUrl: 'topRight-buttonGroup.html'
};
});
But getting the error message in the console is:
GET http://localhost:3000/forms/topRight-buttonGroup.html 404 (Not Found)
Am I missing something should be done on ruby on rails? Or should I write some redirect code and save in somewhere?
my full folder structure is:
If you need the form to be accessible so, create a folder inside public/ as forms/ and have the file placed there. Only content inside the public dir are rendered directly.
Unlike core php or other such scripting languages, RoR requires controllers to render actions which arent merely files that are interpreted. Also, routes are to be defined in config/routes.rb.
Refer:
http://guides.rubyonrails.org/routing.html
http://www.xyzpub.com/en/ruby-on-rails/3.2/statische_webseiten.html
I have to rewrite a legacy asp.net mvc app using lots of:
Url.Content()
to get it to work in a different/additional deployment environment where the virtual directory is a sub directory of the default site.
At the moment css classes like this:
.icos-pencil:before { content: url(/content/images/global/icons/usual/icon-pencil.png); }
are also broke. Is there a similar 'helper' (?) like Url.Content for the css above?
If you want use helper in js or css file you can write own view engine such as jsHelper or you can use this code
background-image:url('../../content/images/global/icons/usual/icon-pencil.png');
becomes
background-image:url('content/images/global/icons/usual/icon-pencil.png');
Simply use relative path in your CSS.
I would like to share js templates between front and back in a rails application for cases where the code would be duplicated.
The requirements are:
Either underscore (ejs) or handlebars/mustache templates. Preferably ejs because I'm already using underscore client side.
I'd also like to utilize the rails asset pipeline to pull these into JST object/functions so I can keep the template files separate and can get the other benefits like cacheing etc.
I've found some gems that work for one case or the other like handlebars_haml_assets, ejs, FlavourSaver etc but none that allow for all of these requirements out of the box. What is the best way to share js templates front and back and also use JST in a rails 3 app?
Rails 3.2 asset pipeline, out-of-the-box, supports Embedded Javascript (EJS) or Embedded CoffeeScript (Eco) templates and are made available using a JST (JavaScript templates) namespace. Just name your files appropriately:
app/assets/templates/top_level.jst.ejs
app/assets/templates/subdir/nested.jst.eco
To use them in your javascript:
var html = JST['top_level']({ data: 'something' });
var html = JST['subdir/nested']({ data: 'something' });
I'm a rails developer trying to learn Backbone and then I ran into this problem: since Underscore templates include symbols like <%=%>, I guess templates can't be included into erb files, so is it okay to have a rails partial for every single template? And what extension should it be?
You can escape the erb symbols by using two % in the opening tag, and put your backbone templates in the rails views:
<script type='text/template' id="my-template'>
<%%= name %>
</script>
will output the following in your page:
<script type='text/template' id="my-template'>
<%= name %>
</script>
Putting your Backbone templates directly in your rails views is IMHO the best option when you're trying to learn. You're already wrestling with the new concepts, no need to add another hurdle.
Starting with Rails 3.1, it provides two things that make working with Backbone templates a little easier: the asset pipeline, and automatic JST (JavaScript Template) compilation.
Create a directory in your app/assets folder called templates. This directory will automatically be picked up by the asset pipeline.
Next, name the files in that directory with an extension of jst and the type of template you are creating ejs (embedded javascript). You can even nest them in directories. For example:
app/assets/templates/my_template.jst.ejs
app/assets/templates/bookmarks/show.jst.ejs
The asset pipeline also allows you to use other templating languages like embedded coffeescript, mustache, handlebars, etc. by simply changing the file extension (and including any necessary gems).
Now to reference your JST templates in your Backbone views, simply use the path to the filename:
var Bookmark = Backbone.View.extend({
template: JST['bookmarks/show'],
render: function() {
this.$el.html(this.template(this.model.attributes));
return this;
}
});
You may need to add this line to your application.js:
// require_tree ../templates
Here's a nice article which explains all of this in a little more detail: http://www.bigjason.com/blog/precompiled-javascript-templates-rails-3-1
Where should you put your Backbone templates? I'd say nowhere. I believe that in most Rails applications, the server should be responsible for all rendering of HTML, while the client-side JavaScript should just be responsible for inserting that rendered HTML into the DOM. Among other things, this makes I18n easier.
The exception would be if Rails is simply being used as a lightweight backend for an application that runs mostly on the client side (though in that case, you might want to use Sinatra or something instead). In this case, Rails should probably render nothing, and have the JS do all the rendering.
Notice the underlying principle here. Either the server should be responsible for all rendering, or the client should. Splitting it will make life harder.