Angular.js #1

Learning Angular.js apps

by Jeancarlo Fontalvo

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<div ng-app="app">
  <section class="container" ng-controller="formController as vm">
    <form action="#" class="cute-form">
      <div class="form-group">
        <label for="">Name</label>
        <input type="text" ng-model="vm.currentNumber" class="form-control">
      </div>
      
      <button type="button" ng-click="vm.add()">
        Add number
      </button>
    </form>
    <div class="well">
      Current number, <span ng-bind="vm.currentNumber"></span>!
      <ul>
        <li ng-repeat="number in vm.numbers">
          {{number}}
        </li>
      </ul>
    </div>
    
  </section>
</div>

CSS

.cute-form{
  width: 50%
  margin: 10px auto;
   
}

JavaScript

var app = angular.module("app", []);

app.service("names", function(){
	var names = [
  	"Sussan", "Martha", "Jessica", "Olivia", "Alexandra"
  ]
	this.get = function( a ) {
  	return  names[ Math.round ( Math.random() * names.length )  ]; 
  }
  
  this.add = function( a ) {
  	if( names.indexOf( a ) == -1 ) 
    	names.push( a );
      
  	return this;
  }
});

app.provider("numbers", function(){

	this.$get = function() {
  		var numbers = [];
      
      this.push = function( a ) {
      	numbers.push( a );
      	return this;
      }
      
      this.show = function() {
      	console.log( numbers );
        return this;
      }
      
      this.getAll = function () {
      	return numbers;
      }
      
      this.getIn = function ( index ) {
      		return numbers[ index ];
      }
      
      return this;
  }
  
});

app.factory("nameGenerator", function(){
  return {
  	gen: function( a ) {
  		return a % 2 == 0 ? "Sussan" : "Martha";
  	}
  }
});

app.controller("formController", [ "nameGenerator", "names", "numbers", function( nameGenerator, names, numbers ){
  var vm = this;
  vm.numbers 			 = numbers.getAll(); 
  vm.currentNumber = vm.numbers[ 0 ];
  vm.add = function() { 
  	if( vm.currentNumber ) 
    	numbers.push( vm.currentNumber ); 
      // - - - - - - - - - -
    	vm.currentNumber = "";
  };
}]);