Ayrı AngularJS kontrolör dosyaları nasıl oluşturulur?

Tüm AngularJS denetleyicilerim tek bir dosyada, controllers.js var. Bu dosya aşağıdaki şekilde yapılandırılmıştır:

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

Yapmak istediğim şey Ctrl1 ve Ctrl2'yi ayrı dosyalara koymak. Daha sonra her iki dosyayı da index.html dosyasına eklerdim, ancak bu nasıl yapılandırılmalıdır? Böyle bir şey yapmayı denedim ve web tarayıcısı konsolunda denetleyicilerimi bulamadığını söyleyen bir hata veriyor. İpucu var mı?

StackOverflow aradım ve bu benzer soruyu buldum - ancak, bu sözdizimi Angular üstünde farklı bir çerçeve (CoffeeScript) kullanıyor ve bu yüzden takip edemedim.

AngularJS: Birden fazla dosyada nasıl denetleyici oluştururum

Birinci dosya:

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

İkinci dosya:

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

}]);

Üçüncü dosya:

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

}]);

Bu sırayla ekleyin. Modül bildirimi tek başına olacak şekilde 3 dosya öneririm.

Klasör yapısına gelince, konu hakkında çok fazla fikir var, ancak bu ikisi oldukça iyi

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

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

Angular.module API'sini sonunda bir dizi ile kullanmak, açısalın yeni bir modül oluşturmasını söyler:

myApp.js

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

Dizi olmadan kullanmak aslında bir getter işlevidir. Denetleyicilerinizi ayırmak için şunları yapabilirsiniz:

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 içe aktarmalarınız sırasında, myApp.js dosyasının AngularJS'den sonra olduğundan emin olun , ancak herhangi bir denetleyici / hizmet / vb. Önce ... aksi takdirde açısal denetleyicilerinizi başlatamaz.

Her iki cevap teknik olarak doğru olsa da, bu cevap için farklı bir sözdizimi seçeneği sunmak istiyorum. Bu imho, enjeksiyonla neler olup bittiğini okumayı, aralarında ayrım yapmayı kolaylaştırır.

Birinci Dosya

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

Dosya İki

// 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
}

Üç Dosya

// 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
}

Bu çözüm ne olacak? Dosyalardaki Modüller ve Denetleyiciler (sayfanın sonunda) Birden fazla denetleyici, yönerge vb. İle çalışır:

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'ın, bağlamlara göre gruplandırmayı gerçekten sevdiğim Açısal Uygulama Yapısı için En İyi Uygulama Önerileri de var . Tek bir klasördeki tüm html değil, örneğin oturum açma için tüm dosyalar (html, css, app.js, controller.js ve benzeri). Eğer bir modül üzerinde çalışırsam, tüm direktifleri bulmak daha kolaydır.

Kısacası, küresel değişkenlere dayanmayan bir ES2015 örneği

// 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)

Çok zarif değil, ama uygulama çözümünde çok basit - küresel değişkeni kullanarak.

"İlk" dosyada:

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

"ikinci", "üçüncü" vb.

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