Intro to Angular snippets

animations.css

[ng-view].ng-enter {
  -webkit-transition: .3s linear all;
  /* Safari/Chrome */
  -moz-transition: .3s linear all;
  /* Firefox */
  -o-transition: .3s linear all;
  /* Opera */
  transition: .3s linear all;
  /* IE10+ and Future Browsers */
}

/**
* Pre animation -> enter
*/
[ng-view].ng-enter {
  /* The animation preparation code */
  opacity: 0;
}

/**
* Post animation -> enter
*/
[ng-view].ng-enter.ng-enter-active {
  /* The animation code itself */
  opacity: 1;
}

TasksService.local.js

function TasksService() {

	var tasks = [];

	function add(task) {
		task.completed = false;
		tasks.push(task);
	}

	function clearCompleted() {

		var completed = tasks.filter(function (task) {
			return task.completed;
		});

		for (var i = 0; i < completed.length; i++) {
            var task = completed[i];
            tasks.splice(tasks.indexOf(task), 1);
		}
	}

	function deleteTask(task) {
		tasks.splice(tasks.indexOf(task), 1);
	}

	function getAll() {
		return tasks;
	}

	return {
		add: add,
		'delete': deleteTask,
		clearCompleted: clearCompleted,
		getAll: getAll
	}
}

angular.module('TodoApp').service('TasksService', TasksService)

TasksService.local.withevents.js

function TasksService($rootScope) {

	var tasks = [];

	function add(task) {
		task.completed = false;
		tasks.push(task);
		_triggerChange();
	}

	function clearCompleted() {

		var completed = tasks.filter(function (task) {
			return task.completed;
		});

		for (var i = 0; i < completed.length; i++) {
            var task = completed[i];
            tasks.splice(tasks.indexOf(task), 1);
		}

		_triggerChange();
	}

	function deleteTask(task) {
		tasks.splice(tasks.indexOf(task), 1);
		_triggerChange();
	}

	function getAll() {
		return tasks;
	}

	function _triggerChange() {
		$rootScope.$broadcast('tasksChanged');
	}

	return {
		add: add,
		'delete': deleteTask,
		clearCompleted: clearCompleted,
		getAll: getAll
	}
}

angular.module('TodoApp').service('TasksService', TasksService)

TasksService.remote.js

TasksService.$inject = [ '$http' ];

function TasksService($http) {
    var baseUrl = "https://jchad-todo.azurewebsites.net/todos";

    function getAll() {
        return _unwrap($http.get(baseUrl));
    }

    function create(todo) {
        return _unwrap($http.post(baseUrl, todo));
    }

    function update(todo) {
        todo.state = todo.completed ? 2 : 1;
        return _unwrap($http.put([baseUrl,todo.id].join('/'), todo));
    }

    function remove(todoId) {
        return _unwrap($http.delete([baseUrl,todoId].join('/')));
    }

    function clearCompleted() {
        return _unwrap($http.post([baseUrl, 'clear'].join('/')));
    }

    function setState(todoId, state) {
        return _unwrap($http.post([baseUrl, todoId, state].join('/')));
    }
    
    function _unwrap(request) {
        return request.then(function(resp) { 
            return _mapTodo(resp.data); 
        });
    }
    
    function _mapTodo(data) {
        if(Array.isArray(data)) {
            return data.map(_mapTodo);
        }
        
        return { 
            id: data.id,
            name: data.name,
            completed: data.state == 2  
        };
    }

    return {
        getAll: getAll,
        add: create,
        'delete': remove,
        complete: function (todoId) { return setState(todoId, 'complete'); },
        uncomplete: function (todoId) { return setState(todoId, 'uncomplete'); },
        clearCompleted: clearCompleted,
        update: update
    };
}

angular.module('TodoApp').service('TasksService', TasksService)

TasksService.remote.withevents.js

TasksService.$inject = [ '$http', '$rootScope' ];

function TasksService($http, $rootScope) {
    var baseUrl = "https://jchad-todo.azurewebsites.net/todos";

    function getAll() {
        return _unwrap($http.get(baseUrl));
    }

    function create(todo) {
        return _unwrap($http.post(baseUrl, todo)).then(_triggerChange);
    }

    function update(todo) {
        todo.state = todo.completed ? 2 : 1;
        return _unwrap($http.put([baseUrl,todo.id].join('/'), todo)).then(_triggerChange);
    }

    function remove(todoId) {
        return _unwrap($http.delete([baseUrl,todoId].join('/'))).then(_triggerChange);
    }

    function clearCompleted() {
        return _unwrap($http.post([baseUrl, 'clear'].join('/'))).then(_triggerChange);
    }

    function setState(todoId, state) {
        return _unwrap($http.post([baseUrl, todoId, state].join('/'))).then(_triggerChange);
    }
    
    function _unwrap(request) {
        return request.then(function(resp) { 
            return _mapTodo(resp.data); 
        });
    }
    
    function _mapTodo(data) {
        if(Array.isArray(data)) {
            return data.map(_mapTodo);
        }
        
        return { 
            id: data.id,
            name: data.name,
            completed: data.state == 2  
        };
    }

	function _triggerChange(args) {
		$rootScope.$broadcast('tasksChanged');
        return args;
	}

    return {
        getAll: getAll,
        add: create,
        'delete': remove,
        complete: function (todoId) { return setState(todoId, 'complete'); },
        uncomplete: function (todoId) { return setState(todoId, 'uncomplete'); },
        clearCompleted: clearCompleted,
        update: update
    };
}

angular.module('TodoApp').service('TasksService', TasksService)