个人中心
gpt4 book ai didi

javascript - 将 Controller 放入单独的文件后， Angular rails 应用程序无法工作

转载 作者：行者123 更新时间：2023-12-02 14:37:32 25 4
gpt4 key购买 nike

我有一个在前端使用 Angular 的 Rails 应用程序。我已将所有 Angular 文件放入 app/assets/javascripts/Angular 中。我有一个模板文件夹，其中包含所有 View 和 app.js

Angular/app.js

app = angular.module("appname", ['ui.router', 'ngResource', 'templates']);

app.config([
    "$stateProvider", "$urlRouterProvider",
    function ($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state("home", {
                url: "/",
                controller: "homeCtrl",
                templateUrl: "angular/templates/home.html"
            })
    }
]);



app.controller("homeCtrl", ["$scope", "$state", function ($scope, $state) {


}]);

这有效......但是当我尝试将 Controller 移动到不同的文件中时，它不会工作并且不会显示任何错误。这是我尝试将其移动到不同文件的方法

Angular/app.js

app = angular.module("appname", ['ui.router', 'ngResource', 'templates', 'homeCtrl']);

app.config([
    "$stateProvider", "$urlRouterProvider",
    function ($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state("home", {
                url: "/",
                controller: "homeCtrl",
                templateUrl: "angular/templates/home.html"
            })
    }
]);

在 angular/controllers/homeCtrl.js 中创建以下文件Angular/controllers/home-ctrl.js

app = angular.module("appname", []);
app.controller("homeCtrl", ["$scope", "$state", function ($scope, $state) {


}]);

下面是我添加到 application.js 的 2 行

//= require angular/app
//= require angular/controllers/home-ctrl

这是完整的application.js

application.js

//= require jquery
//= require angular
//= require angular-ui-router
//= require angular-resource
//= require angular-rails-templates
//= require_tree ./angular/templates
//= require angular/app         //added this now
//= require angular/controllers/home-ctrl    //added this now
//= require jquery_ujs
//= require toastr
//= require bootstrap-sass/assets/javascripts/bootstrap-sprockets
//= require jquery-fileupload/vendor/jquery.ui.widget
//= require jquery-fileupload/jquery.iframe-transport
//= require jquery-fileupload/jquery.fileupload
//= require turbolinks
//= require_tree .

有人可以告诉我这里做错了什么吗？

更新1

我创建了一个简单的应用程序来演示它 https://bitbucket.org/flyingboy007/testapp

这是 html 头部

<html ng-app="testapp">
<head>
  <title>Testapp</title>
  <link rel="stylesheet" media="all" href="/assets/custom.self-17e1d92ee5c6aa25c961b0247a2b58df305a162ba2c7adc73cebd70894923726.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/welcome.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/application.self-e80e8f2318043e8af94dddc2adad5a4f09739a8ebb323b3ab31cd71d45fd9113.css?body=1" data-turbolinks-track="true" />
  <script src="/assets/jquery/dist/jquery.self-4e239680527cb2d6016e15eb767e577a5ba6c75055937d62957773e43b8773a9.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/angular/angular.self-3850d7602cc1968e02b0a500d063347fdc614035a5369947cc4ab853f83c1edb.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/angular-ui-router/release/angular-ui-router.self-4b9be280d80df92307d4ec9b5676ccd659934704c7bb336b471df211b497e840.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/angular-rails-templates.self-f73a25f00ce684992b28562a01665855f2aabcedd405901b89b47873f76ca8d1.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/angular/templates/home.self-1ff1a25416205b20e5874f674491c4f16757e7fc8c90493cc6a12e9ad9d9a200.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/angular/app.module.self-ac8420276da6899e4a9bef3944222f2fe38907f55db6662a265ed8450c90f98a.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/angular/app.config.self-ce8605f70015d41a58b4efbbed8d49dda515ebd60d8156494bf676b2a9315a97.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/angular/home-ctrl.self-98b167d187c2b959e75a30e0f26b0adec7706c96b058240bc6a89174b867a638.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap-sass/assets/javascripts/bootstrap/affix.self-3555752f8a930795ee9e56751a52e6871104ae85d01b3ab8363da3802a5ecc78.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap-sass/assets/javascripts/bootstrap/alert.self-d8b7bd612b3dcfdefb7b5539b9d5848d66ccbd3e7af8bb8d48bfb3288aaa7be8.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap-sass/assets/javascripts/bootstrap/button.self-e74d33ba39500940a78d6fa4d2d64f6ca7fd86d60a2149641f7fde7ba711d8a1.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap-sass/assets/javascripts/bootstrap/carousel.self-35d204878d906298e55bc24553e11fd89b980fc4ffe5792fe36af8c0da289c54.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap-sass/assets/javascripts/bootstrap/collapse.self-056c40532d9f0f126ec17e839f60c942f573fbd61a086e7f156306e3fc5e8c1f.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap-sass/assets/javascripts/bootstrap/dropdown.self-e56c2ffee4618411d43ecf15c89273f6223847ad756e1cd17545d04afa732ed4.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap-sass/assets/javascripts/bootstrap/modal.self-62463080dba6b9d024ff0a3192da0e76eacbc683194f3395047c6f5cfa0acb59.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap-sass/assets/javascripts/bootstrap/scrollspy.self-52afd90e8ba97d9f08617a13986e8869d6c4a45751c0bff59a6f91241e722aca.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap-sass/assets/javascripts/bootstrap/tab.self-dad0d5c377f9fae26394484535ebb23ccf68afae084f896af6ea4cdf8c9f6ae0.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap-sass/assets/javascripts/bootstrap/transition.self-3b268d4cd8c79e46ded7392885f72f64ffb5b0d49948a12b8cf9779f6163e13a.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap-sass/assets/javascripts/bootstrap/tooltip.self-facdc69246a072acb927ded77ff655f7c27a518b9357fddd45d119fbc8a0ab9f.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap-sass/assets/javascripts/bootstrap/popover.self-210cff1fb4b72b71a29b5122180cb5937c8145cd13a934dc838280f1d9607a3e.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap-sass/assets/javascripts/bootstrap-sprockets.self-fbfa5ad7d9aa0afe439ec4ff3883acc4cb92b62cb67c40d674320c9aa1d4642d.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery_ujs.self-e87806d0cf4489aeb1bb7288016024e8de67fd18db693fe026fe3907581e53cd.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/turbolinks.self-c37727e9bd6b2735da5c311aa83fead54ed0be6cc8bd9a65309e9c5abe2cbfff.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/welcome.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/application.self-b5567fb0cb73f9d4ecd4fa178bbc995d9efe2b53da5e5bf4ca587adb307de5b1.js?body=1" data-turbolinks-track="true"></script>
  <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="aDiaoRdtCY5NkOmNLrNaq9nMxja4jcohyEhnohlT0FgR+Pjk56TuDUfchLX1AylzgWdzzNNM3+XLfBIBE95GBQ==" />
</head>
<body>

最佳答案

您也在 Controller 中重新声明您的 appname 模块。

Angular/controllers/home-ctrl.js

app = angular.module("appname", []);

你应该这样而不是这样。

angular.module("appname")
.controller("homeCtrl", ["$scope", "$state", function ($scope, $state){

}]);

请注意缺少方括号。

我也遇到过类似的问题，按照这个方法解决了。

关于javascript - 将 Controller 放入单独的文件后， Angular rails 应用程序无法工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37323260/

25 4 0
文章推荐： javascript - Highcharts -plotLines 不会渲染
文章推荐： javascript - 难以定位按键来完成操作
文章推荐： javascript - 通过js有条件地在新选项卡中打开url
文章推荐： javascript - 为复选框 javascript 分配两个值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com