Question

我有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

的Gemfile

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>

Answer 1

错误表示无法实例化应用。发生此错误是因为ng-app指令在init函数完成之前执行。

要解决此问题，您需要使用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']);
});

Rails应用程序中的Angular给出错误

1 个答案: