如何在多个文件中定义控制器 - AngularJs.

How to define controllers in multiple files - AngularJs

本文关键字：定义 控制器 AngularJs 文件      更新时间：2023-09-26

我正在尝试在单独的文件中定义控制器，但收到错误： 

transactionsController not a function got undefined

文件结构

我按此顺序添加了文件1-普通.js2- 交易.js

常见.js在我定义的常见文件中

var app = angular.module("spModule", ["ngMessages", "ui.bootstrap"]);

交易.js

angular.module('spModule').controller('transactionsController',
    ['$scope', '$http', function ($scope, $http) {} ]
);

网页

<body ng-app="spModule" ng-controller="transactionsController">

首先，你应该去掉全局app变量。这不是必需的。其次，您必须了解angular.module()方法的原理。

将angular.module()与两个参数一起使用（例如 angular.module('my-module', []) ） 将导致设置具有相应依赖项的新模块。相反，当使用angular.module('my-module')时，相应的模块在内部查找并返回给调用方（getting）。

这意味着当您第一次定义应用程序时，您可能只创建以下文件和结构。

应用.js 

angular.module('myApp', []);

第一控制器.js

angular.module('myApp').controller('FirstController', function () {});

第二控制器.js

angular.module('myApp').controller('SecondController', function () {});

如果您现在以这种特定顺序（至少 app.js 必须排在第一位）将这些文件包含在 html 文档中，那么您的应用程序可以在两个单独的文件中使用两个单独的控制器。

更多阅读材料

我可以推荐模块上的AngularJS风格指南，以获得有关此主题的更多想法。

您可以将此控制器放在单独的文件中，例如mycontroller1.js

    
    app.controller('myController', ['$scope',function($scope)    
        {
        $scope.myValue='hello World'
        }])

同样，您可以创建新的js文件"myNewcontroller.js"并可以放置新的控制器：

app.controller（'myController2'， ['$scope'，function（$scope）           {        $scope.myValue='hello World'        }])

希望这对您有所帮助:)干杯！！

您可以通过创建模块来执行这些操作。创建模块和相应的控制器。并将该模块注入主应用程序模块。

Transactions.js
(function() {
   'use strict';
   angular.module('tmodule', []);
})();
(function() {
   'use strict';
    angular.module('tmodule').controller('transactionsController', ['$scope', '$http', 
            function ($scope, $http){
    }]);
})();

现在将"tmodule"注入到您的 Common.js 文件中-

  var app = angular.module("spModule", ["ngMessages", "ui.bootstrap","tmodule"]);

首先加载你的公共.js。将 ng-app 指令移动到<html>标记。将交易.js更改为：

app.controller('transactionsController', TransactionsController)
TransactionsController.$inject = ['$scope','$http']
function TransactionsController($scope, $http) {

};

只是为了好玩。让我知道会发生什么。

相关文章：