Làm cách nào để tạo các tệp điều khiển AngularJS riêng biệt?

Tôi có tất cả các bộ điều khiển AngularJS của mình trong một tệp, controls.js. Tập tin này được cấu trúc như sau:

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

Những gì tôi muốn làm là đặt Ctrl1 và Ctrl2 vào các tệp riêng biệt. Sau đó tôi sẽ bao gồm cả hai tệp trong index.html của mình, nhưng nó nên được cấu trúc như thế nào? Tôi đã thử làm một số thứ như thế này và nó đưa ra một lỗi trong bảng điều khiển trình duyệt web nói rằng nó không thể tìm thấy bộ điều khiển của tôi. Có gợi ý nào không?

Tôi đã tìm kiếm StackOverflow và tìm thấy câu hỏi tương tự này - tuy nhiên, cú pháp này đang sử dụng một khung công tác khác (CoffeeScript) trên đầu Angular, và vì vậy tôi không thể làm theo.

AngularJS: Làm cách nào để tạo bộ điều khiển trong nhiều tệp

Tập tin một:

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

Tệp hai:

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

}]);

Tập tin ba:

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

}]);

Bao gồm theo thứ tự đó. Tôi đề nghị 3 tệp để khai báo mô-đun là của riêng mình.

Đối với cấu trúc thư mục có rất nhiều ý kiến ​​về chủ đề này, nhưng hai cái này khá tốt

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

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

Sử dụng API angular.module với một mảng ở cuối sẽ cho angular tạo ra một mô-đun mới:

myApp.js

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

Sử dụng nó mà không có mảng thực sự là một hàm getter. Vì vậy, để tách biệt bộ điều khiển của bạn, bạn có thể làm:

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

Trong quá trình nhập javascript của bạn, chỉ cần đảm bảo myApp.js đứng sau AngularJS nhưng trước bất kỳ bộ điều khiển / dịch vụ / v.v ... nếu không thì angular sẽ không thể khởi tạo bộ điều khiển của bạn.

Mặc dù cả hai câu trả lời đều đúng về mặt kỹ thuật, tôi muốn giới thiệu một lựa chọn cú pháp khác nhau cho câu trả lời này. Imho này giúp dễ dàng hơn để đọc những gì đang xảy ra với tiêm, phân biệt giữa vv

Tập tin một

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

Tập tin hai

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

Tập tin ba

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

Giải pháp này thì sao? Các mô-đun và Bộ điều khiển trong Tệp (ở cuối trang) Nó hoạt động với nhiều bộ điều khiển, chỉ thị, v.v.

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 cũng có Đề xuất thực tiễn tốt nhất cho cấu trúc ứng dụng góc mà tôi thực sự muốn nhóm theo ngữ cảnh. Không phải tất cả các html trong một thư mục, nhưng ví dụ tất cả các tệp để đăng nhập (html, css, app.js, control.js, v.v.). Vì vậy, nếu tôi làm việc trên một mô-đun, tất cả các chỉ thị sẽ dễ dàng tìm thấy hơn.

Để cho ngắn gọn, đây là một mẫu ES2015 không dựa vào các biến toàn cục

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

Không quá duyên dáng, nhưng rất nhiều đơn giản trong giải pháp thực hiện - sử dụng biến toàn cục.

Trong tệp "đầu tiên":

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

trong "thứ hai", "thứ ba", v.v .:

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