2013-08-29 23 views
31

Có thể tạo nhiều mô-đun trong Tập lệnh Góc không? Tôi đã đi qua các tài liệu và học được rằng nó là một số loại khái niệm phương pháp chính.Nhiều Mô-đun trong Angularjs

Tôi cần ví dụ để minh họa điều này.

Trả lời

1

ý bạn là nhiều mô-đun? bạn có thể chèn mô-đun vào một mô-đun khác

angular.module(name[ anotherModule]); 
11

Tất nhiên bạn có thể. Chỉ cần sử dụng angular.module('moduleName', [/* dependencies */]) nhiều lần là số mô-đun bạn muốn tạo.

Để có được một tham chiếu đến một module được định nghĩa trước chỉ làm: var myModule = angular.module('moduleName'); và sau đó myModule.controller(...), myModule.config(), myModule.constant(), vv

Một gợi ý bố trí dự án (xem Seed góc) có một mô-đun cho ứng dụng của bạn, sau đó khác cho bạn bộ điều khiển, một cho các dịch vụ của bạn, một cho các bộ lọc của bạn và một cho các chỉ thị của bạn. Tất nhiên đây là a mere suggestion. Những người khác đề xuất alternative layouts.

11

Tôi nghĩ rằng anh ấy đã nhầm lẫn mô-đun với ngApp, trong đó chỉ có một ứng dụng (ng-app) trên một trang và chế độ xem của ứng dụng (ngView hoặc < ng-view >) chỉ có thể tồn tại một lần. Nhưng như đã nêu trong các câu trả lời trước, bạn có thể tạo bao nhiêu mô-đun tùy thích và chèn chúng như các phụ thuộc vào mô-đun ứng dụng "chính" của bạn. Tôi thường làm điều này để phân tách các chỉ thị, bộ lọc, bộ điều khiển của tôi và như vậy trong các mô-đun riêng của họ.

Edit:

ngApp - http://code.angularjs.org/1.1.5/docs/api/ng.directive:ngApp

37

Vâng, bạn có thể xác định nhiều module trong angularJS như đưa ra dưới đây.

var myApp = angular.module('myApp', []) 
var myApp2 = angular.module('myApp2', []) 

Tuy nhiên, đừng quên xác định phụ thuộc trong mỗi khai báo mô-đun như dưới đây. Giả sử myApp2 phụ thuộc vào myApp. Do đó, tuyên bố sẽ tương tự như vậy,

var myApp = angular.module('myApp', []) 
var myApp2 = angular.module('myApp2', ['myApp']) 

Việc mô đun hóa trong AngularJS giúp chúng tôi giữ mã rõ ràng và dễ hiểu, vì chúng tôi có thể kết hợp nhiều mô-đun để tạo ứng dụng. Tuy nhiên, chúng ta cần lưu ý rằng, chúng ta nên mô đun hóa các thành phần dựa trên chức năng của chúng chứ không phải theo loại của chúng.

+0

chúng ta có thể xác định ng-view riêng biệt cho cả hai mô-đun ... Có thể ... Cảm ơn trước –

+0

Chỉ có một 'ng-view' được hỗ trợ cho một trang duy nhất. Tuy nhiên, nếu bạn muốn xác định và sử dụng nhiều khung nhìn/mẫu trong một trang, tốt hơn nên sử dụng 'angular ui.router'. Đây là tài liệu chính thức về điều đó - https://github.com/angular-ui/ui-router. – Aviro

19

Chỉ một ứng dụng AngularJS có thể được tự động khởi động trên mỗi tài liệu HTML. NgApp đầu tiên được tìm thấy trong tài liệu sẽ được sử dụng để xác định phần tử gốc để tự động khởi động như một ứng dụng. Để chạy nhiều ứng dụng trong một tài liệu HTML, bạn phải tự khởi động chúng bằng cách sử dụng angular.bootstrap thay thế. Các ứng dụng AngularJS không thể được lồng vào nhau.- http://docs.angularjs.org/api/ng.directive:ngApp Xem thêm

https://groups.google.com/d/msg/angular/lhbrIG5aBX4/4hYnzq2eGZwJ http://docs.angularjs.org/api/angular.bootstrap

bạn cũng có thể sử dụng chỉ có một ng-app nhưng kết hợp 2 mô-đun như cách này:

var moduleA = angular.module("MyModuleA", []); 
moduleA.controller("MyControllerA", function($scope) { 
    $scope.name = "Bob A"; 
}); 

var moduleB = angular.module("MyModuleB", []); 
moduleB.controller("MyControllerB", function($scope) { 
    $scope.name = "Steve B"; 
}); 

angular.module("CombineModule", ["MyModuleA", "MyModuleB"]); 

và sau đó ng-app="CombineModule"

Các vấn đề liên quan