I have a rails application, using angularjs for the client side development. I try to load a template located in `app/assets/javascripts/templates/':
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: '/index.html',
controller: 'MainController'
}).
otherwise({
redirectTo: '/'
});
}]);
but I always get a error: "Error: [$compile:tpload] Failed to load template: /index.html".
I tried to move the "templates" folder out of the javascripts - app/assets/templates and to add it to my assets pipeline load by adding the following line to config/application.rb: config.assets.paths << Rails.root.join("app","assets","templates")
I keep getting the same error message until I use the full path to the template: templateUrl: '/assets/index.html',.
Why the first method is not enough? the angular-rails-templates gem shouldn't look for templates in app/assets/javascripts/templates?
Why should I use the full path to an assets inside my javascript?
My problem has been a sprockets incompatibility. Version 2.1.3 works though so I put this in my Gemfile:
gem 'sprockets', '2.12.3'
And I ran bundle update sprockets and it's all peachy.
Practice has shown that you should keep Angular templates in ./public folder. For example make a folder called templates in the public folder. Now you can just call them like this: templateUrl: 'templates/index.html'
This makes sense as the app/assets/ is indeed only used for javascript and css files. Also you have the html files in app/views, but these are compiled by server because they use .erb extension. What you want is to have regular html files ready to be used any time. So you put them to public folder.
try this, I hope this will worked.
myApp.config(function ($routeProvider) {
$routeProvider.
when('/', {
templateUrl: '/index.html',
controller: 'MainController'
}).
otherwise({
redirectTo: '/'
});
});
I solved this issue by adding "gem 'sprockets'" into the Gemfile
Related
I've a project running with Angular 2 and webpack 2 but currently I load all my templates directly into the js file with no addional template loading from the server. That works great.
#Component({
selector: 'logmonitor',
styleUrls: [ './logmonitor.component.less' ],
templateUrl: './logmonitor.component.html'
}) ...
but I need to load only some Templates from a cshtml view and the views should only get loaded with an extra server request when I open these views.
I've created a simple cshtml view in my views folder an I can directly "show" it when typing the right controller/action into the url. That "works"
but I've tried to set this to get the Template loaded
#Component({
selector: 'testView',
templateUrl: 'Logviewer/TestLogview',
}) ...
but webpack will not compile the view it gives a error
Module not found: Error: Can't resolve './Logviewer/TestLogview' in 'C:\SourceControl\WebLogViewer\App\Views\LogViewer'
thats right the file is daved in
C:\SourceControl\WebLogViewer\Views\LogViewer
but I don't want that webpack tries to resolve this url, angular itself need to call this url when the view gets loaded. I've thought webpack will not try to load the cshtml file when I don't write the "./" in front of the file name, but thats not working. Is there a solution how I can prevent webpack from parsing all templateUrl ?
thats my current Loader for html files, but this should not parse the string because there is not .html at the end :-/
{
test: /\.html$/,
use: ['raw-loader'],
exclude: [helpers.root('App/index.html')]
},
You can find a working example in this repo.
https://github.com/timdows/webpages/tree/master/Angular2RazorViews
The key is lazy loading and
angular2-load-children-loader
in loading the ts template dependencies
So I'm writing a small app and currently working on the angular js front end. The backend is written in RoR but thats besides the point. I have a dependency ui.router in my angular.module so I can move around pages.
Link to github branch if interested: linky link
Paths:
App
-Assets
-Javascripts
-app.js (where the routing lies)
-Templates
-dashboard.html (this is the template I want to render)
-Views
-Layouts
-Index.html.erb <- this is the index
Heres the problem:
angular.module('SwoleMetrics', [
'ui.router',
'templates'
])
.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
/**
* Routes and States
*/
$stateProvider
.state('dashboard', {
url: '/dashboard',
templateUrl: 'dashboard.html', <<--- RIGHT HERE
controller: 'DashboardCtrl'
});
// default fall back route
$urlRouterProvider.otherwise('/dashboard');
// enable HTML5 Mode for SEO
$locationProvider.html5Mode(true);
});
No matter what path I put into templateUrl, it never works. I have the same html file in basically every folder around app.js to see if it could read any of those but it always fails and just recursively inserts the parent div into the . Do any front end engineers know why?
The issue was the way the files were being served via rails. The sprockets gem was updated and no longer compatible with angular-ui-templates and broke everything. Downgraded to sprockets v. 2.x and it worked.
Its going to be relative to index.html. If index.html is under App then your path is going to be templateUrl: 'Templates/dashboard.html'.
I currently have this directory layout:
project
web
app.html
main.dart
templates
app.html
alerts.html
menu.html
components
AppComponent.dart
AlertsComponent.dart
MenuComponent.dart
resources
css
bootstrap.css
My components look like:
#Component(
selector: 'app',
templateUrl: 'templates/app.html'
)
class AppComponent { ... }
My application's index.html (in another project) is served from /client, and project/web is served from /project. The above works in Dartium, but I get errors from pub build:
[Warning from _Serial on project|web/main.dart with input project|web/components/AppComponent.dart]:
line 3, column 1 of web/components/AppComponent.dart: Unable to find templates/app.html at project|templates/app.html
#Component(
^^^^^^^^^^^
and
[Warning from _Serial]:
Unable to find webatara|web/main.dart from html_files in pubspec.yaml.
and
[Warning from TemplateCacheGenerator]:
Can't find asset web/web/templates/app.html.
depending on what combination of paths I use in templateUrl and html_files (for Angular's transformer).
What, exactly, should go where and how should it be referenced in templateUrl and pubspec.yaml?
Update: I can get rid of my build errors by moving my templates to the lib directory and using templateUrl: 'packages/project/templates/app.html', but then Dartium tries to load that as /packages/project/templates/app.html, and not /project/packages/project/templates/app.html, which would be correct. I don't see any way to tell it what the base URL is.
but then Dartium tries to load that as
/packages/project/templates/app.html, and not
/project/packages/project/templates/app.html, which would be correct.
I don't see any way to tell it what the base URL is.
I believe you are using angulardart 1.1.1 or 1.1.2? We had the same issue in our project after switching from 1.1.0 to 1.1.2. This is weird behaviour that was added since version 1.1.1.
For some reason default package root in AngularDart now is '/packages/'. This causes generation of root-relative URLs. In your case it generates
/packages/project/templates/app.html
instead of
packages/project/templates/app.html
It's OK while you app is in the root of your domain. But in your case what you need to do is to add following to your initialization method in main.dart:
bind(ResourceResolverConfig, toValue: new ResourceResolverConfig
.resolveRelativeUrls(true, packageRoot: 'packages/'));
This will override angular's default packages root and will make it generate correct relative URLs.
Hope it helps.
I am trying to set a templateUrl on a route in AngularJS using an html file in a child directory of assets. It works fine locally.
The templates are stored at: #{RAILS_ROOT}/app/assets/templates
# Sets up routing
Blog.config(['$routeProvider', ($routeProvider) ->
# Route for '/post'
$routeProvider.when('/post', { templateUrl: './assets/mainIndex.html', controller: 'PostCtrl' } )
# Default
$routeProvider.otherwise({ templateUrl: './assets/mainIndex.html', controller: 'IndexCtrl' } )])
I've tried leveraging asset_path, but that doesn't seem to work at all.
try to remove the ./ before the assets
$routeProvider.when('/post', { templateUrl: 'assets/mainIndex.html', controller: 'PostCtrl' } )
We must both be working on the same AngularJS/Rails tutorial. I am stuck on the same part.
asset_path does work. Make sure your javascript.coffee file ends in .erb
My templates are at:
app/assets/templates
In my main.js.coffee.erb (DONT FORGET the .erb), I have the templateUrl defined as:
templateUrl: '<%= asset_path('mainIndex.html')%>'
This works locally. Unfortunately, it still isn't working in production (I'm using OpenShift.) The precompiled files are being generated at (public/assets.) However, the asset_path always resolves to
GET /assets/mainIndex.html
rather than something like:
GET assets/mainIndex-435fd76973a72d658af47da0fb824bcd.html
In the logs, I see all of the assets GETs referencing the precompiled files, but for some reason, this templateUrl isnt. That's my next problem to solve.
I am trying to get jPlayer working with the flash fallback in a rails app and so far no luck! My constructor right now looks like this:
$("#jquery_jplayer_1").jPlayer({
preload: "auto",
errorAlerts: true,
swfPath: "javascripts",
solution: "flash, html",
supplied: "oga",
wmode: "window",
ended: function(e) {
...some function...
}
});
I cannot get the swfPath correct it seems, and I must be missing something here about how jPlayer is looking for that path. My other assets, such as images from stylesheets, seem to be correctly routed to the assets folder/images folder. I can't seem to find the magic combination to get jPlayer to find the Jplayer.swf. I have tried putting the swf file in the public folder, in a folder within the public folder, in the assets folder, and in the javascripts folder within the assets folder. No luck! Has anybody dealt with this problem before?
I have the same problem... After finding no answer on the Internet, I started trying stuff :)
This worked for me (Rails 3.2):
$(document).ready(function(){
$("#jplayer").jPlayer({
ready: function (event) {
$(this).jPlayer("setMedia", {
m4a: "url goes here"
});
},
swfPath: "/",
supplied: "m4a",
solution: "flash, html"
});
});
or in coffeescript:
$ = jQuery
$ ->
$(document).ready ->
$("#jplayer").jPlayer(
ready: (event) ->
$(this).jPlayer "setMedia",
m4a: "url goes here"
preload: "auto",
swfPath: "/",
solution: "html, flash",
supplied: 'm4a')
I placed the Jplayer.swf file under public/. Works now!
I think a nifty way of doing this is to add a swf dir to the asset pipeline.
You can do this by adding
config.assets.paths << Rails.root.join("app", "assets", "swf")
to your config/application.rb file and drop the Jplayer.swf file in vendor/swf/Jplayer.swf
In your JS file you import this by using .js.erb
$(document).ready(function(){
$("#jplayer").jPlayer({
swfPath: "<%= asset_path "Jplayer.swf" %>"
});
});
Since nobody has mentioned it here yet, you can also do it like this in your jplayer initialization code:
Works with Rails >= 3.2 that uses the asset pipeline!
swfPath: "<%= escape_javascript(asset_path('jplayer/Jplayer.swf')) %>",
solution: "flash,html",
supplied: "rtmpa,mp3",
And remember the file has a capital J :-)