Angularjs ลดแนวทางปฏิบัติที่ดีที่สุด

Question 1

ฉันกำลังอ่าน http://www.alexrothenberg.com/2013/02/11/the-magic-behind-angularjs-dependency-injection.htmlและปรากฎว่า angularjs dependency injection มีปัญหาถ้าคุณลดขนาดจาวาสคริปต์ของคุณดังนั้นฉัน ฉันสงสัยว่าแทนที่จะเป็น

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

คุณควรใช้

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

โดยรวมแล้วฉันคิดว่าตัวอย่างที่สองนั้นมีไว้สำหรับ angularjs เวอร์ชันเก่า แต่ ...

ฉันควรใช้วิธีฉีด (วิธีที่สอง) เสมอหรือไม่?

Question 2

ใช่เสมอ! ด้วยวิธีนี้แม้ว่ามินิเฟอร์ของคุณจะแปลง $ ขอบเขตเป็นตัวแปร a และ $ http เป็นตัวแปร b แต่ข้อมูลประจำตัวของพวกเขาจะยังคงอยู่ในสตริง

ดูหน้านี้ของ AngularJS เอกสารเลื่อนลงไปหมายเหตุเกี่ยวกับ minification

อัปเดต

หรือคุณสามารถใช้แพ็คเกจng-annotate npm ในกระบวนการสร้างของคุณเพื่อหลีกเลี่ยงความฟุ่มเฟื่อยนี้

Question 3

มันเป็นความปลอดภัยในการใช้สองตัวแปร แต่ก็ยังเป็นไปได้ที่จะใช้ตัวแปรแรกได้อย่างปลอดภัยด้วยngmin

อัปเดต:
ตอนนี้ng-annotateกลายเป็นเครื่องมือเริ่มต้นใหม่ในการแก้ปัญหานี้

Question 4

ใช่คุณต้องใช้Explicit dependency injection (ตัวแปรที่สอง) แต่เนื่องจากAngular 1.3.1คุณสามารถปิดการฉีดพึ่งพาโดยนัยได้จึงเป็นประโยชน์อย่างมากในการแก้ปัญหาที่อาจเกิดขึ้นด้วยการเปลี่ยนชื่อในครั้งเดียว (ก่อนลดขนาด)

การปิด DI โดยนัยโดยใช้strictDiคุณสมบัติ config:

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

การปิด DI โดยนัยโดยใช้ng-strict-diคำสั่ง:

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

Question 5

เพียงเพื่อชี้ให้เห็นว่าหากคุณใช้

Yeoman

ไม่จำเป็นต้องทำเหมือน

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

เนื่องจากคำรามในระหว่างการลดขนาดให้คำนึงถึงวิธีจัดการ DI

Question 6

เช่นเดียวกับที่ OZ_ กล่าวว่าใช้ ngmin เพื่อลดขนาดไฟล์ js เชิงมุมทั้งหมดเช่น directive.js service.js หลังจากนั้นคุณสามารถใช้ Closure compiler เพื่อปรับให้เหมาะสมได้

อ้างอิง:

วิธีการย่อขนาดสคริปต์ angularjs

สร้างด้วย YO

Question 7

คุณอาจต้องการใช้$injectตามที่กล่าวไว้ที่นี่ :

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

Question 8

ใช้ Strict Dependency Injection เพื่อวินิจฉัยปัญหา

ด้วยคำอธิบายประกอบโดยนัยโค้ดจะแตกเมื่อขนาด

จากเอกสาร:

คำอธิบายโดยนัย

ข้อควรระวัง:หากคุณวางแผนที่จะลดรหัสของคุณชื่อบริการของคุณจะถูกเปลี่ยนชื่อและทำให้แอปของคุณเสียหาย

คุณสามารถเพิ่มng-strict-diคำสั่งในองค์ประกอบเดียวกันกับng-appการเลือกใช้โหมด DI แบบเข้มงวด

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

โหมดเข้มงวดจะแสดงข้อผิดพลาดเมื่อใดก็ตามที่บริการพยายามใช้คำอธิบายประกอบโดยนัย

สิ่งนี้มีประโยชน์ในการพิจารณาค้นหาปัญหา

สำหรับข้อมูลเพิ่มเติมโปรดดู