Hiểu các thông số bộ điều khiển Angular.js


80

Tôi mới bắt đầu tìm hiểu Angular.js và tôi đã xem qua project.js trong ví dụ "Wire up a Backend" trên trang chủ Angular .

Tôi nhầm lẫn về các tham số trong các chức năng của bộ điều khiển:

function ListCtrl($scope, Projects) {
  ... 
}   

function CreateCtrl($scope, $location, $timeout, Projects) {
  ... 
}

function EditCtrl($scope, $location, $routeParams, angularFire, fbURL) {
   angularFire(fbURL + $routeParams.projectId, $scope, 'remote', {}).
   then(function() {
     ...
   });
}  

Các hàm điều khiển này được gọi trong routeProvider, nhưng không có tham số nào được đưa ra.

$routeProvider.
  when('/', {controller:ListCtrl, templateUrl:'list.html'}).
  when('/edit/:projectId', {controller:EditCtrl, templateUrl:'detail.html'}).
  when('/new', {controller:CreateCtrl, templateUrl:'detail.html'}).
  otherwise({redirectTo:'/'});
});

Điều duy nhất tôi có thể tìm thấy cho đến nay mà có thể giải thích những gì đang xảy là "tiêm chích Dịch vụ Into Bộ xử lý" , giải thích $location, $timeoutnhưng không tham số phương pháp angularFirefbURL.

Các câu hỏi cụ thể của tôi là:

  1. Các thông số bộ điều khiển có thể là gì?

  2. Các chức năng của bộ điều khiển được gọi với các tham số của chúng ở đâu? Hoặc các tham số không được gọi mà chỉ là những thứ được liên kết với bộ điều khiển nơi liên kết xảy ra với rất nhiều phép thuật Angular.js (nếu vậy, tôi có thể xem mã nguồn trên github)?

  3. Được angularFirexác định ở đâu?

  4. Làm thế nào fbURLtrong tham số được liên kết với:

    angular.module('project', ['firebase']).
        value('fbURL', 'https://angularjs-projects.firebaseio.com/').
        factory ...
    
  5. Có nơi nào mà tôi có thể xem tất cả các dịch vụ, ví dụ $location, và $timeoutAngular.js cung cấp không? (Tôi đã cố gắng tìm danh sách nhưng không thành công.)


5. Đối với danh sách tất cả được xây dựng trong các dịch vụ, các bộ lọc, chỉ thị bao gồm trong góc, có một cái nhìn tại các API: docs.angularjs.org/api
jpmorin

1
4. Có vẻ như bạn đã hiểu, các tham số của bộ điều khiển đang được đưa vào bởi góc từ định nghĩa của bộ điều khiển. Angular sẽ xem xét tất cả các dịch vụ đã đăng ký và cố gắng tìm một kết quả phù hợp với tên được chỉ định của tham số và đưa vào dịch vụ theo đó!
jpmorin

3. Khi bạn xác định mô-đun dự án của mình, bạn cũng bao gồm sự phụ thuộc của mô-đun firebase. Bên trong mô-đun firebase, phải có dịch vụ angleFire giống như fbURL trước đó.
jpmorin

1
2. Đây là cách thích hợp để xác định bộ điều khiển: Theo angular.module('project').controller('EditCtrl', ['$scope', '$location', '$routeParams', 'angularFire', 'fbURL', function($scope, $location, $routeParams, angularFire, fbURL) { ... } ]);cách đó, trước tiên bạn đặt tên của các dịch vụ mà bạn muốn đưa vào, sau đó bạn đặt các dịch vụ đó một tên khác nếu bạn muốn. Trên thực tế, đây là điều bắt buộc nếu bạn muốn thu nhỏ mã góc của mình sau này (vì việc thu nhỏ sẽ đổi tên các biến, góc cần phải có để có thể tìm thấy tên dịch vụ).
jpmorin

1
@jpmorin chỉ cần thêm nhận xét của bạn làm câu trả lời, tất cả đều đúng.
toxaq 8/1013

Câu trả lời:


152
  • Các thông số bộ điều khiển có thể là gì?

    Các tham số bộ điều khiển là các phụ thuộc , được đưa vào bởi dịch vụ bộ phun AngularJS. Chúng có thể là bất cứ thứ gì. Nhưng chúng thường là các dịch vụ sẽ được sử dụng bên trong bộ điều khiển.

  • Các chức năng của bộ điều khiển được gọi với các tham số của chúng ở đâu?

    Bộ điều khiển, cũng như các chỉ thị, bộ lọc, dịch vụ và rất nhiều thứ khác trong AngularJS là các hàm . Nhưng khung công tác quản lý rất nhiều thời điểmcách thức các chức năng này được gọi.

    Những gì bạn gọi là thứ liên quan có tên: phụ thuộc , như đã đề cập ở trên. Cái mà bạn gọi là ma thuật là cơ chế tiêm phụ thuộc AngularJS đang hoạt động.

    Khi các hàm này (bộ điều khiển và các hàm khác) được gọi bởi bộ phun, nó sẽ đọc tên tham số (ví dụ: $scopehoặc $httphoặc angularFire) và tìm kiếm dịch vụ đã đăng ký với tên đó, sau đó được cung cấp dưới dạng tham số khi hàm được gọi.

    Nó đơn giản. Bạn có một số cách để hướng dẫn về "sự phụ thuộc" của bạn (các thông số do kim phun quản lý) với kim phun.

    Khi bạn chỉ cần khai báo hàm của mình là function myCtrl($scope) {}, bộ phun sẽ có thể tìm thấy $scopedịch vụ từ tên tham số. Nhưng nếu bạn rút gọn mã JavaScript, bộ tiêm sẽ không thể tìm thấy dịch vụ nữa, vì tên tham số sẽ được sửa đổi thành một chuỗi nhỏ hơn, như "a" hoặc "x". Để tránh vấn đề này, có thể chỉ định tên dịch vụ được đưa vào bằng cách sử dụng ký hiệu mảng . Trong trường hợp này, bạn sẽ khai báo hàm của mình như sau:myCtrl = ['$scope', function($scope) {}]

    Bạn sẽ thấy rất nhiều cách sử dụng ký hiệu mảng trong thế giới AngularJS. Bây giờ bạn bắt đầu hiểu nó. Bạn thậm chí có thể chèn $scopeangularFiresử dụng chúng với các tên khác trong hàm của mình ( không khuyến khích thay đổi tên - ví dụ này ở đây dành cho mục đích học tập): ['$scope', 'angularFire', function(skop, af) {}]- theo cách này, bên trong hàm, bạn có thể sử dụng $ scope làm "skop" và angleFire làm "af". Thứ tự của các dịch vụ trong mảng khớp với thứ tự của các tham số.

Một vi dụ khac:

var myController = ['$scope', '$resource', '$timeout',
    function($scope, $resource, $timeout) {
        // this controller uses $scope, $resource and $timeout
        // the parameters are the dependencies to be injected
        // by AngularJS dependency injection mechanism
    }
];
  • AngleFire được định nghĩa ở đâu?

    Trong mô-đun firebase .

    Như bạn đã biết bây giờ, bộ tiêm sẽ tiêm bất cứ thứ gì miễn là nó có tên "thứ" đó được đăng ký và có sẵn trong hồ sơ của nó. Nếu có một "dịch vụ" với tên gọi đó , anh ấy có thể cung cấp nó.

    Sau đó, làm thế nào, được xây dựng name => stuffdanh sách này mà kim phun sử dụng?

    Mô-đun là câu trả lời. Một mô-đun không chỉ là một danh sách name => stuff. Nó nằm trong một mô-đun nơi bạn đăng ký dịch vụ, nhà máy, bộ lọc, chỉ thị và hơn thế nữa.

    Xem kỹ các phương thức Mô-đun trong tài liệu chính thức ... hầu như tất cả chúng đều nhận dưới dạng tham số: tên và một số " thứ " (trong đó "thứ" hầu như luôn luôn là một hàm , xác định bộ điều khiển hoặc nhà máy hoặc chỉ thị ). Tất cả "thứ" này sẽ trở thành có thể tiêm được thông qua tên được chỉ định của chúng .

    Các dịch vụ AngularJS như "$ timeout", "$ http" và các dịch vụ khác có sẵn theo mặc định vì mô-đun ng đã được tải bởi khuôn khổ.

    Đối với các dịch vụ bổ sung, bạn cần tải / yêu cầu mô-đun . Đó là những gì bạn làm với ngRouter , firebase , v.v. Bằng cách tải mô-đun , nội dung đã đăng ký của nó sẽ có sẵn để đưa vào mô-đun / ứng dụng của bạn .

Hãy xem ví dụ từng bước:

// An empty module:
var module = angular.module('myModule', []);

// Now, adding an "injectable" constant: 
module.constant('niceStuff', { blip: 'blop', blup: 307 });

// We could add a service:
module.service('entityManager', ['$http', function($http){  }]);

// and so on... if I wanted to use "$resource" instead of "$http"
// in the entityManager service above...
// ...I would need to require the ngResource when creating the module above,
// like this: var module = angular.module('myModule', ['ngResource']);
// because "$resource" is not available by default

// NOW, anywhere else, since the code above already ran
// I can use those NAMES as dependencies like this:

// We are creating another module now:
var koolModule = angular.module('km', ['myModule']);
// Note that I am requiring the previous module through its registered name

// Now, anything I've declared in that module
// - just like "ng" (by default) and "firebase" (required) does -
// is available for "injection"!!!

koolModule.controller('koolController',
    ['niceStuff', 'entityManager', function(niceStuff, entityManager) {
        console.log(niceStuff.blip);      // 'blop'
        console.log(niceStuff.blup + 10); // 317
    }]
);

Đây là cách có sẵn những thứ firebase, như angleFire! Chúng ta đã làm gì? Đầu tiên, chúng tôi tạo "myModule" và đăng ký NAMED nội dung cho nó. Sau đó, chúng tôi yêu cầu "myModule" cho "koolModule" của chúng tôi - và những NAMES đó đã có sẵn trong name => stuffdanh sách bộ tiêm .

  • FbURL trong tham số được liên kết như thế nào

    Như chúng ta vừa thấy, hầu hết các phương thức mô-đun chỉ đơn thuần là đăng ký mọi thứ - đặt tên cho mọi thứ để chúng có thể được đưa vào và / hoặc sử dụng thông qua những tên này sau này.

    Khi module.value('fbURL', 'https://angularjs-projects.firebaseio.com/')được gọi, fbURL (và giá trị được chỉ định) được đăng ký vào name => stuffdanh sách ... trong trường hợp này, tên là "fbURL", và giá trị / nội dung là chuỗi URL - nhưng nó có thể là bất kỳ thứ gì!

  • Có nơi nào mà tôi có thể xem tất cả các dịch vụ, ví dụ như $ location và $ timeout mà Angular.js cung cấp không?

    Có, tham chiếu API: http://docs.angularjs.org/api/

    Hãy chú ý đến cách tổ chức điều hướng bên trái ... theo các mô-đun ! Đầu tiên, mô-đun ng , với rất nhiều chỉ thị, dịch vụ, bộ lọc, v.v. Sau đó, bên dưới là các mô-đun khác (ngRoute, ngResource, ngMock, v.v.), mỗi mô-đun chứa các dịch vụ, bộ nối hoặc chỉ thị của riêng chúng ...

Cảm ơn vì đã có cơ hội chia sẻ những suy nghĩ này. Tôi rất thích viết chúng.


4
Cảm ơn bạn! Giải thích tốt về cái gì và tại sao.
Kevin Shea

4
Hành vi ngầm hoàn toàn dựa trên sự hiện diện của một tham số được đặt tên là không thể trực quan và hoàn toàn đáng ghét, nhưng cảm ơn vì câu trả lời tuyệt vời.
jarmod

1
@jarmod chính xác là suy nghĩ của tôi - thật khó hiểu khi xem qua hướng dẫn AngularJS "phonecat" mà không xem bài đăng này trước!
Monkpit

1
"Nó đơn giản." MẸ ƠI.
J. Dimeo

2
Lời giải thích tuyệt vời. Có rất nhiều điều được coi là đương nhiên trong một số hướng dẫn. "Chỉ cần gõ nó như thế này và nó hoạt động." Tôi cần biết làm thế nào và tại sao và điều này đã giải đáp rất nhiều điều. Cảm ơn vi đa danh thơi gian cho tôi!
John Carrell

1

Trước hết công việc tuyệt vời khi chọn khung này. Nó là tốt nhất. Những biến bạn thấy với dấu $ được đưa vào và là một phần của khuôn khổ tiêu chuẩn. Những dịch vụ này sẽ làm cho cuộc sống của bạn dễ dàng hơn rất nhiều. Cách tốt nhất để nghĩ về bộ điều khiển là chúng là các trang tập lệnh. Chúng giúp tách mã. Đừng nghĩ về chúng như những phương pháp. Những biến bạn thấy như $ timeout & $ scope là những dịch vụ sẽ có ích khi bạn cần thực hiện một số việc nhất định. Tất cả tài liệu về khung này có tại http://docs.angularjs.org/api/ nhưng tôi sẽ bắt đầu với hướng dẫn này http://docs.angularjs.org/tutorial/ .

Góc lửa không phải là một phần của khuôn khổ. Nó là một dịch vụ khác thúc đẩy khuôn khổ để tạo ra một mạng phân tán thời gian thực mạnh mẽ. Khi bạn tải anglefirejs, nó đi kèm với dịch vụ sau đó được đưa vào dưới dạng tham số bạn thấy.

Để trả lời câu hỏi thứ hai của bạn, các tham số bạn truyền vào có thể là bất cứ thứ gì miễn là bạn thực hiện một dịch vụ tương ứng. Vui lòng tham khảo phần này để tạo thông số của riêng bạn cho bộ điều khiển: http://docs.angularjs.org/guide/dev_guide.services.creating_services

fbURL chỉ là một biến mà bạn có thể tạo và mã bạn đặt trong câu hỏi của mình chỉ đơn giản là hướng dẫn về cách tạo nó.

Angularjs không phải là loại framework bạn có thể học bằng cách xem những gì nó cung cấp. Đơn giản vì nó cung cấp tất cả. Mọi thứ bạn có thể mang theo để tạo ra một ứng dụng tuyệt vời. Thay vào đó, bạn nên tập trung vào việc hỏi google cách giải quyết vấn đề của bạn với angle.

Cũng kiểm tra các video trên youtube. Bạn sẽ tìm thấy một số cái tuyệt vời.


1

Theo bình luận của toxaq, đây là bình luận như một câu trả lời

  1. Các thông số bộ điều khiển có thể là gì?

    Nó chủ yếu có thể là các dịch vụ, nhà máy, giá trị, hằng số, v.v. mà bạn đã xác định ở đâu đó trước khi HOẶC sử dụng giải quyết trên định nghĩa tuyến đường.

  2. Các chức năng của bộ điều khiển được gọi với các tham số của chúng ở đâu?

    Đây là cách thích hợp để xác định bộ điều khiển:

    angular.module('project').controller('EditCtrl', [
        '$scope', 
        '$location', 
        '$routeParams', 
        'angularFire', 
        'fbURL', 
        function($scope, $location, $routeParams, angularFire, fbURL) { 
            ... 
        } 
    ]); 
    

    Bằng cách đó, trước tiên bạn đặt tên của các dịch vụ mà bạn muốn tiêm, sau đó bạn đặt cho các dịch vụ đó một tên khác nếu bạn muốn. Trên thực tế, điều này là bắt buộc nếu bạn muốn thu nhỏ mã góc của mình sau này (vì việc thu nhỏ sẽ đổi tên các biến, góc cần phải có để có thể tìm thấy tên dịch vụ).

  3. AngleFire được định nghĩa ở đâu?

    Khi bạn xác định mô-đun dự án của mình, bạn cũng bao gồm sự phụ thuộc của mô-đun firebase. Bên trong mô-đun firebase, phải có dịch vụ angleFire giống như fbURL trước đó.

  4. FbURL trong tham số được liên kết với

    Có vẻ như bạn đã hiểu, các thông số của bộ điều khiển đang được đưa vào bằng góc từ định nghĩa của bộ điều khiển. Angular sẽ xem xét tất cả các dịch vụ đã đăng ký và cố gắng tìm một kết quả khớp với tên được chỉ định của tham số và đưa vào dịch vụ theo đó!

  5. Có nơi nào mà tôi có thể xem tất cả các dịch vụ, ví dụ như $ location và $ timeout mà Angular.js cung cấp không?

    Để biết danh sách tất cả các dịch vụ, bộ lọc, chỉ thị được tích hợp sẵn trong Angular, hãy xem API: http://docs.angularjs.org/api


1

Các chức năng của bộ điều khiển được gọi với các tham số của chúng ở đâu?

Các chức năng của bộ điều khiển được khởi tạo bằng lệnh ngController hoặc nếu bạn đã đề cập đến bộ điều khiển trong quá trình tạo tuyến bằng cách sử dụng $routeProvider. AngularJS thực hiện điều này chỉ giúp bạn và đưa các tham số mà bạn đã xác định vào bộ điều khiển của mình bằng cách sử dụng DI.

DI hoạt động bằng cách khớp tên (hoặc một số thứ tự) của các tham số. Vì vậy, $scopesẽ nhận được phạm vi hiện tại, $httpsẽ nhận được dịch vụ http

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.