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

У меня есть все мои контроллеры AngularJS в одном файле, контроллеры.js. Этот файл имеет следующую структуру:

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

то, что я хотел бы сделать, это поместить Ctrl1 и Ctrl2 в отдельные файлы. Затем я включил бы оба файла в свой индекс.HTML, но как это должно быть структурировано? Я попытался сделать что-то подобное, и он выдает ошибку в консоли веб-браузера, говоря, что не может найти мои контроллеры. Есть намеки?

Я искал StackOverflow и нашел это похожее вопрос-однако этот синтаксис использует другую структуру (CoffeeScript) поверх Angular, и поэтому я не смог следовать.


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

6 ответов


первый:

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 файла, чтобы объявление модуля было само по себе.


Что касается структуры папок есть много много много мнений по этому вопросу, но эти два довольно хорошо!--4-->

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

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


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


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

Один
// 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, приложение.Яш,контроллер.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) {
    .... 
    });