vic/index

## index
<!DOCTYPE html>
<html>
<head>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <script src="script.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="stories" >

  <h1>Hey {{name}} Your stories</h1>

  <form ng-controller="StoriesCtrl">
    <textarea rows="3" cols="20" ng-model="newStory">
    </textarea>
    <input type="button" value="Add" ng-click="createStory()">
  </form>


  <tweets></tweets>

  <script id="tweets-template" type="text/template">
    <div ng-repeat="story in stories">
      <div class="tweet">
        {{ story.content }}
      </div>
    </div>
  </script>

</body>
</html>

## script
angular

  .module('stories', [])

  .service('StoriesService', StoriesService)

  .controller('StoriesCtrl',
              StoriesController)


  .directive('tweets', StoriesDirective)
 ;

function StoriesDirective () {
  return {
    restrict: 'E',
    controller: 'StoriesCtrl',
    template: document.getElementById('tweets-template').innerHTML
  };
}

function StoriesService ($http) {
  var stories = [
    { id: 1, author: 'Hugo', content: 'Hoy me desperte temprano'},
    { id: 2, author: 'Paco', content: 'No era penal!' }
  ];

  this.all = function () {
    $http.get('http://tec21-201861.usw1.nitrousbox.com/stories.json').
    then(function (response) {
       console.log("From backend: ", response)
    });
    return stories;
  };

  this.nextId = function () {
    return stories.length;
  };

  this.create = function (story) {
    stories.push(story);
  };

}


function StoriesController ($scope, StoriesService) {
  $scope.name = "Dude";
  $scope.stories = StoriesService.all();
  $scope.newStory = '';

  $scope.createStory = function () {
    var story = {
      id: StoriesService.nextId(),
      author: $scope.name,
      content: $scope.newStory
    };

    StoriesService.create(story);
    $scope.stories = StoriesService.all();
    $scope.newStory = '';
  };

}
	<!DOCTYPE html>
	<html>
	<head>

	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
	<script src="script.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body ng-app="stories" >

	<h1>Hey {{name}} Your stories</h1>

	<form ng-controller="StoriesCtrl">
	<textarea rows="3" cols="20" ng-model="newStory">
	</textarea>
	<input type="button" value="Add" ng-click="createStory()">
	</form>


	<tweets></tweets>

	<script id="tweets-template" type="text/template">
	<div ng-repeat="story in stories">
	<div class="tweet">
	{{ story.content }}
	</div>
	</div>
	</script>

	</body>
	</html>
	angular

	.module('stories', [])

	.service('StoriesService', StoriesService)

	.controller('StoriesCtrl',
	StoriesController)


	.directive('tweets', StoriesDirective)
	;

	function StoriesDirective () {
	return {
	restrict: 'E',
	controller: 'StoriesCtrl',
	template: document.getElementById('tweets-template').innerHTML
	};
	}

	function StoriesService ($http) {
	var stories = [
	{ id: 1, author: 'Hugo', content: 'Hoy me desperte temprano'},
	{ id: 2, author: 'Paco', content: 'No era penal!' }
	];

	this.all = function () {
	$http.get('http://tec21-201861.usw1.nitrousbox.com/stories.json').
	then(function (response) {
	console.log("From backend: ", response)
	});
	return stories;
	};

	this.nextId = function () {
	return stories.length;
	};

	this.create = function (story) {
	stories.push(story);
	};

	}


	function StoriesController ($scope, StoriesService) {
	$scope.name = "Dude";
	$scope.stories = StoriesService.all();
	$scope.newStory = '';

	$scope.createStory = function () {
	var story = {
	id: StoriesService.nextId(),
	author: $scope.name,
	content: $scope.newStory
	};

	StoriesService.create(story);
	$scope.stories = StoriesService.all();
	$scope.newStory = '';
	};

	}