can someone give me a quick solution please? I have done this:
My routes:
offline = Rack::Offline.configure do
cache ActionController::Base.helpers.asset_path("application.css")
cache ActionController::Base.helpers.asset_path("application.js")
cache ActionController::Base.helpers.asset_path("jquery.min.css")
cache ActionController::Base.helpers.asset_path("jquery.tmpl.min.css")
cache ActionController::Base.helpers.asset_path("style.js")
# cache ActionController::Base.helpers.asset_path("custom.css")
network "/"
end
get "/application.manifest" => offline
in application.html.erb:
<html manifest="/application.manifest">
in my gemfile:
# gem 'rack-offline'
# gem 'rack-offline', :github => 'pascalw/rack-offline'
gem 'rack-offline', :git => 'https://github.com/wycats/rack-offline.git'
my Rails version: 4.1.6, Ruby version: 2.1.3
this is the output at http://localhost:3000/application.manifest is:
CACHE MANIFEST
# a5a8232b037b9e6234e3db79ab4b2bff8fffecd76c4124f456273146f70631b0
/assets/application.css
/assets/application.js
NETWORK:
/
I have also added ENV["RAILS_ASSET_ID"] = "" in application.rb as rails cast #247 Offline Apps Part 1.
Please someone advise what I am doing wrong??
routes.rb
offline = Rack::Offline.configure do
#cache "images/masthead.png"
cache ActionController::Base.helpers.asset_path("jquery.js")
cache ActionController::Base.helpers.asset_path("jquery_ujs.js")
cache ActionController::Base.helpers.asset_path("application.css")
cache ActionController::Base.helpers.asset_path("application.js")
cacheActionController::Base.helpers.asset_path("jquery.offline.js")
cache ActionController::Base.helpers.asset_path("jquery.tmpl.min.js")
cache ActionController::Base.helpers.asset_path("json.js")
cache ActionController::Base.helpers.asset_path("offline_mode.js")
network "/"
end
get "/application.manifest" => offline
applicaiton.js something like this
//= require jquery
//= require jquery_ujs
//= require jquery.tmpl.min
//= require jquery.offline
//= require json
//= require offline_mode
//= require_tree .
Related
I am using rails 4.2.4
Gem file
gem 'angularjs-rails', '~> 1.4', '>= 1.4.7'
gem 'bootstrap-sass', '~> 3.3.6'
application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require angular
//= require bootstrap-sprockets
//= require_tree .
application.css.scss
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require_self
*/
#import "bootstrap-sprockets";
#import "bootstrap";
I have installed these files by manually downloading those files and including it in my javascript folder .
1) angular-datatables.min.js
2) angular-route.min.js
3) jquery.dataTables.min.js
4) routing.js
5) ui-bootstrap-0.14.0.min.js
6) ui-bootstrap-tpls.min.js
I don't know how to resolve this error actually I have never use angularjs But I need to include those files .My errors are
TypeError: Cannot read property 'serverSide' of undefined
at Object.f [as fromOptions] (angular-datatables.min.self-e164bdf0c2d9000c6262c232dc2dd041f3372c4d835392429a38b0919321ce99.js?bod…:7)
at angular-datatables.min.self-e164bdf0c2d9000c6262c232dc2dd041f3372c4d835392429a38b0919321ce99.js?bod…:7
at processQueue (angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:14793)
at angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:14809
at Scope.$eval (angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:16053)
at Scope.$digest (angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:15871)
at Scope.$apply (angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:16161)
at bootstrapApply (angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:1680)
at Object.invoke (angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:4524)
at doBootstrap (angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:1678)(anonymous function) # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:12521(anonymous function) # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:9293processQueue # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:14801(anonymous function) # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:14809Scope.$eval # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:16053Scope.$digest # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:15871Scope.$apply # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:16161bootstrapApply # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:1680invoke # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:4524doBootstrap # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:1678bootstrap # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:1698angularInit # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:1592(anonymous function) # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:29014fire # jquery.self-a714331225dda820228db323939889f149aec0127aeb06255646b616ba1ca419.js?body=1:3149self.fireWith # jquery.self-a714331225dda820228db323939889f149aec0127aeb06255646b616ba1ca419.js?body=1:3261jQuery.extend.ready # jquery.self-a714331225dda820228db323939889f149aec0127aeb06255646b616ba1ca419.js?body=1:3473completed # jquery.self-a714331225dda820228db323939889f149aec0127aeb06255646b616ba1ca419.js?body=1:3504
angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:10766 GET http://localhost:3000/devices/js/device.json 404 (Not Found)(anonymous function) # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:10766sendReq # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:10559serverRequest # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:10269processQueue # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:14793(anonymous function) # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:14809Scope.$eval # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:16053Scope.$digest # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:15871Scope.$apply # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:16161bootstrapApply # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:1680invoke # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:4524doBootstrap # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:1678bootstrap # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:1698angularInit # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:1592(anonymous function) # angular.self-d7c642a2239d433e219a2df47d65f3290d6ec49b679e42a3c8e8099a4a86d8f0.js?body=1:29014fire # jquery.self-a714331225dda820228db323939889f149aec0127aeb06255646b616ba1ca419.js?body=1:3149self.fireWith # jquery.self-a714331225dda820228db323939889f149aec0127aeb06255646b616ba1ca419.js?body=1:3261jQuery.extend.ready # jquery.self-a714331225dda820228db323939889f149aec0127aeb06255646b616ba1ca419.js?body=1:3473completed # jquery.self-a714331225dda820228db323939889f149aec0127aeb06255646b616ba1ca419.js?body=1:3504
You are loading angular-datatables before jquery.datatables which is causing that issue.
You should move your downloaded files to vendor/javascript folder and then load them in the correct order:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require angular
//= require bootstrap-sprockets
//= require jquery.dataTables.min
//= require angular-datatables.min
//= require_tree .
Here is my angular module and route
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/photo', {
templateUrl: 'templates/photo.html',
controller: 'PageController'
})
}])
When I run my app getting error as
error: [$injector:modulerr] Failed to instantiate module ngRoute due to:
I have used this angularjs gem
Can any one help to solve this issue.
ngRoute is a separated module since some (maybe 1.2) version of AngularJS.
gem includes all modules, you just have to require needed ones in your application.js:
//= require angular
//= require angular-route
Here is the list with all available modules:
//= require angular
//= require angular-animate
//= require angular-cookies
//= require angular-loader
//= require angular-mocks
//= require angular-resource
//= require angular-route
//= require angular-sanitize
//= require angular-scenario
//= require angular-touch
On Gemfile I have this following gem gem 'rails-timeago', '~> 2.0' and on application.js I load these scripts in this order
//= require jquery
//= require jquery_ujs
//= require ckeditor-jquery
//= require bootstrap/bootstrap
//= require rails-timeago
//= require locales/jquery.timeago.fr.js
//= require jquery.flexslider
//= require_tree .
On my view I'm calling timeago
<%= timeago_tag story.created_at, :nojs => true, :limit => 3.days.ago, :lang => :fr %>
On application.html.erb
<%= timeago_script_tag %>
and On my browser I have this result
<script>
//<![CDATA[
jQuery.timeago.settings.lang="en";
//]]>
</script>
Even though I copy-paste this code to replace the script_tag and added .lang="fr" on application.html.erb, it still doesn't do the translation.
The view segments (from the browser):
<time data-time-ago="2014-02-24T03:04:02Z" datetime="2014-02-24T03:04:02Z" lang="fr" title="Mon, 24 Feb 2014 03:04:02 +0000">2 days</time>
I'm using Rails 3.2, and am somewhat confused about the handling of subdirectories and relative paths of the asset pipeline.
My situation
I'm trying to include four code files in (javascripts/edit), one of them being in the subdirectory javascripts/edit/ckeditor, in a manifest file, (javascripts/edit/all.js). I'm not including these in the application.js because I want to include these scripts only on certain pages.
Doing //= require ckeditor/ckeditor doesn't work. Doing //= require mycode (to require javascripts/edit/mycode.js), too, doesn't work, apparently because mycode.js is in the "edit" subdirectory of the javascripts "root" folder. To make it work, I had to put this:
//= require ./ckeditor/ckeditor
//= require ./json2
//= require ./cssjson
//= require ./mycode
inside of my manifest all.js. Note that this:
//= require edit/ckeditor/ckeditor
//= require edit/json2
//= require edit/cssjson
//= require edit/mycode
works exactly the same, even though all.js itself is already in the edit subdirectory.
So my question is, why does this work this way? I would expect to be able to put manifest files in subdirectories and just include files that are in that same subdirectory (e.g. //= require json2), but apparently, all //= require directives in any file below app/assets/javascripts always are relative to that "root" folder, not the subdirectory that the manifest files are in.
So my question is, why does this work this way?
Because when Rails compiles the assets, it's compiling from a central point, not your subdirectory. The manifest system works based on the assets' root path (the documentation says The first feature of the pipeline is to concatenate assets), consequently your assets will be compiled from the application.js file
You have to remember when Rails runs, it's not loading the assets dynamically. It's designed to load application.css / application.js all the time, and it's then up to the developer to delegate assets which they wish to load on specific pages
The way we do this is to include all the "constant" files in our application.js file, and then load controller-specific assets in the layout. This allows us to only call things like JQuery all the time, whilst we may call specific JQuery plugins for certain controllers:
Including The Right Assets In The Right Places
This is what we do:
#app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= stylesheet_link_tag controller_name, media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag controller_name, "data-turbolinks-track" => true %>
#app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require jquery.ui.draggable
//= require_tree ./jquery
//= require_tree ./extra
//= require turbolinks
#app/assets/javascripts/users.js.erb
//= require ** anything you want **
This allows you to have a lot more control over which assets you're loading
I'm in the process of intergrating Ember.js into an existing Rails app. Would like to begin by using Ember for just a single controller action dashboard#index. From there, I'm planning to integrate the rest of the site into the ember application, probably on a per controller basis.
But I'm having trouble managing the ember URLs, because I'm not yet ready to cede control of the Rails root route to Ember.
For example, I'd like the following routes to be handled by rails, w/o Ember:
/
/login
/logout
while:
/dashboard
should trigger the Ember application. Then, there would be various ember dashboard routes such as /dashboard/#/favorites and dashboard/#/upcoming
I've got alternate Rails layouts and paths through the asset pipeline set up just fine, but I'm finding the Ember router doesn't play nice if the ember routes are tacked on after a prefix such as /dashboard/.
Is there a clean way to set this up?
Thanks
inside your dashboard controller set layout false so that it ignores your application layout.
Then make your dashboard/index.html.erb file to create its own layout and include the ember application. It should look something like this:
<!DOCTYPE html>
<html>
<head>
<title>ember app</title>
<%= stylesheet_link_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= javascript_include_tag "ember_app" %>
</body>
</html>
then in your assets/javascripts/ you should have a file ember_app.js that looks like this:
//= require handlebars
//= require ember
//= require ember-data
//= require_self
//= require ./store
//= require_tree ./models
//= require_tree ./controllers
//= require_tree ./views
//= require_tree ./helpers
//= require_tree ./components
//= require_tree ./templates
//= require_tree ./routes
//= require ./router
//= require helpers
# for more details see: http://emberjs.com/guides/application/
window.DashboardApp = Ember.Application.create()
A good resource i used is the ember-rails gem. It has good documentation as well.