Rails应用程序中的角度给出错误答案

【问题标题】：Angular giving error inside Rails applicationRails应用程序中的角度给出错误
【发布时间】：2016-03-28 15:56:37
【问题描述】：

我有 2 个应用程序。两者都是 Rails 应用程序，并且都使用 Angular。在一个应用程序中，角度工作正常，在另一个应用程序中，角度给我这个错误：

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

这是我的代码：

Application.html.erb

<!DOCTYPE html>
<html lang="en-US" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <%= smart_stylesheet_link_tag media: "all", "data-turbolinks-track" => true %>
  <%= csrf_meta_tags %>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<body>
 <%= yield %>
</body>
</html>

Application.js

//= require angular
//= require bighorn/dist/bighorn
//= require jquery
//= require jquery_ujs
//= require jquery-autogrow-textarea/src/jquery.autogrow.js
//= require turbolinks
//= require lodash/lodash
//= require humane-js/humane
//= require ahoy
//= require bootstrap-sprockets
//= require bootstrap-datepicker/js/bootstrap-datepicker
//= require nprogress
//= require nprogress-turbolinks
//= require corejs-typeahead/dist/bloodhound
//= require corejs-typeahead/dist/typeahead.jquery
//= require main
//= require jobs
//= require static

宝石文件

gem "rails",                        "4.2.5.1"
gem "pg",                           "0.18.4"
gem "activerecord-postgis-adapter", "3.1.4"
gem "sass",                         "3.4.13"
gem "sass-rails",                   "5.0.1"
gem "bootstrap-sass",               "3.3.5.1"
gem "font-awesome-rails",           "4.4.0.0"
gem "uglifier",                     "2.7.1"
gem "simple_form",                  "3.1.0"
gem "valid_email",                  "0.0.11"
gem "jquery-rails",                 "4.0.3"
gem "turbolinks",                   "2.5.3"
gem "jbuilder",                     "2.2.12"
gem "activerecord-session_store",   "0.1.1"
gem "ahoy_matey",                   "1.2.1"
gem "browser",                      "1.1.0"
gem "oj",                           "2.12.14"
gem "carmen-rails",                 "1.0.1"
gem "compass-rails",                "2.0.4"
gem "nprogress-rails",              "0.1.6.6"
gem "devise",                       "3.5.2"
gem "devise-async",                 "0.10.1"
gem "httparty",                     "0.13.7"
gem "rugged",                       "0.22.2"
gem "sidekiq",                      "4.0.2"
gem "redis-namespace",              "1.5.2"
gem "sitemap_generator",            "5.0.2"
gem "okcomputer",                   "1.4.0"
gem "dalli",                        "2.7.4"
gem "mandrill_mailer",              "1.2.0"
gem "american_date",                "1.1.0"
gem "damerau-levenshtein",          "1.1.0"
gem "bower-rails",                  "0.10.0"
gem "footing",                      "1.0.0"
gem "scenic",                       "1.0.0"
gem "rubyzip",                      "1.1.7"
gem "typhoeus",                     "0.8.0"
gem "gender_detector",              "0.1.2"
gem "shortener",                    "0.5.5"
gem "coffee-script",                "~> 2.2.0"
gem "angular-rails"
#gem "airbrake",                     "4.2.1"

gem "passenger"
gem "sinatra", :require => nil # for sidekiq/web

group :development do
  #gem "spring"
  #gem "rack-mini-profiler"
  #gem "flamegraph"
  gem "raml_ruby", require: "raml"
end

group :development, :test do
  gem "pry"
  gem "pry-rails"
  gem "pry-stack_explorer"
  gem "pry-byebug"
  gem "awesome_print"
  gem "quiet_assets"
  gem "model_probe"
  #gem "web-console"
end

group :test do
  gem "minitest"
  gem "minitest-reporters"
  gem "simplecov", require: false
  gem "minitest-rails-capybara"
  gem "guard"
  gem "guard-minitest"
end

group :doc do
  gem "sdoc"
end

Main.js

(function () {
  "use strict";

function initAngular () {
var myApp = angular.module('myApp', []);
myApp.controller("AngularController", ['$scope', '$http', function($scope, $http){
  $http.get('/assets/locations.json').success(function(data){
    console.log(data);
    $scope.locations = data;
  });
}]);
}

function init() {
    _.delay(function () {
      initAngular();
    }, 100);
  }

  $(document).ready(init);
  $(document).on("page:load", init);
}());

Test.html.erb]

<div ng-controller="AngularController">
<input type="text" ng-model="name">
<p>{{name}}</p>
</div>

【问题讨论】：

标签： javascript ruby-on-rails angularjs

【解决方案1】：

该错误表示无法实例化应用程序。出现此错误是因为在完成init 函数之前执行了ng-app 指令。

要解决此问题，您需要使用angular.bootstrap 方法手动初始化应用程序：

main.js

var myApp = angular.module('myApp', []);
myApp.controller("AngularController", ['$scope', '$http', function($scope, $http){
  $http.get('/assets/locations.json').success(function(data){
    console.log(data);
    $scope.locations = data;
  });
}]);

angular.element(document).ready(function() {
  angular.bootstrap(document, ['myApp']);
});

【讨论】：

对不起，当我从文件中删除敏感信息时，我不小心删除了 body 标签。一切都完好无损并在 Application.html.erb 中工作。我通过在 initAngular 函数中放置一个 console.log("HITTING FUNCTION") 进行了测试，并且文本显示在控制台中。由于某种原因，模块没有被实例化。
非常感谢您的帮助！你能解释一下为什么需要这样做吗？