AngularJS tải bộ điều khiển từ thư mục

Question

im mới trong AngularJS, và có câu hỏi làm thế nào tôi có thể tải bộ điều khiển và các js khác từ các thư mục có cấu trúc?

Ví dụ tôi có cấu trúc:

app/ 
-common 
-users 
--userController.js 
--userService.js 
-orders 
-app.js 

Làm thế nào tôi nên tải điều khiển và dịch vụ từ người dùng thư mục?

Và một câu hỏi nhỏ khác: điều gì có nghĩa là dấu ngoặc vuông squre?

app.config(['someThing'], function($routeProvider) 

Answer 1

Bạn sẽ phải liên kết tất cả các tệp trong trang HTML chính của bạn và đảm bảo chúng được tải. Như đã chỉ ra bởi Dwight ở trên.

Một cách tiếp cận khác sẽ là sử dụng một cái gì đó như Grunt.js để "xây dựng" ứng dụng. Điều này sẽ bao gồm việc kết hợp tất cả các tệp controller.js thành một - mà sau đó bạn tải vào trang HTML của mình. Bằng cách này tất cả các tập tin sẽ được tách biệt để phát triển nhưng sẽ được pha chế để triển khai.

Answer 2

Bạn có thể đặt mã của mình vào nơi bạn muốn. Nếu bạn đặt chúng vào các mô-đun góc, góc sẽ tìm thấy nó. Vì vậy, nếu bạn có một dịch vụ trong /app/common/services/foo.js như:

angular.module('app').service('foo', function() { ... }); 

Bạn có thể làm điều này trong userController:

angular.module('app').controller('UserController', function($scope, foo) { ... }); 

Ở đây bạn thấy làm thế nào tôi tiêm foo trong bộ điều khiển của chúng tôi. Angular Dependency Injection hệ thống đủ thông minh để tìm mã của bạn bất kể bạn đặt chúng ở đâu.

Bạn cũng có thể tạo thêm các module khác với app, bạn có thể có:

angular.module('other').service('bar', function() { ... }); 

Và nơi bạn xác định các mô-đun app, một cái gì đó như thế này:

angular.module('app', []); 

Bạn chỉ cần để thêm mới mô-đun ở đó dưới dạng phụ thuộc, đó là những gì mà [] dành cho:

angular.module('app', ['other']); 

Bây giờ bạn có thể sử dụng dịch vụ bar trong điều khiển quá :)

của bạn Mặt khác, cú pháp bạn đang nói về là ký hiệu mảng, một cái gì đó như thế này:

angular.module('app').controller('FooCtrl', ['$scope', 'foo', function($scope, foo) { ... }]); 

này là cần thiết nếu bạn mangle mã của bạn khi bạn rút gọn nó bởi vì trong các mã được rút gọn, bạn có thể nhận được một cái gì đó như thế này:

angular.module('app').controller('FooCtrl', ['$scope', 'foo', function(f, g) { ... }]); 

như bạn thấy, các thông số chức năng hiện đang f và g và An gular không biết những gì để tiêm dựa trên những cái tên, vì vậy nó trông vào chuỗi chúng tôi cung cấp, vì vậy nó sẽ biết rằng f là $scope và g là foo.

Không cần sử dụng trực tiếp chú thích này, có một số công cụ sẽ thực hiện điều đó cho bạn như ngmin.

Chúc mừng.

EDIT: Bạn sẽ cần thêm mọi tệp javascript vào <script> hoặc sẽ không tải và Angular sẽ không tìm thấy.

Thêm các tập tin từng người một là một nỗi đau, bởi vì bạn có thể có 5 hoặc bạn có thể có 200.

Nó là tốt hơn để concat họ và cho rằng tôi khuyên bạn nên: grunt-concat-sourcemap vì nó sẽ tạo ra một sourcemap vì vậy bạn sẽ có 1 tệp với toàn bộ ứng dụng nhưng trong các công cụ dev bạn sẽ thấy chúng trong các tệp riêng biệt.

tôi khuyên bạn nên kiểm tra linemanjs mà là một công cụ tốt để phát triển các ứng dụng javascript và nó concat các tập tin cho bạn, bản đồ nguồn, giảm bớt, những thứ ký hiệu mảng cũng ...