Closure Compiler가이 AngularJS 스크립트를 해독하는 이유는 무엇입니까?

Question

Play Framework 2.0 (Scala)으로 AngularJs를 테스트하고 있습니다. Play는 Javascript 파일을 최소화하기 위해 Closure를 사용합니다.

// Define a Module 'todoList' for Angular that will load the views. In this example the views are very simple, it's just to show 
// the concept 
angular.module('todoList', ['taskDoneFilter', 'todoServices']). 
    config(['$routeProvider', function($routeProvider) { 
     $routeProvider. 
      when('/all', {templateUrl: 'assets/angular/all.html', controller: TodoCtrl}). 
      when('/task/:id', {templateUrl: 'assets/angular/task.html', controller: TaskDetailCtrl}). 
      otherwise({redirectTo: '/all'}); 
    }]); 


// This filter allows us to convert strings. In this case, it adds an extra tick besides a task indicating if it's done or no 
angular.module('taskDoneFilter', []).filter('checkmark', function() { 
    return function(input) { 
     return input ? '\u2713' : '\u2718'; 
    }; 
}); 


// When running tests with Jasmine the jsRoutes object is not defined, which means we need to use a default route for the http call below 
// This kind of defeats the purpose of retrieving the routes via Play instead of hardcoding them, as we need a fallback for the tests 
// but I decided to leave the code just to see that we have the possibility, in case I find a way to improve this. 
var tasksUrl = '/tasks/all'; 
if(!(typeof jsRoutes === "undefined")) { 
    tasksUrl = jsRoutes.controllers.Application.tasks().url ; 
} 

// Definition of a Service, that stores all the REST requests independently from the controllers, facilitating change 
angular.module('todoServices', ['ngResource']). 
    factory('All', function ($resource) { 
     return $resource(tasksUrl, {}, { 
      //The data model is loaded via a GET request to the app 
      query: {method: 'GET', params: {}, isArray: true} 
     }); 
    }) 
    .factory('Task', function ($resource) { 
     return $resource('tasks', {}, { 
      add: {method: 'POST'} 
     }); 
    }); 

/** 
* This is the controller behind the view, as declared by ng-controller 
* All references to methods and data model in the view map to this controller 
* @param $scope model data injected into the controller 
* @constructor 
*/ 
var TodoCtrl = ['$scope', 'All', 'Task', function($scope, All, Task) { 
    // We use the service to query for the data 
    $scope.todos = All.query(); 

    //when submitting the form, this is called. Model in the form is referenced (todoText) and we add the task to 
    //the data model 
    $scope.addTodo = function() { 
     var txt = $scope.todoText; 
     $scope.todos.push({text: txt, done: false}); 
     Task.save({msg: txt}); 
     $scope.todoText = ''; //clear the input! 
    }; 

    // calculates the remaining todos, automatically called when the model changes to update the view 
    // notice the use of 'angular' component for functional approach 
    $scope.remaining = function() { 
     var count = 0; 
     angular.forEach($scope.todos, function(todo) { 
      count += todo.done ? 0 : 1; 
     }); 
     return count; 
    }; 

    //another acton triggered by click (in this case on an anchor), which archives completed tasks 
    $scope.archive = function() { 
     var oldTodos = $scope.todos; 
     $scope.todos = []; 
     angular.forEach(oldTodos, function(todo) { 
      if (!todo.done) $scope.todos.push(todo); 
     }); 
    }; 
}]; 

// Task details controller, used in the routes to provide a second view for the application 
var TaskDetailCtrl = ['$scope', '$routeParams', function($scope, $routeParams) { 
    $scope.id = $routeParams.id; 
}]; 

을하지만 최소화 할 때, 그것은된다 :

var module$todo={};angular.module("todoList",["taskDoneFilter","todoServices"]).config(["$routeProvider",function($routeProvider){$routeProvider.when("/all",{templateUrl:"assets/angular/all.html",controller:TodoCtrl$$module$todo}).when("/task/:id",{templateUrl:"assets/angular/task.html",controller:TaskDetailCtrl$$module$todo}).otherwise({redirectTo:"/all"})}]);angular.module("taskDoneFilter",[]).filter("checkmark",function(){return function(input){return input?"\u2713":"\u2718"}}); 
var tasksUrl$$module$todo="/tasks/all";if(!(typeof jsRoutes==="undefined"))tasksUrl$$module$todo=jsRoutes.controllers.Application.tasks().url;angular.module("todoServices",["ngResource"]).factory("All",function($resource){return $resource(tasksUrl$$module$todo,{},{query:{method:"GET",params:{},isArray:true}})}).factory("Task",function($resource){return $resource("tasks",{},{add:{method:"POST"}})}); 
var TodoCtrl$$module$todo=["$scope","All","Task",function($scope,All,Task){$scope.todos=All.query();$scope.addTodo=function(){var txt=$scope.todoText;$scope.todos.push({text:txt,done:false});Task.save({msg:txt});$scope.todoText=""};$scope.remaining=function(){var count=0;angular.forEach($scope.todos,function(todo){count+=todo.done?0:1});return count};$scope.archive=function(){var oldTodos=$scope.todos;$scope.todos=[];angular.forEach(oldTodos,function(todo){if(!todo.done)$scope.todos.push(todo)})}}]; 
var TaskDetailCtrl$$module$todo=["$scope","$routeParams",function($scope,$routeParams){$scope.id=$routeParams.id}]; 

을 한 후 작동이 중지 다음과 같이

내 파일입니다. 공지 사항 :

var module$todo={}; 

앱을 깰

var TodoCtrl$$module$todo= 

.

왜 이런 일이 일어날 수 있습니까?

Answer 1

All & Task 서비스는 '안전을 최소화'하지 않습니다. array notation을 사용해야합니다.

angular.module('todoServices', ['ngResource']). 
    factory('All', ['$resource', function ($resource) { 
     return $resource(tasksUrl, {}, { 
      //The data model is loaded via a GET request to the app 
      query: {method: 'GET', params: {}, isArray: true} 
     }); 
    }]) 
    .factory('Task', ['$resource', function ($resource) { 
     return $resource('tasks', {}, { 
      add: {method: 'POST'} 
     }); 
    }]); 

또한, angular.module(...).controller()와 컨트롤러를 정의 : 당신이 더 큰 응용 프로그램이있는 경우

angular.module(...).controller('TodoCtrl', ['$scope', 'All', 'Task', function($scope, All, Task) { 
}]); 

Answer 2

... 그리고, 당신이 (옵션 strictDi을 설정하여 명명 된 참조를 사용하지 않는 경우 찾을 수 있습니다 ng-app 속성이있는 태그에서 부트 스트랩 또는 ng-strict-di 속성).