Angularjs rút gọn phương pháp hay nhất

103

Tôi đang đọc http://www.alexrothenberg.com/2013/02/11/the-magic-behind-angularjs-dependency-injection.html và hóa ra việc chèn phụ thuộc anglejs có vấn đề nếu bạn giảm thiểu javascript của mình, vì vậy tôi tôi tự hỏi nếu thay vì

var MyController = function($scope, $http) {
    $http.get('https://api.github.com/repos/angular/angular.js/commits')
      .then(function(response) {
        $scope.commits = response.data
      })
  }

bạn nên sử dụng

var MyController = ['$scope', '$http', function($scope, $http) {
  $http.get('https://api.github.com/repos/angular/angular.js/commits')
    .then(function(response) {
      $scope.commits = response.data
    })
}]

nói chung, tôi nghĩ đoạn mã thứ hai là dành cho phiên bản cũ của anglejs nhưng ....

Tôi có nên sử dụng luôn cách tiêm (cách thứ hai) không?

javascript  angularjs  dependency-injection 
— Whisher
nguồn

Câu trả lời:

102

Vâng , luôn luôn! Vì vậy, theo cách này, ngay cả khi minifer của bạn chuyển đổi $ scope thành biến a và $ http thành biến b, danh tính của chúng vẫn được giữ nguyên trong các chuỗi.

Xem trang tài liệu AngularJS này, cuộn xuống A Note on Minification .

CẬP NHẬT

Ngoài ra, bạn có thể sử dụng gói npm ng-annotate trong quá trình xây dựng của mình để tránh tình trạng dài dòng này.

— Selvam Palanimalai
nguồn
Điều này và một số vấn đề khác được giải thích rất tốt tại egghead.io. JFYI
— Wottensprels
@Sprottenwels: Đúng! Rất nhiều tài nguyên hữu ích ở đó.
— Selvam Palanimalai
8
Thay vì sử dụng cú pháp dài dòng hơn này, bạn có thể sử dụng ngmin và một công cụ xây dựng (như Grunt) trước khi bạn chạy minification. Bằng cách đó, bạn có thể rút gọn đúng cách nhưng cũng sử dụng cú pháp tiêm phụ thuộc.
— jkjustjoshing
4
Lưu ý về việc rút gọn đã được chuyển đến đây docs.angularjs.org/tutorial/step_07
— Razvan.432
— georgeawg
36

Sẽ an toàn hơn khi sử dụng biến thể thứ hai nhưng cũng có thể sử dụng biến thể đầu tiên một cách an toàn với ngmin .

CẬP NHẬT:
Giờ đây ng-annotate trở thành một công cụ mặc định mới để giải quyết vấn đề này.

— OZ_
nguồn
7

Có, bạn cần sử dụng tính năng tiêm phụ thuộc rõ ràng (biến thể thứ hai). Nhưng kể từ Angular 1.3.1, bạn có thể tắt tính năng chèn phụ thuộc ngầm định , nó thực sự hữu ích để giải quyết các vấn đề tiềm ẩn với việc đổi tên ngay lập tức (trước khi rút gọn).

Tắt DI ngầm định, sử dụng thuộc tính strictDicấu hình:

angular.bootstrap(document, ['myApp'], {
    strictDi: true
});

Tắt DI ngầm định, sử dụng ng-strict-dichỉ thị:

<html ng-app="myApp" ng-strict-di>
— dizel3d
nguồn
7

Chỉ để chỉ ra rằng nếu bạn sử dụng

Yeoman

không cần phải làm như thế

var MyController = ['$scope', '$http', function($scope, $http) {
  $http.get('https://api.github.com/repos/angular/angular.js/commits')
    .then(function(response) {
      $scope.commits = response.data
    })
}]

vì grunt trong quá trình minify có tính đến cách quản lý DI.

— Whisher
nguồn
0

Bạn có thể muốn sử dụng $injectnhư nó được đề cập ở đây :

MyController.$inject = ['$scope', '$http'];

function MyController($scope, $http) {
  $http.get('https://api.github.com/repos/angular/angular.js/commits')
    .then(function(response) {
      $scope.commits = response.data
    })
}
— không có id
nguồn
0

Sử dụng tính năng tiêm phụ thuộc nghiêm ngặt để chẩn đoán vấn đề

Với Chú thích ngầm , mã sẽ bị hỏng khi được thu nhỏ.

Từ Tài liệu:

Chú thích ngầm

Cẩn thận: Nếu bạn định rút gọn mã của mình, tên dịch vụ của bạn sẽ bị đổi tên và phá vỡ ứng dụng của bạn.

Bạn có thể thêm một ng-strict-dichỉ thị trên cùng một phần tử ng-appđể chọn tham gia chế độ DI nghiêm ngặt.

<body ng-app="myApp" ng-strict-di>

Chế độ nghiêm ngặt gây ra lỗi bất cứ khi nào một dịch vụ cố gắng sử dụng các chú thích ngầm.

Điều này có thể hữu ích để xác định vấn đề tìm kiếm.

Để biết thêm thông tin, hãy xem

— georgeawg
nguồn
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 cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.