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

naC*_*eex 26 javascript angularjs

我试图在单独的文件中定义控制器,但我收到错误:

transactionsController not a function got undefined
Run Code Online (Sandbox Code Playgroud)

文件结构

我在这个序列1- common.js 2- transactions.js中添加了文件

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

var app = angular.module("spModule", ["ngMessages", "ui.bootstrap"]);
Run Code Online (Sandbox Code Playgroud)

Transactions.js

angular.module('spModule').controller('transactionsController',
    ['$scope', '$http', function ($scope, $http) {} ]
);
Run Code Online (Sandbox Code Playgroud)

HTML文件

<body ng-app="spModule" ng-controller="transactionsController">
Run Code Online (Sandbox Code Playgroud)

fdo*_*mig 59

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

使用angular.module()两个参数(例如angular.module('my-module', []))将导致设置具有其相应依赖性的新模块.相反,当使用angular.module('my-module')相应的模块时,在内部查找并返回给调用者(获取).

首次定义应用程序时的方法可能只是创建以下文件和结构.

app.js

angular.module('myApp', []);
Run Code Online (Sandbox Code Playgroud)

FirstController.js

angular.module('myApp').controller('FirstController', function () {});
Run Code Online (Sandbox Code Playgroud)

SecondController.js

angular.module('myApp').controller('SecondController', function () {});
Run Code Online (Sandbox Code Playgroud)

如果你现在按照这个特别的顺序将这些文件包含在你的html文档中(至少app.js必须先来),你的应用程序可以在两个独立的文件中使用两个独立的控制器.

进一步阅读

我可以在模块上推荐AngularJS Styleguide,以获得有关此主题的更多想法.