Angularjs는 베스트 프랙티스를 최소화합니다.
http://www.alexrothenberg.com/2013/02/11/the-magic-behind-angularjs-dependency-injection.html을 읽고 있는데 javascript를 최소화하면 angularjs 의존성 주입에 문제가 있다는 것을 알게 되었기 때문에 다음 방법 대신
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를 위한 것이라고 생각했는데…
항상 주입 방식(두 번째 방식)을 사용해야 합니까?
네, 항상요!따라서 Minifer가 $scope를 변수a로, $http를 변수b로 변환해도 ID는 문자열로 유지됩니다.
Angular의 이 페이지를 참조하십시오.JS 문서, 최소화에 대한 메모까지 아래로 스크롤합니다.
갱신하다
또는 빌드 프로세스에서 ng-notate npm 패키지를 사용하여 이러한 장황함을 방지할 수 있습니다.
두 번째 변종을 사용하는 것이 더 안전하지만 첫 번째 변종을 ngmin으로 안전하게 사용하는 것도 가능하다.
갱신:
ng-notate는 이 문제를 해결하기 위한 새로운 기본 도구가 되었습니다.
네, 명시적 의존관계 주입(두 번째 배리언트)을 사용해야 합니다.그러나 Angular 1.3.1은 암묵적 종속성 주입을 해제할 수 있으므로 이름을 변경할 때 발생할 수 있는 문제를 한 번에 해결하는 데 매우 유용합니다(최소화 전).
암묵적 DI 해제, 사용strictDi설정 속성:
angular.bootstrap(document, ['myApp'], {
strictDi: true
});
암묵적 DI 해제, 사용ng-strict-di지시:
<html ng-app="myApp" ng-strict-di>
이 점을 지적하기 위해
할 필요가 없다
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
})
}]
미니화 중 grunt는 DI를 관리하는 방법을 고려하기 때문입니다.
OZ_가 말한 것처럼 ngmin을 사용하여 directive.js service.js와 같은 모든 각도 js 파일을 최소화합니다.그런 다음 Closure 컴파일러를 사용하여 최적화할 수 있습니다.
참조:
를 사용하는 것이 좋을지도 모릅니다.$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
})
}
엄격한 의존관계 주입을 사용한 문제 진단
Implicit Annotation을 사용하면 최소화 시 코드가 끊어집니다.
문서에서:
암묵적 주석
주의:코드를 최소화할 계획이면 서비스 이름이 변경되고 앱이 중단됩니다.
추가할 수 있습니다.ng-strict-di과 같은 요소에 관한 지시ng-app엄격한 DI 모드로 전환합니다.
<body ng-app="myApp" ng-strict-di>
strict 모드에서는 서비스가 암묵적인 주석을 사용하려고 할 때마다 오류가 발생합니다.
이것은 문제를 찾는 데 도움이 될 수 있습니다.
상세한 것에 대하여는, 을 참조해 주세요.
- AngularJS 개발자 가이드 - 엄격한 의존성 주입 사용
- AngularJS ng-app Directive API 참조
- AngularJS 오류 참조 - 오류: $injector: Unpr Unknown Provider
언급URL : https://stackoverflow.com/questions/18782324/angularjs-minify-best-practice
'source' 카테고리의 다른 글
| angularjs를 사용하여 폼을 연재할 수 있는 더 효과적인 방법이 있나요? (0) | 2023.03.02 |
|---|---|
| javascript scrollIntoView를 부드럽게 만드는 방법 (0) | 2023.03.02 |
| React 컨스트럭터에서 super()를 호출하는 기능은 무엇입니까? (0) | 2023.02.25 |
| JDBC ResultSet: getDateTime이 필요한데 getDate와 getTimeStamp만 있습니다. (0) | 2023.02.25 |
| 변경 사항 없이 이 페이지에 액세스할 수 있는 권한이 없습니다. (0) | 2023.02.25 |