deostroll · December 11, 2015 12:09
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en" ng-app="myapp">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>My Awesome TODO Items</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <h1>Awesome things TODO</h1>
      <hr/>
      <div ng-controller="MainCtrl">
        <div class="input-group">
          <span class="input-group-addon">
            <i class="glyphicon glyphicon-arrow-right"></i>
          </span>
          <input type="text" placeholder="Enter some awesome todo stuff..."
            ng-model="task" class="form-control" ng-keyup="processKeyup($event)"/>
        </div>
        <br/>
        <p ng-if="isEmpty()">There are no tasks yet...</p>
        <ul class="list-group">
          <li ng-repeat="item in getTasks()" class="list-group-item">
            <a href="javascript:void(0)" title="" ng-click="remove(item.id)" class="btn">
              <i class="glyphicon glyphicon-remove"></i>
            </a>
            <span>{{ item.task }}</span>
          </li>
        </ul>
      </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.js"></script>
    <!-- Include angular -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>

    <!-- your script -->
    <script src="scripts/main.js"></script>
  </body>
 </html>
diff --git a/main.js b/main.js
 angular.module('myapp', [])
  .service('$todo', function TodoService() {

    //our one and only task list
    var list = [];

    var counter = 0;

    var api = {
      //adds item to our list
      add: function(task) {
        counter++;
        list.push({
          id: counter,
          task: task
        })
      },

      //gets all items from list
      get: function() {
        return list.slice();
      },

      //removes item
      remove: function(index) {

        //we don't want angular to pollute
        //our list hence we clone it.
        list.splice(index, 1);

      },

      //adds some default items
      $init: function() {
        this.add('Buy groceries');
        this.add('Pay bill');
        this.add('Fry the cat...');
      }
    };

    //copying api onto service
    angular.extend(this, api);

  })
  .controller('MainCtrl', ['$todo', '$scope', function($todo, $scope) {

    $scope.getTasks = function() {
      return $todo.get();
    };

    $scope.remove = function(id) {
      $todo.remove(id);
    };

    var add = function() {
      $todo.add($scope.task);
    };

    // you want to comment this line for production use
    $todo.$init();

    $scope.processKeyup = function(evt) {
      if(evt.keyCode === 13 && $scope.task.length) {
        add($scope.task);
        $scope.task = '';
      }
    };

  }]);
	<!DOCTYPE html>
	<html lang="en" ng-app="myapp">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- The above 3 meta tags must come first in the head; any other head content must come after these tags -->
	<title>My Awesome TODO Items</title>

	<!-- Bootstrap -->
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />

	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	</head>
	<body>
	<div class="container">
	<h1>Awesome things TODO</h1>
	<hr/>
	<div ng-controller="MainCtrl">
	<div class="input-group">
	<span class="input-group-addon">
	<i class="glyphicon glyphicon-arrow-right"></i>
	</span>
	<input type="text" placeholder="Enter some awesome todo stuff..."
	ng-model="task" class="form-control" ng-keyup="processKeyup($event)"/>
	</div>
	<br/>
	<p ng-if="isEmpty()">There are no tasks yet...</p>
	<ul class="list-group">
	<li ng-repeat="item in getTasks()" class="list-group-item">
	<a href="javascript:void(0)" title="" ng-click="remove(item.id)" class="btn">
	<i class="glyphicon glyphicon-remove"></i>
	</a>
	<span>{{ item.task }}</span>
	</li>
	</ul>
	</div>
	</div>

	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.js"></script>
	<!-- Include angular -->
	<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>

	<!-- your script -->
	<script src="scripts/main.js"></script>
	</body>
	</html>
	angular.module('myapp', [])
	.service('$todo', function TodoService() {

	//our one and only task list
	var list = [];

	var counter = 0;

	var api = {
	//adds item to our list
	add: function(task) {
	counter++;
	list.push({
	id: counter,
	task: task
	})
	},

	//gets all items from list
	get: function() {
	return list.slice();
	},

	//removes item
	remove: function(index) {

	//we don't want angular to pollute
	//our list hence we clone it.
	list.splice(index, 1);

	},

	//adds some default items
	$init: function() {
	this.add('Buy groceries');
	this.add('Pay bill');
	this.add('Fry the cat...');
	}
	};

	//copying api onto service
	angular.extend(this, api);

	})
	.controller('MainCtrl', ['$todo', '$scope', function($todo, $scope) {

	$scope.getTasks = function() {
	return $todo.get();
	};

	$scope.remove = function(id) {
	$todo.remove(id);
	};

	var add = function() {
	$todo.add($scope.task);
	};

	// you want to comment this line for production use
	$todo.$init();

	$scope.processKeyup = function(evt) {
	if(evt.keyCode === 13 && $scope.task.length) {
	add($scope.task);
	$scope.task = '';
	}
	};

	}]);