<!DOCTYPE html>
<html ng-app="angularLesson">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>AngularJs Tutorial From Adem YALÇIN</title>
	 
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"  >
	 <link href="ders5.css" rel="stylesheet">
 
	<script   src="https://code.jquery.com/jquery-1.12.4.min.js"   ></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"  ></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js "></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>


  	<script src="app.js"></script>
 
</head>
<body >

<ng-include src="'header.html'" ></ng-include>

<ui-view></ui-view>
</body>
</html>
angular.module("angularLesson",['ui.router'])
.config(function($stateProvider,$urlRouterProvider) {
	$urlRouterProvider.otherwise('/');
	$stateProvider
	.state('/',{
		url:'/',
		templateUrl:'home.html',
		controller:'MainCtrl'
	})
	.state('iletisim',{
		url:'/iletisim',
		templateUrl:'iletisim.html',
		controller:'MainCtrl'
	})
	.state('detay',{
		url:'/detay/{id}',
		templateUrl:'detay.html',
		controller:'DetayCtrl'
	})
	.state('yeniyazi',{
		url:'/yeniyazi',
		templateUrl:'yeniyazi.html',
		controller:'YeniYaziCtrl'
	})
})
.run(function ($rootScope,$state) {
	$rootScope.$state=$state;
})
.factory("datalar",function () {
	var date = new Date();
	var data =  [ 
	  { 
	  	title:'İstanbul Latin Night',
	    city: 'İstanbul', 
	    type: '2', 
	    price: 35.0232 ,
	    date:'22-02-2015',
	    like:100,
	    comments:
	    [
	    	{comment:'Bla bla bal',date:date.getTime(),like:20}
	    ]
	  }, 
	   { 
	    title: 'Mersin  Latin Night',
		city: 'Mersin', 
	    type: '1', 
	    price: 3502.323 ,
	    date:'22-02-2015',
		like:100,
	    comments:
	    [
	    	{comment:'Bla bla bal',date:date.getTime(),like:100}
	    ]
	  }, 
	   { 
	    title: 'Ankara  Latin Night',
	    city: 'Ankara',  
	    type: '3', 
	    price: 350232.3,
	    data:'22-02-2015',
		like:100,
	    comments:
	    [
	    	{comment:'Bla bla bal',date:date.getTime(),like:100}
	    ]
	  }, 
	   { 
	    title: 'Antep  Latin Night',
	    city: 'Antep',  
	    type: '2', 
	    price: 352.220,
	    date:'22-02-2015',
		like:100,
	    comments:
	    [
	    	{comment:'Yorum 1',date:date.getTime(),like:100},
	    	{comment:'Yorum 2',date:date.getTime(),like:100},
	    	{comment:'YOrum 3',date:date.getTime(),like:100}
	    ]
	  }
	];

	return{
		getAllData: function () {
			return data;
		},
		getAllData2: function (id) {
			return data[id];
		}
	}
})
.controller('MainCtrl',function($scope,datalar) {
	$scope.data = datalar.getAllData();
})
.controller('DetayCtrl',function($scope,datalar,$stateParams) {
	$scope.data2 = datalar.getAllData2($stateParams.id);
	$scope.onSubmit= function () {
		 $scope.data2.comments.push({
		 	'comment':$scope.comment,
		 	'like':0
		 })
		 $scope.comment='';
	}
	$scope.likeable=function (item) {
		 item.like+=1;
	}
})
.controller('YeniYaziCtrl',function($scope,datalar) {
	$scope.data = datalar.getAllData();
	$scope.onSubmit= function () {
		 $scope.data.push({
		 	'title':$scope.New.title,
		 	'city':$scope.New.city,
		 	'date':$scope.New.date,
		 	'like':0,
		 	'price':0,
		 	'type':2,
		 	'comments':[]
		 })
 	}
	 
})
<div>
	<h1>{{data2.title}}</h1>
	<p>{{data2.city}} - {{data2.date}}</p>
	<h2>Yorumlar -</h2>
	<ul>
		<li ng-repeat="dat in data2.comments">
			{{dat.comment}} - {{dat.date}} 
			<a ng-click="likeable(dat)"> {{dat.like}}</a>
		</li>
	</ul>
	<form ng-submit="onSubmit()" name="frmComments">
		<input type="text" ng-model="comment" required="">
		<button type="submit" ng-disabled="frmComments.$invalid">Ekle</button>
	</form>
</div>
 <nav class="navbar navbar-default">
  
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li ng-class="{'active': $state.includes('/')}"><a ui-sref="/">Anasayfa <span class="sr-only"> </span></a></li>
        <li ng-class="{'active': $state.includes('iletisim')}"><a  ui-sref="iletisim">iletisim <span class="sr-only"> </span></a></li>
      </ul>
    
     
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<form ng-submit="onSubmit(New)" name="frm">
		<input type="text" ng-model="New.title" required>
		<input type="text" ng-model="New.city" required>
		<input type="text" ng-model="New.date" required>
		<button type="submit" >Ekle</button>
</form>
<h1>İletişim Sayfası</h1>
<div class="content">
<a ui-sref="yeniyazi" class="btn btn-success"> Ekle</a>
		<ul>
		<li ng-repeat="dat in data">
			<h1>{{dat.title}}</h1>
			<p>{{dat.city}} - {{dat.date}}</p>
			<a class="btn btn-primary"  href="#/detay/{{$index}}">Devamı</a>
		</li>
		</ul>
</div>