angular.js - angularjs dependency injection writing problem

Question

There are two ways to write injection in the book
app.controller('PhoneListCtrl', ['$scope', '$http', function ($scope, $http)];
app.controller( 'PhoneListCtrl', function ($scope,$http)];
I don’t understand the difference between these two! ?

Answer 1

First format your code:

Display injection, the code is too long and difficult to read, and the code compression is error-free

app.controller('PhoneListCtrl', ['$scope', '$http', function（$scope, $http){
     //do something
}]);

Implicit injection is simple to write, but errors will occur when js is compressed, because the variable name becomes shorter, and dependency injection is based on the name of its service

app.controller('PhoneListCtrl', function（$scope, $http){
     //do something
});

We recommend the $inject method, you can refer to JohnPapa’s Angular Style Guide

app.controller('PhoneListCtrl', PhoneListCtrl);

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

function PhoneListCtrl($scope, $http){

}

In addition, no matter which one you use, you don’t have to worry about code compression, because there are plug-ins that will help us with dependency injection. Whether you use gulp or grunt, there will be a plug-in ng-annotate. Helps you add dependency injection.

Give me an example

app.controller('PhoneListCtrl', PhoneListCtrl);

/* @ngInject */
function PhoneListCtrl($scope, $http){

}

Answer 2

I’ll give you the answer directly by quoting an article
Original address
Dependency injection is one of the best patterns of AngularJS. It makes testing easier and makes the objects it depends on clearer. AngularJS is very flexible when it comes to injection. The simplest way is to just pass the dependency name into the function for the module:

var app = angular.module('app',[]);app.controller('MainCtrl', function($scope, $timeout){
    $timeout(function(){
        console.log($scope);
    }, 1000);});

Here, it is clear that MainCtrl depends on $scope and $timeout.
Until you are ready to go into production and minify your code. Using UglifyJS, the above example would become:

var app=angular.module("app",[]);
app.controller("MainCtrl",function(e,t){t(function(){console.log(e)},1e3)})

Now how does AngularJS know what MainCtrl depends on? AngularJS provides a very simple solution: pass the dependencies as an array of strings, and the last element of the array is a function that takes all the dependencies as parameters.

app.controller('MainCtrl', ['$scope', '$timeout', function($scope, $timeout){
    $timeout(function(){
        console.log($scope);
    }, 1000);}]);

Next, AngularJS can also know how to find dependencies in the compressed code:

app.controller("MainCtrl",["$scope","$timeout",function(e,t){t(function(){console.log(e)},1e3)}])

Answer 3

The former is displayed injection, and the latter is automatic injection. No difference.
But the most recommended one is inject function injection. In addition, in your first way of writing, please note that after display injection, the order must correspond to the order of function parameters.

Answer 4

Thank you both! Been taught a lesson