为什么 Angular 在使用 Rails 资产管道包含它时不起作用？

Question

我有一个名为 Factory 的 js 控制器：

(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 种将 angular 包含到项目中的方法 - 不同的结果。

第一个：使用资产管道

宝石文件

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

错误！

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

使用 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>

一切顺利。

谁能解释一下为什么？

Answer 1

将这个需要的代码拉到一个单独的文件中，然后在应用程序中需要这个文件。您也可以在浏览器中检查您的网络选项卡，看看 angular 是否在 ngresource 之后或之前加载。

Answer 2

我认为你必须在你的 gem 文件中做一些修改。

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

在你的 application.js

 //= require angular-resource

并尝试删除 //= require_tree . 我认为现在应该可以了。

Answer 3

我强烈认为您可能遇到了一些版本控制问题，或者与资产排序相关的问题。我有 Angular Rails ，效果很好。唯一的区别是我使用 bower 来管理下载和安装我需要的资产。

{
  "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

请注意 application.js 中的顺序非常重要。它会根据提到的顺序消化文件。

Answer 4

因为Angular需要一些技巧：

1) 尽可能避免使用 jQuery 2) Turbolinks 会引起冲突 3）如果你需要使用jquery，记得用jquery

包装兼容性

basic reference

为什么 Angular 在使用 Rails 资产管道包含它时不起作用？

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

javascript

ruby

ruby-on-rails

asset-pipeline

angularjs