Hiểu rõ bước khởi động thủ công khôn ngoan của angularJS

Question

Tôi đã thực hiện các khái niệm cơ bản về angularJS về cách khởi động thủ công. Tôi đi qua cách tiếp cận khác nhau và tìm thấy this approach để được trang bị tốt nhất.

angular.element(document).ready(function(){ 
    angular.bootstrap(document,['myapp']) 
}) 

Di chuyển thêm, tôi đã xem qua this another way which breaks it to basics. Tôi đã nhận xét mã theo sự hiểu biết của tôi nhưng ai đó có thể vui lòng giải thích cho tôi biết thêm chi tiết về cách mọi thứ đang hoạt động dưới mui xe.

window.onload = function(){ 

    var $rootElement = angular.element(window.document); 
    var modules = [ 
    'ng',  // angular module 
    'myApp', // custom module 
    // what are we trying to achieve here? 
    function($provide){ 
     $provide.value('$rootElement',$rootElement) 
    } 
    ]; 

    var $injector = angular.injector(modules);  // one injector per application 
    var $compile = $injector.get('$compile');  // Compile Service: it traverses the DOM and look for directives and compile and return linking function. No accecess to scope 
    var compositeLinkFn = $compile($rootElement); // collection of all linking function. Here scope is getting accessed 

    var $rootScope = $injector.get('$rootScope'); // Hold of the rootscope 
    compositeLinkFn($rootScope); 

    $rootScope.$apply(); 
} 

Ngoài ra, vui lòng làm sáng tỏ thêm về chủ đề này bằng cách đề xuất nhiều cách và cải tiến hơn.

Answer 1

chúng tôi đang cố gắng đạt được điều gì ở đây?

var modules = [ 
    'ng',  // angular module 
    'myApp', // custom module 
    function($provide){ 
     $provide.value('$rootElement',$rootElement) 
    } 
    ]; 

Đó là giống cũ dependency injection chúng tôi sử dụng ở khắp mọi nơi trong angularjs. Ở đây chúng tôi đang tiêm mô-đun ng và đăng ký value vào đó.

Và cuối cùng chúng ta đang đi qua nó trong angular.injector()

var $injector = angular.injector(modules) 

Vẫn không thuyết phục? Đây là phiên bản đơn giản (cách chúng ta sử dụng DI trong bộ điều khiển)

var $injector = angular.injector(['ng','myApp',function($provide){ 
    $provide.value('$rootElement',$rootElement) 
}]) 

Bây giờ hai câu hỏi,

1. tại sao chúng ta sử dụng angular.injector?

   Vì, angular.injector tạo đối tượng đầu phun có thể được sử dụng để truy xuất dịch vụ cũng như cho việc tiêm phụ thuộc. Chúng tôi cần điều này để nhận được $ biên dịch dịch vụ và một trường hợp phạm vi để liên kết mẫu đó với.

2. tại sao chúng tôi đặt $rootElement?

   Để cho góc cạnh biết phần tử gốc của ứng dụng. Đã chú ý sử dụng document trong angular.bootstrap(document,['myapp'])? Đó là vì lý do tương tự.

   Theo official documentation of $rootElement,

   $ rootElement là một trong hai yếu tố nơi ngApp được tuyên bố hoặc yếu tố truyền vào angular.bootstrap.

   Vì chúng tôi không sử dụng ng-app cũng như phương pháp angular.bootstrap chuẩn, chúng tôi phải đặt thủ công này.

Tiếp theo, chúng tôi cố gắng nhận dịch vụ $compile từ trường hợp của bộ phun mà chúng tôi vừa nhận được từ bước trên.

var $compile = $injector.get('$compile'); 

Dịch vụ biên dịch $ là dịch vụ để sử dụng để biên soạn. Gọi $ biên dịch chống lại một đánh dấu sẽ tạo ra một chức năng mà bạn có thể sử dụng để ràng buộc đánh dấu với một đặc biệt phạm vi (những gì góc gọi một chức năng liên kết)

lần nữa để có được phạm vi, chúng tôi sử dụng $injector.get('$rootScope') và vượt qua nó trên đến hàm liên kết tổng hợp mà chúng tôi nhận được từ $ compile.

angular.bootstrap(document,[myApp]) chỉ là một đường cú pháp trên các bước được đề cập ở trên. Nó tạo ra một thể hiện của bộ phun, thiết lập các dịch vụ liên quan với sự trợ giúp của nó, tạo ra phạm vi ứng dụng rộng và cuối cùng biên dịch khuôn mẫu.

Điều này hiển nhiên từ official documentation for angular.bootstrap, trong đó đề cập rõ ràng rằng nó trả về phiên bản của trình phun.

ô tô. $ Injector Trả về phun mới được tạo ra cho ứng dụng này

Cùng câu chuyện được nêu trong official bootstrap guide

Lưu ý rằng chúng tôi cung cấp tên của module ứng dụng của chúng tôi được nạp vào đầu phunlàm tham số thứ hai của angular.bootstrap chức năng. Lưu ý rằng angular.bootstrap sẽ không tạo mô-đun trên chuyến bay . Bạn phải tạo bất kỳ mô đun tùy chỉnh nào trước khi chuyển chúng thành thông số .

Cuối cùng, không cần thiết phải say..all này phải được thực hiện sau khi HTML Document được nạp và DOM đã sẵn sàng.

EDIT

Dưới đây là một đại diện sơ đồ của quá trình này. angular.bootstrap process http://www.dotnet-tricks.com/Content/images/angularjs/bootstrap.png Image Reference

Hy vọng nó sẽ giúp :)