วิธีสร้างไฟล์คอนโทรลเลอร์ 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

การใช้ angular.module API กับอาเรย์ที่ส่วนท้ายจะบอกให้แองกูลาร์สร้างโมดูลใหม่:

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) {}]);

ในระหว่างการนำเข้าจาวาสคริปต์ให้แน่ใจว่าmyApp.jsอยู่หลัง AngularJS แต่ก่อนตัวควบคุม / บริการ / อื่น ๆ ... มิฉะนั้นเชิงมุมจะไม่สามารถเริ่มต้นตัวควบคุมของคุณได้

แม้ว่าคำตอบทั้งสองจะถูกต้องทางเทคนิค แต่ฉันต้องการแนะนำทางเลือกไวยากรณ์ที่แตกต่างสำหรับคำตอบนี้ imho นี้ทำให้ง่ายต่อการอ่านสิ่งที่เกิดขึ้นกับการฉีดความแตกต่างระหว่าง ฯลฯ

ไฟล์หนึ่ง

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

ไฟล์ Two

// 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) {
    .... 
    });