CODEWITHSUNDEEP
javascriptruby-on-railsangularjsrubyasset-pipeline
Denys Medynskyi
Denys Medynskyi

Reputation: 2353

Why Angular doesn't work when including it using Rails asset pipeline?

I have js controller where Factory is called:

(function() {
  'use strict';
  angular
    .module('projectAlabama')
      .controller('indexResourceListController', indexResourceListController);

  indexResourceListController.$inject = ['resourceListFactory'];

  function indexResourceListController(resourceListFactory) {
    var vm = this;

    resourceListFactory.query().$promise.then(function(data) {
      vm.lists = data.splice(0, limit);
    });
  }
})();

2 approaches of including angular into the project - different result.

First one: using asset pipeline

Gemfile

source 'https://rails-assets.org'
gem 'rails-assets-angular'
gem 'rails-assets-ng-resource'

application.js

//= require angular
//= require ng-resource
//= require angular-route
//= require angular-rails-templates
//= require angular-material

//= require app
//= require_tree ./templates
//= require_tree ./controllers
//= require_tree ./factories

Error !

angular.self.js?body=1:13643 TypeError: Cannot read property 'then' of undefined
at new indexResourceListController

Second approach using CDN:

layout.html.erb

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-resource.min.js"></script>

And everything works smoothly.

Can someone explain me why ?

Upvotes: 1

Views: 616

Answers (4)

Charles Magnussen
Charles Magnussen

Reputation: 52

Because Angular needs some tricks:

1) Avoid to use jQuery if is possible 2) Turbolinks can cause conflicts 3) If you need to use jquery, remeber to wrap the compatibility with jquery

basic reference

Upvotes: 0

Ronak Jain
Ronak Jain

Reputation: 1783

I strongly feel that you might be having some versioning issue, or issue related to the ordering of your assets. I have Angular Rails which works fine just fine. The only difference is I've used bower to manage download and Install the assets I need.

{
  "name": "MyApp",
  "version": "0.0.1",
  "description": "",
  "dependencies": {
    "angular": "1.5.0",
    "angular-resource": "1.5.0",
    "angular-route": "1.5.0",
    "many-more" : "*"
  },
  "devDependencies": {},
  "resolutions": {
    "angular": "1.5.3"
  }

}

Application.js

//= require jquery
//= require bootstrap
//= require angular
//= require angular-resource
//= require angular-route
//= require angular-rails-templates

//= require ng-app/app
//= require_tree ../templates
//= require_tree ../javascripts/ng-app

Please note that the order in the application.js is very important. It'd digest the file according to the mentioned order.

Upvotes: 0

Pravesh Khatri
Pravesh Khatri

Reputation: 2244

I think you have to do some ammends in your gem file.

 source 'https://rails-assets.org' 
 gem 'rails-assets-angular'
 gem "rails-assets-angular-resource"

and in your application.js

 //= require angular-resource

and try to remove //= require_tree . I think it should work now.

Upvotes: 3

Jatin Tiwari
Jatin Tiwari

Reputation: 19

Pull this require code in a seperate file and then require this file in application is. You can check your network tab in browser too see if angular is loading after or before ngresource.

Upvotes: 0

Related Questions