Angularjs meminimalkan praktik terbaik

103

Saya membaca http://www.alexrothenberg.com/2013/02/11/the-magic-behind-angularjs-dependency-injection.html dan ternyata injeksi ketergantungan angularjs bermasalah jika Anda mengecilkan javascript jadi saya Saya bertanya-tanya apakah alih-alih

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

kamu harus menggunakan

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
    })
}]

semua di dalam semua saya pikir cuplikan kedua untuk versi lama angularjs tapi ....

Haruskah saya selalu menggunakan cara suntik (yang kedua)?

javascript angularjs dependency-injection Whisher
sumber

Jawaban:

102

Ya selalu! Jadi dengan cara ini, meskipun minifer Anda mengonversi $ scope menjadi variabel a dan $ http menjadi variabel b, identitasnya tetap dipertahankan dalam string.

Lihat halaman dokumen AngularJS ini, gulir ke bawah ke A Note on Minification .

MEMPERBARUI

Atau, Anda dapat menggunakan paket npm ng-annotate dalam proses pembuatan Anda untuk menghindari verbositas ini.

Selvam Palanimalai
sumber
Ini, dan beberapa masalah lainnya dijelaskan dengan sangat baik di egghead.io. JFYI
Wottensprels
@Sprottenwels: Yup! Banyak sumber daya yang berguna di sana.
Selvam Palanimalai
8
Alih-alih menggunakan sintaks yang lebih panjang ini, Anda dapat menggunakan ngmin dan alat build (seperti Grunt) sebelum menjalankan minifikasi. Dengan cara itu Anda dapat mengecilkan dengan benar tetapi juga menggunakan sintaks injeksi ketergantungan.
jkjustjoshing
4
Catatan tentang minifikasi
Razvan.432
Lihat juga Panduan Pengembang AngularJS - Anotasi Implisit .
georgeawg
36

Lebih aman menggunakan varian kedua tetapi juga memungkinkan untuk menggunakan varian pertama dengan aman dengan ngmin .

UPDATE:
Sekarang ng-annotate menjadi alat default baru untuk mengatasi masalah ini.

ONS_
sumber
7

Ya, Anda perlu menggunakan injeksi ketergantungan eksplisit (varian kedua). Tapi karena Angular 1.3.1 Anda dapat mematikan injeksi ketergantungan implisit , sangat membantu untuk menyelesaikan masalah potensial dengan mengganti nama sekaligus (sebelum minifikasi).

Menonaktifkan DI implisit, menggunakan strictDiproperti config:

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

Mematikan DI implisit, menggunakan ng-strict-didirektif:

<html ng-app="myApp" ng-strict-di>
dizel3d
sumber
7

Hanya untuk menunjukkan bahwa jika Anda menggunakan

Petani kecil

tidak perlu melakukan suka

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
    })
}]

Karena dengkuran selama minify memperhitungkan cara mengelola DI.

Whisher
sumber
0

Anda mungkin ingin menggunakan $injectseperti yang disebutkan di sini :

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
    })
}
tidak ada id
sumber
0

Gunakan Injeksi Ketergantungan Ketat untuk Mendiagnosis Masalah

Dengan Anotasi Implisit , kode akan rusak saat diminimalkan.

Dari Dokumen:

Anotasi Implisit

Hati-hati: Jika Anda berencana untuk mengecilkan kode, nama layanan Anda akan diganti namanya dan aplikasi Anda rusak.

Anda dapat menambahkan ng-strict-diarahan pada elemen yang sama ng-appuntuk memilih mode DI ketat.

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

Mode ketat memunculkan error setiap kali layanan mencoba menggunakan anotasi implisit.

Ini dapat berguna untuk menentukan masalah yang ditemukan.

Untuk informasi lebih lanjut, lihat

georgeawg.dll
sumber