rsolomonjr/AngularJS project [in progress].markdown

## AngularJS project [in progress].markdown

      
    Raw
  

              AngularJS project [in progress].markdown
            
          
    AngularJS project [in progress]

A Pen by Rodney Solomon on CodePen.
License.

  
## data.js
'use strict';

angular.module('todoListApp')
.service('dataService', function($http) {
  this.helloWorld = function() {
    console.log("This is the data service's method!");
  };
  this.getTodos = function(callback){
    $http.get('todos.json').then(callback)
  };
  this.deleteTodo = function(todo) {
    console.log("The" + todo.name + " has been deleted!")
    //simulate deletion
  };
  this.saveTodos = function(todo) {
    console.log(todos.length + " todos have been saved!")
  };
});

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>MY TODO LIST</title>
  <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link href='style.css' rel='stylesheet' type='text/css'>
</head>
<body ng-app="todoListApp">
  <h1 ng-click="helloWorld()">My TODOs!</h1>
  <h2>Press 'save' or click outside of the box to update items</h2>
 <todos></todos>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="script.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
<script src="data.js" type="text/javascript"></script>
<script src="todos.js" type="text/javascript"></script>
</body>
</html>

## main.js
'use strict';

angular.module('todoListApp')
.controller('mainCtrl', function($scope, dataService){
  $scope.addTodo = function() {
    var todo = {name: "This is a new todo."};
    $scope.todos.unshift(todo);
  };

$scope.helloWorld = dataService.helloWorld;
dataService.getTodos(function(response)){
  console.log(response.data);
  $scope.todos = response.data;
});

$scope.deleteTodo = function(todo, $index) {
  dataService.deleteTodo(todo);
  $scope.todos.splice($index, 1);
}

$scope.saveTodos = function(todo) {
  var filteredTodos = $scope.todos.filter(function(todo) {
    if(todo.edited) {
      return todo;
    };
  })
  dataService.saveTodos(filteredTodos);
}

});

## script.js
angular.module("todoListApp", []);

## scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>

## style.css
body {
  color: #2d3339;
  font-family: "Varela Round";
  text-align: center;
  background: #edeff0;
  font-size: 16px; }

a {
  color: #3f8abf;
  text-decoration: none; }
  a:hover {
    color: #65a1cc; }

.list {
  background: #fff;
  width: 80%;
  min-width: 500px;
  margin: 30px auto 0;
  border-top: 40px solid #5a6772;
  text-align: left; }
  .list .item {
    border-bottom: 2px solid #edeff0;
    padding: 17px 0 18px 17px; }
    .list .item label {
      padding-left: 5px;
      cursor: pointer; }
    .list .item .editing-label {
      margin-left: 5px;
      font-family: "Varela Round";
      border-radius: 2px;
      border: 2px solid #a7b9c4;
      font-size: 16px;
      padding: 15px 0 15px 10px;
      width: 60%; }
    .list .item .actions {
      float: right;
      margin-right: 20px; }
      .list .item .actions .delete {
        color: #ed5a5a;
        margin-left: 10px; }
        .list .item .actions .delete:hover {
          color: #f28888; }
    .list .item.editing .actions {
      margin-top: 17px; }
  .list .edited label:after {
    content: " edited";
    text-transform: uppercase;
    color: #a7b9c4;
    font-size: 14px;
    padding-left: 5px;
    }
  .list .completed label {
    color: #a7b9c4;
    text-decoration: line-through; }
  .list .add {
    padding: 25px 0 27px 25px; }

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(checkbox-empty.svg) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + span {
    background:url(checkbox-filled.svg) left top no-repeat;
}

## todos.html
 <div class="list">
    <div class="add">
      <a href="" ng-click="addTodo()">+ Add a New Task</a>
    </div>
  &nbsp;
    <div class="item" ng-class="{'editing-item': editing, 'edited': todo.edited, 'completed': todo.completed}"
    ng-repeat="todo in todos | orderBy: 'completed'" ng-init="todo.completed = false">
    <input ng-model="todo.completed" type="checkbox" />
    <span ng-click="todo.completed = !todo.completed; todo.edited = true"></span>
    <label class="editing-label" ng-click="editing = true">{{todo.name}}</label>
    <input ng-change="todo.edited = true" ng-blur="editing = false;" ng-show="editing" ng-model="todo.name" class="editing-label" type="text"/>
  <div class="actions">
    <a href="" ng-click="saveTodos(todo)">SAVE</a>
    <a href="" ng-click="deleteTodo(todo, $index)" class="delete">DELETE</a>
    </div></div></div>

## todos.js
angular.module('todoListApp')
.directive('todos', function(){
  return{
  templateUrl: 'todos.html',
  controller: 'mainCtrl',
  replace: true
  }
})

## todos.json
[
    {"name": "finish my latest song"},
    {"name": "call my wife"},
    {"name": "put my son to bed"},
    {"name": "practice my latest song"}
  ]
	'use strict';

	angular.module('todoListApp')
	.service('dataService', function($http) {
	this.helloWorld = function() {
	console.log("This is the data service's method!");
	};
	this.getTodos = function(callback){
	$http.get('todos.json').then(callback)
	};
	this.deleteTodo = function(todo) {
	console.log("The" + todo.name + " has been deleted!")
	//simulate deletion
	};
	this.saveTodos = function(todo) {
	console.log(todos.length + " todos have been saved!")
	};
	});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>MY TODO LIST</title>
	<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
	<link href='style.css' rel='stylesheet' type='text/css'>
	</head>
	<body ng-app="todoListApp">
	<h1 ng-click="helloWorld()">My TODOs!</h1>
	<h2>Press 'save' or click outside of the box to update items</h2>
	<todos></todos>
	<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
	<script src="script.js" type="text/javascript"></script>
	<script src="main.js" type="text/javascript"></script>
	<script src="data.js" type="text/javascript"></script>
	<script src="todos.js" type="text/javascript"></script>
	</body>
	</html>
	'use strict';

	angular.module('todoListApp')
	.controller('mainCtrl', function($scope, dataService){
	$scope.addTodo = function() {
	var todo = {name: "This is a new todo."};
	$scope.todos.unshift(todo);
	};

	$scope.helloWorld = dataService.helloWorld;
	dataService.getTodos(function(response)){
	console.log(response.data);
	$scope.todos = response.data;
	});

	$scope.deleteTodo = function(todo, $index) {
	dataService.deleteTodo(todo);
	$scope.todos.splice($index, 1);
	}

	$scope.saveTodos = function(todo) {
	var filteredTodos = $scope.todos.filter(function(todo) {
	if(todo.edited) {
	return todo;
	};
	})
	dataService.saveTodos(filteredTodos);
	}

	});
	body {
	color: #2d3339;
	font-family: "Varela Round";
	text-align: center;
	background: #edeff0;
	font-size: 16px; }

	a {
	color: #3f8abf;
	text-decoration: none; }
	a:hover {
	color: #65a1cc; }

	.list {
	background: #fff;
	width: 80%;
	min-width: 500px;
	margin: 30px auto 0;
	border-top: 40px solid #5a6772;
	text-align: left; }
	.list .item {
	border-bottom: 2px solid #edeff0;
	padding: 17px 0 18px 17px; }
	.list .item label {
	padding-left: 5px;
	cursor: pointer; }
	.list .item .editing-label {
	margin-left: 5px;
	font-family: "Varela Round";
	border-radius: 2px;
	border: 2px solid #a7b9c4;
	font-size: 16px;
	padding: 15px 0 15px 10px;
	width: 60%; }
	.list .item .actions {
	float: right;
	margin-right: 20px; }
	.list .item .actions .delete {
	color: #ed5a5a;
	margin-left: 10px; }
	.list .item .actions .delete:hover {
	color: #f28888; }
	.list .item.editing .actions {
	margin-top: 17px; }
	.list .edited label:after {
	content: " edited";
	text-transform: uppercase;
	color: #a7b9c4;
	font-size: 14px;
	padding-left: 5px;
	}
	.list .completed label {
	color: #a7b9c4;
	text-decoration: line-through; }
	.list .add {
	padding: 25px 0 27px 25px; }

	input[type="checkbox"] {
	display:none;
	}
	input[type="checkbox"] + span {
	display:inline-block;
	width:19px;
	height:19px;
	margin:-1px 4px 0 0;
	vertical-align:middle;
	background:url(checkbox-empty.svg) left top no-repeat;
	cursor:pointer;
	}
	input[type="checkbox"]:checked + span {
	background:url(checkbox-filled.svg) left top no-repeat;
	}
	<div class="list">
	<div class="add">
	<a href="" ng-click="addTodo()">+ Add a New Task</a>
	</div>

	<div class="item" ng-class="{'editing-item': editing, 'edited': todo.edited, 'completed': todo.completed}"
	ng-repeat="todo in todos \| orderBy: 'completed'" ng-init="todo.completed = false">
	<input ng-model="todo.completed" type="checkbox" />
	<span ng-click="todo.completed = !todo.completed; todo.edited = true"></span>
	<label class="editing-label" ng-click="editing = true">{{todo.name}}</label>
	<input ng-change="todo.edited = true" ng-blur="editing = false;" ng-show="editing" ng-model="todo.name" class="editing-label" type="text"/>
	<div class="actions">
	<a href="" ng-click="saveTodos(todo)">SAVE</a>
	<a href="" ng-click="deleteTodo(todo, $index)" class="delete">DELETE</a>
	</div></div></div>
	angular.module('todoListApp')
	.directive('todos', function(){
	return{
	templateUrl: 'todos.html',
	controller: 'mainCtrl',
	replace: true
	}
	})
	[
	{"name": "finish my latest song"},
	{"name": "call my wife"},
	{"name": "put my son to bed"},
	{"name": "practice my latest song"}
	]