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.
Related
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'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.
I have a file called myjavascript.js.erb in my assets path. This is where I put all my project related javascript etc.
As I understand it, rails runs this file through the erb interpreter first and then loads the resulting JS file.
I have the following line in my file
console.log( "<%= root_path %>" );
I was hoping that this would log the root path of the project but unfortunately it seems to only get me
"/path to rails project omitted/app/assets/javascripts"
Surely this should point to the root of my project? Am I doing something wrong?
You can use
Rails.root
To get to the root path in Rails.
Fairly new to Rails. I am implementing a wholesale homepage redesign on a Rails site. For the time being, we will push the redesigned home page but leave the rest of the site as is. Later, we will port the rest of the site to the new design.
I would like to create a "branch" of the CSS inside the current project that is loaded only by the home page. We use SASS to generate the CSS. The file layout:
/public/stylesheets: #Generated CSS for rest of site
/public/stylesheets/sass: #SASS source files for rest of site
/public/stylesheets/v3: #Desired location for CSS for home page
/public/stylesheets/v3/sass: #SASS source files for new-style home page
The controller for / calls render :layout => 'v3', and this layout contains:
!= include_stylesheets :common_v3, :media => "all"
Here's the relevant section from assets.yml:
stylesheets:
common:
- public/stylesheets/reset.css
- public/stylesheets/*.css
common_v3:
- public/stylesheets/v3/reset.css
- public/stylesheets/v3/*.css
Could someone help me figure out how to make SASS generate the new CSS files? If I put a new file in /public/stylesheets/sass, the corresponding CSS file is created, but the v3 dir is ignored.
I tried the following in environment.rb, but it's not working.
Sass::Plugin.options[:template_location] = %W( #{RAILS_ROOT}/public/stylesheets/sass #{RAILS_ROOT}/public/stylesheets/v3/sass )
Using Rails 2.3.8 with Haml 2.2.2.
First, upgrade Haml/Sass to the latest version (3.0.24).
Now you can use the Sass::Plugin.add_template_location method to tell Sass where your templates are. For example:
Sass::Plugin.add_template_location("#{RAILS_ROOT}/public/stylesheets/v3/sass",
"#{RAILS_ROOT}/public/stylesheets/v3")
How do I use CSS with RoR? When I link externally, I'm never able to see the files. I cp'd the .css file to every folder I could think of...views, controller, template, and nothing seems to work.
What do I need to do to enable external CSS files with a rails application? I'm new to rails, so forgive me if this is basic.
Put the CSS files in public/stylesheets and then use:
<%= stylesheet_link_tag "filename" %>
to link to the stylesheet in your layouts or erb files in your views.
Similarly you put images in public/images and javascript files in public/javascripts.
If you are using rails > 3 version, then there is a concept called asset pipeline. You could add your CSS to
app/assets/stylesheets
then it will automatically be picked up by the app. (this is useful as rails will automatically compress the CSS files)
read more here about the asset pipeline
Use the rails style sheet tag to link your main.css like this
<%= stylesheet_link_tag "main" %>
Go to
config/initializers/assets.rb
Once inside the assets.rb add the following code snippet just below the Rails.application.config.assets.version = '1.0'
Rails.application.config.assets.version = '1.0'
Rails.application.config.assets.precompile += %w( main.css )
Restart your server.
I did the following...
place your css file in the app/assets/stylesheets folder.
Add the stylesheet link <%= stylesheet_link_tag "filename" %> in your default layouts file (most likely application.html.erb)
I recommend this over using your public folder. You can also reference the stylesheet inline, such as in your index page.
The original post might have been true back in 2009, but now it is actually incorrect now, and no linking is even required for the stylesheet as I see mentioned in some of the other responses. Rails will now do this for you by default.
Place any new sheet .css (or other) in app/assets/stylesheets
Test your server with rails-root/scripts/rails server and you'll see the link is added by rails itself.
You can test this with a path in your browser like testserverpath:3000/assets/filename_to_test.css?body=1
To add to the above, the most obvious place to add stylesheet_link_tag is in your global application layout - application.html.erb.
With Rails 6.0.0, create your "stylesheet.css" stylesheet at app/assets/stylesheets.
Have you tried putting it in your public folder? Whenever I have images or the like that I need to reference externally, I put it all there.