I am currently experimenting with AngularJs and Play Framework 2.0 (Scala). Play utilizes Closure to reduce the size of Javascript files.
The code in my file looks like this:
// Defining a Module 'todoList' for Angular that will load the views. The views in this example are very basic, just to demonstrate 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. It adds an extra tick next to a task to indicate whether it's done or not
angular.module('taskDoneFilter', []).filter('checkmark', function() {
return function(input) {
return input ? '\u2713' : '\u2718';
};
});
// When running tests with Jasmine, the jsRoutes object is not defined. This means we need to use a default route for the http call below
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 to facilitate changes
angular.module('todoServices', ['ngResource']).
factory('All', function ($resource) {
return $resource(tasksUrl, {}, {
query: {method: 'GET', params: {}, isArray: true}
});
})
.factory('Task', function ($resource) {
return $resource('tasks', {}, {
add: {method: 'POST'}
});
});
/**
* Controller behind the view, referenced by ng-controller
* All methods and data models in the view correspond to this controller
* @param $scope - model data injected into the controller
*/
var TodoCtrl = ['$scope', 'All', 'Task', function($scope, All, Task) {
// Use the service to get the data
$scope.todos = All.query();
// Function called when submitting the form. Adds 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 = '';
};
// Calculates the remaining todos
$scope.remaining = function() {
var count = 0;
angular.forEach($scope.todos, function(todo) {
count += todo.done ? 0 : 1;
});
return count;
};
// 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 for providing a second view
var TaskDetailCtrl = ['$scope', '$routeParams', function($scope, $routeParams) {
$scope.id = $routeParams.id;
}];
However, after minimizing the code, it stops working. Specifically, the following parts cause issues:
var module$todo={};
and
var TodoCtrl$$module$todo=
This results in the application breaking down.
If you have any insights on why this might be happening, I would greatly appreciate your input.