Question

我在本地工作时遇到了angular.js / rails应用程序的问题，导致Heroku发生js崩溃。

为了进行本地测试，我下载并将所有angular.js文件放在供应商目录中。我没有使用任何宝石，只需将角度文件放在资产管道中，以便各个控制器的coffeescript文件可以使用角度库。

这是我的app.js：

angular.module('generosity', ['ngRoute', 'templates'])
.config(['$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {
        $routeProvider.
            when('/', {
                templateUrl: "users-form.html",
                controller: 'UsersController'
            }).
            // when('/phones/:phoneId', {
        //      templateUrl: 'partials/phone-detail.html',
        //      controller: 'PhoneDetailCtrl'
            // }).
            otherwise({
                redirectTo: '/'
            });
        $locationProvider.html5Mode(true);
  }])

.controller('UsersController' ['$scope', '$http', '$rootScope', function($scope, $http, $rootScope) {
    var self = this;

    self.username;
    self.realName;
    self.password;
    self.availableHours; //How should this be styled?
    self.currentCity;
    self.currentLocation;
    self.recipient; //Should probably be renamed


    $scope.errCode = 0;

    self.addUser = function() {
        var errCode;
        $http.post('users/add', {username: self.username, password: self.password}).
            success(function(data, status, headers, config) {
            // this callback will be called asynchronously
            // when the response is available
                var errCode = data.errCode;
                self.retrieveErrCode(errCode);
                // console.log("HYA" + self.errCode);
                if(errCode == -2) {
                    alert("Error: This username already exists.");
                }
                else if(errCode == -3) {
                    alert("Error: The username is empty, too long, or has invalid characters.");
                }
                else if(errCode == -4) {
                    alert("Error: The password is empty, too long, or has invalid characters.");
                }
                else {
                    alert("User created.");                     
                }
                console.log(errCode);
                $rootScope.errCode = data.errCode;
            }).
            error(function(data, status, headers, config) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
                alert("Error.");
            });
            console.log(self.username);
        return $scope.errCode;
    }

    self.retrieveErrCode = function(code) {
        $scope.err = code;
        console.log("here");
    };

    self.createDummyUser = function() {
        self.username = "LordChristopher";
        self.realName = "Lord Christopher";
        self.password = "Team 61C";
        self.availableHours = "6 to 11 pm";
        self.currentCity = "Berkeley";
        self.currentLocation = "Nowhere";
        self.recipient = "He whose name shall not be spoken";
    };

    // self.login = function(name, pw) {

    // };

    // self.logout = function() {

    // };
}])

.controller('SessionController', ['$scope', '$http', '$rootScope', function($scope, $http, $rootScope) {
    var self = this;

    self.userId;
    self.username;

    self.login = function(username, password) {
        $http.post('login', {username: username, password: password}).
            success(function(data, status, headers, config) {
            // this callback will be called asynchronously
            // when the response is available
                alert("Connected");
                console.log("connected");
            }).
            error(function(data, status, headers, config) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
                console.log("error");
                alert("Error.");
            });
    }
}])

.directive('navbar', function() {
    return {
        restrict: 'E',
        templateUrl: "navbar.html"
    };
})

.directive('usersForm', function() {
    return {
        restrict: 'E',
        scope: {

        },
        templateUrl: "users-form.html"
    };
})

.directive('loginForm', function() {
    return {
        restrict: 'E',
        scope: {

        },
        templateUrl: "login-form.html"
    };
})  

.directive('usersTests', function() {
    return {
        restrict: 'E',
        scope: {

        },
        templateUrl: "users-tests.html"
    };
})

// .directive('directiveA', function() {
//  return {
//      restrict: 'A',
//      scope: {
//          name: '@',
//          hobby: '@'
//      },
//      templateUrl: "example-module.html"
//  };
// }) //Only put a semi-colon on the last directory of the module

.directive('css1', function() {
    return {
        restrict: 'C',
        link: function(scope, element, attrs) {
            element.css("width", 400),
            element.css("font-style", "oblique");
            element.css("color", "green");
            element.css("font-size", "30px");
        }
    };
})

.directive('testStatus', function() { //You do not need to account for the cases for which the rating is not a number.
    return {
        restrict: 'C',
        scope: {
          message: '@'
        },
        link: function(scope, element, attrs) { //Note that this is a function of scope, NOT $scope!!
            if(scope.message.search("PASS") > 0) {
                element.css("color", "green");
            }
            else if(scope.message.search("FAIL") > 0) {
                element.css("color", "red");
            }
            else {
                element.css("color", "blue");
            }
        }
    };
})

使用Rails在本地运行得很好。然而，尽管我付出了最大努力（所有＆＃34;提供静态资产：true＆＃34;在config / assets / production.rb中，以及几个自动缩小js文件以进行生产的附加gems）heroku返回以下stacktrace ：

Uncaught Error: [$injector:modulerr] Failed to instantiate module generosity due to:
Error: [$injector:nomod] Module 'generosity' 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.
http://errors.angularjs.org/1.3.0/$injector/nomod?p0=generosity
    at https://still-plains-1604.herokuapp.com/assets/application-b623e3dc11cb731dd5e417203ceb10d1.js:5:20793
    at https://still-plains-1604.herokuapp.com/assets/application-b623e3dc11cb731dd5e417203ceb10d1.js:5:28971
    at e (https://still-plains-1604.herokuapp.com/assets/application-b623e3dc11cb731dd5e417203ceb10d1.js:5:28543)
    at https://still-plains-1604.herokuapp.com/assets/application-b623e3dc11cb731dd5e417203ceb10d1.js:5:28855
    at https://still-plains-1604.herokuapp.com/assets/application-b623e3dc11cb731dd5e417203ceb10d1.js:6:4062
    at o (https://still-plains-1604.herokuapp.com/assets/application-b623e3dc11cb731dd5e417203ceb10d1.js:5:21178)
    at h (https://still-plains-1604.herokuapp.com/assets/application-b623e3dc11cb731dd5e417203ceb10d1.js:6:3840)
    at _e (https://still-plains-1604.herokuapp.com/assets/application-b623e3dc11cb731dd5e417203ceb10d1.js:6:5485)
    at Q.s (https://still-plains-1604.herokuapp.com/assets/application-b623e3dc11cb731dd5e417203ceb10d1.js:5:26814)
    at Q (https://still-plains-1604.herokuapp.com/assets/application-b623e3dc11cb731dd5e417203ceb10d1.js:5:27124)
http://errors.angularjs.org/1.3.0/$injector/modulerr?p0=generosity&p1=Error…com%2Fassets%2Fapplication-b623e3dc11cb731dd5e417203ceb10d1.js%3A5%3A27124) application-b623e3dc11cb731dd5e417203ceb10d1.js:6

为了清楚起见，＆＃34;慷慨＆＃34;是app本身的名称，在app.js中定义。

为什么我定义的模块无法在生产中找到，而不能在本地找到？

该应用程序可以在https://still-plains-1604.herokuapp.com/找到，字面上任何有关此问题的帮助都是天赐之物。

Answer 1

您的来源有几个问题。

HTML有两个data-ng-app标记。
应用程序似乎需要的angular-route文件不存在。

Heroku + Rails + Angular [$ injector：nomod]

1 个答案: