Як створити окремі файли контролера AngularJS?

У мене є всі мої контролери AngularJS в одному файлі, controllers.js. Цей файл структурований так:

angular.module('myApp.controllers', [])
  .controller('Ctrl1', ['$scope', '$http', function($scope, $http) {    
  }])
  .controller('Ctrl2', ['$scope', '$http', function($scope, $http) }
  }])

Що я хотів би зробити, це помістити Ctrl1 і Ctrl2 в окремі файли. Потім я б включив обидва файли до свого index.html, але як це слід структурувати? Я спробував зробити щось подібне, і це видає помилку в консолі веб-браузера, кажучи, що вона не може знайти мої контролери. Якісь підказки?

Я шукав StackOverflow і знайшов подібне запитання - однак, цей синтаксис використовує інший фреймворк (CoffeeScript) поверх Angular, і тому я не зміг дотримуватися.

AngularJS: Як створити контролери в декількох файлах

Файл один:

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

Файл другий:

angular.module('myApp.controllers').controller('Ctrl1', ['$scope', '$http', function($scope, $http){

}]);

Файл три:

angular.module('myApp.controllers').controller('Ctrl2', ['$scope', '$http', function($scope, $http){

}]);

Додайте до цього порядку. Я рекомендую 3 файли, щоб декларація модуля була самостійною.

Що стосується структури папок, то на цю тему існує багато багато думок, але ці дві досить непогані

https://github.com/angular/angular-seed

http://briantford.com/blog/huuuuuge-angular-apps.html

Використання API angular.module з масивом в кінці підкаже angular створити новий модуль:

myApp.js

// It is like saying "create a new module"
angular.module('myApp.controllers', []); // Notice the empty array at the end here

Використання його без масиву - це фактично функція отримання. Отже, щоб розділити контролери, ви можете:

Ctrl1.js

// It is just like saying "get this module and create a controller"
angular.module('myApp.controllers').controller('Ctrlr1', ['$scope', '$http', function($scope, $http) {}]);

Ctrl2.js

angular.module('myApp.controllers').controller('Ctrlr2', ['$scope', '$http', function($scope, $http) {}]);

Під час імпорту Javascript просто переконайтеся, що myApp.js після AngularJS, але перед будь-якими контролерами / послугами / тощо ... інакше кутовий не зможе ініціалізувати ваші контролери.

Хоча обидві відповіді технічно правильні, я хочу ввести інший вибір синтаксису для цієї відповіді. Цей imho полегшує читання того, що відбувається з ін'єкцією, розмежування тощо.

Файл перший

// Create the module that deals with controllers
angular.module('myApp.controllers', []);

Файл другий

// Here we get the module we created in file one
angular.module('myApp.controllers')

// We are adding a function called Ctrl1
// to the module we got in the line above
.controller('Ctrl1', Ctrl1);

// Inject my dependencies
Ctrl1.$inject = ['$scope', '$http'];

// Now create our controller function with all necessary logic
function Ctrl1($scope, $http) {
  // Logic here
}

Файл третій

// Here we get the module we created in file one
angular.module('myApp.controllers')

// We are adding a function called Ctrl2
// to the module we got in the line above
.controller('Ctrl2', Ctrl2);

// Inject my dependencies
Ctrl2.$inject = ['$scope', '$http'];

// Now create our controller function with all necessary logic
function Ctrl2($scope, $http) {
  // Logic here
}

Що з цим рішенням? Модулі та контролери у файлах (в кінці сторінки) Він працює з декількома контролерами, директивами тощо:

app.js

var app = angular.module("myApp", ['deps']);

myCtrl.js

app.controller("myCtrl", function($scope) { ..});

html

<script src="app.js"></script>
<script src="myCtrl.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

Google також має рекомендації щодо найкращих практик щодо кутової структури додатків, які мені дуже подобається групувати за контекстом. Не всі html в одній папці, але, наприклад, всі файли для входу (html, css, app.js, controller.js тощо). Тож якщо я працюю над модулем, всі директиви знайти простіше.

Для стислості, ось зразок ES2015, який не покладається на глобальні змінні

// controllers/example-controller.js

export const ExampleControllerName = "ExampleController"
export const ExampleController = ($scope) => {
  // something... 
}

// controllers/another-controller.js

export const AnotherControllerName = "AnotherController"
export const AnotherController = ($scope) => {
  // functionality... 
}

// app.js

import angular from "angular";

import {
  ExampleControllerName,
  ExampleController
} = "./controllers/example-controller";

import {
  AnotherControllerName,
  AnotherController
} = "./controllers/another-controller";

angular.module("myApp", [/* deps */])
  .controller(ExampleControllerName, ExampleController)
  .controller(AnotherControllerName, AnotherController)

Не настільки витончено, але дуже просто в застосуванні рішення - за допомогою глобальної змінної.

У файлі "перший":

window.myApp = angular.module("myApp", [])
....

у "другому", "третьому" тощо:

myApp.controller('MyController', function($scope) {
    .... 
    });