Как определить контроллеры в нескольких файлах - AngularJs

Я пытаюсь определить контроллеры в отдельных файлах, но я получаю сообщение об ошибке:

transactionsController not a function got undefined

Структура файла

Я добавил файлы в эту последовательность 1- common.js 2- transaction.js

common.js В общих файлах я определил

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

Transactions.js

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

HTML FIle

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

Ответ 1

Во-первых, вы должны избавиться от глобальной переменной app. Это необязательно. Во-вторых, вы должны понимать принцип метода angular.module().

Использование angular.module() с двумя параметрами (например, angular.module('my-module', [])) приведет к настройке нового модуля с соответствующими зависимостями. Напротив, при использовании angular.module('my-module') соответствующий модуль просматривается внутренне и возвращается вызывающему абоненту (получать).

Средство при первом определении приложения вы можете просто создать следующие файлы и структуру.

app.js

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

FirstController.js

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

SecondController.js

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

Если вы теперь включите эти файлы в свой html-документ в этом порядке (по крайней мере app.js должен быть первым), ваше приложение отлично работает с двумя отдельными контроллерами в двух отдельных файлах.

Дальнейшие чтения

Я могу порекомендовать AngularJS Styleguide на модулях, чтобы получить больше идей по этой теме.

Ответ 2

Вы можете поместить этот контроллер в отдельный файл, например 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'
        }])

Надеюсь, это поможет вам:) Приветствия!

Ответ 3

Вы можете сделать это, создав модули. Создайте модуль и соответствующие контроллеры. И добавьте этот модуль в основной модуль приложения.

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"]);

Ответ 4

Сначала загрузите свой файл common.js. Переместите директиву ng-app в тег <html>. Измените transaction.js на:

app.controller('transactionsController', TransactionsController)

TransactionsController.$inject = ['$scope','$http']

function TransactionsController($scope, $http) {


};

Просто для удовольствия. Дайте мне знать, что произойдет.