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

【问题标题】：Why Angular doesn't work when including it using Rails asset pipeline?为什么 Angular 在使用 Rails 资产管道包含它时不起作用？
【发布时间】：2016-09-26 12:39:29
【问题描述】：

我有一个调用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);
    });
  }
})();

在项目中包含 Angular 的两种方法 - 不同的结果。

第一个：使用资产管道

宝石文件

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

应用程序.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>

一切顺利。

谁能解释一下为什么？

【问题讨论】：

angular 使用了哪个 gem？
@PraveshKhatri 更新问题
请在删除//= require_tree .和//= require ng-resource后检查并申请//= require angular-resource
@PraveshKhatri 它没有 require_tree 。还是不行
@skrypalyk 当你使用 Rails 资产方法时，下载的版本是什么？

标签： javascript ruby-on-rails angularjs ruby asset-pipeline

【解决方案1】：

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

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

在你的 application.js 中

 //= require angular-resource

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

【讨论】：

【解决方案2】：

我强烈认为您可能遇到了一些版本问题，或者与资产排序相关的问题。我有 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"
  }

}

应用程序.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 中的顺序非常重要。它会根据提到的顺序消化文件。

【讨论】：

【解决方案3】：

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

【讨论】：

在 ng-resource 之前需要 Angular。网络正在向服务器显示 API 请求

【解决方案4】：

因为 Angular 需要一些技巧：

1) 尽可能避免使用 jQuery 2) Turbolinks 会导致冲突 3）如果你需要使用jquery，请记住包装与jquery的兼容性

basic reference

【讨论】：