Как создать отдельные файлы контроллера AngularJS?

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

myApp.js

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

Использование этого без массива на самом деле является функцией getter. Поэтому, чтобы разделить ваши контроллеры, вы можете:

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, но перед любыми контроллерами/службами/etc... иначе angular не сможет инициализировать ваши контроллеры.

Хотя оба ответа являются технически правильными, я хочу представить другой синтаксический выбор для этого ответа. Это imho облегчает чтение того, что происходит с инъекцией, различать и т.д.

Файл One

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

Файл 2

// 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 также есть Рекомендации по лучшей практике для Angular Структура приложения Мне очень нравится группироваться по контексту. Не все 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) {
    .... 
    });