/angular-curso-lenguaje.markdown

## angular-curso-lenguaje.markdown

      
    Raw
  

              angular-curso-lenguaje.markdown
            
          
    angular-curso-lenguaje

A Pen by welding3000 on CodePen.
License.

  
## index.html

<html ng-app='contenedor' >
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.1/angular.min.js"></script>
<meta charset=utf-8 />
<title>Editor JavaScript online - www.proyectosbds.com</title>
</head>
<body  ng-controller="pera" >


<p class="titulo"> Hola mundo </p>


  <div class = "box1" id = "caja1">
   <p>Dias de compras</p>
</div>

<div class = "box2" id = "caja2">
<p>Todo empiesa con la raiz para tener un fruto durarero.</p>
</div>

<div class = "box3" id = "caja3">
   <p>Frutas</p>
</div>


 <p>La tecnologia esta avanzando exponencial mente.</p>
 <p class="dia"> hoy estamos lunes</p>


<img id = "imagen" src = "" alt = "Sample image" />

<p class="parrafo" title = "Seria el titulo">Este es el parrafo 1 </p>
<p  class="parrafo"  >Este es el parrafo 2 </p>


  <p class="end">aqui puedes agregar nuevo texto</p>


  <!-- agregar angular -->

<select ng-model="select" ng-options="x for x in array">
    <option value="">elige un color</option>
</select>
    <input type="text" ng-model="select" >


  <p>{{nombre}}</p>

 <p  ng-style="estilo">{{ add }} </p>

 <input ng-init="color='aqua'"
  ng-model="color"  value="{{color}}"
  style="background-color:{{color}}"/>


  <p class="mundo"> Agrega un contenido {{ i.texto  }}</p>


  <div>
    <!-- Filtros -->
 <div>
 <div ng-repeat="alumno in alumnos | orderBy:'curso' ">
 <div class="nombre boxColor">{{alumno.nombre}} - {{alumno.telefono}}  </div>
      <div  class="curso boxCurso ">{{alumno.curso}}</div>
  </div>
</div>
  <!-- constructor de un formulario -->

<div class=" wrapper">
    <h2>Añadir contacto</h2>

<div class="contenidoBorde">

  <div class="borde formulario"> Nombre
<input type="text" ng-model="nuevoAlumno.nombre" >
  </div>
 <div class="borde formulario1"> Telefono
    <input type="text" ng-model="nuevoAlumno.telefono" >
  </div>
 <div class="borde formulario2">  Curso
    <input type="text" ng-model="nuevoAlumno.curso" >
   </div>
<button class="center" ng-click="Save()">Guardar</button>
</div>
    </div>


  <hr>

    <h1>filter</h1>
<input ng-model="search.$"  id="search" >

<div ng-repeat="amigo in friends | filter:search">

       <td> {{amigo.name}}  </td>
       <td> {{amigo.phone}} </td>

 </div>


    <h1>  Filtros - Angulars </h1>
    <input type="number" ng-model="price" >
      <p> contar: {{ numero | currency }}</p>
         <p>Price = {{ price | currency }}</p>

  <input type="number" ng-model='add ' />
    <p>Numeros ={{ add | number }} </p>

  <input type="date" ng-model="datos" >

  <p> {{ datos |  date:"mm/dd/yy" }}</p>


  <!--

<select ng-model="myVar">
  <option value="x">Dogs
  <option value="tuts">Tutorials
  <option value="cars">Cars
</select>

<div ng-switch="myVar">
  <div ng-switch-when="x">
     <h1>Dogs</h1>
     <p>Welcome to a world of dogs.</p>
  </div>

</div>


  -->
</div>


</body>
</html>

## script.js
$(document)
  .ready(
    function(){
      $('.titulo')
        .css('background-color','aqua')
        .css('color','black')
        .css('text-align','center')
        .css('padding','8px')
        .css('box-shadow','3px 3px 19px');


});


$(document)
   .ready(
     function() {
       $(".box1, #caja3")
         .css("background-color", "black")
         .css('color','white')
         .css('text-align','center')
         .css('padding','3px');
 });


$(document)
  .ready(function(){
   $('.dia')
     .addClass('dia_laboral');

  });


$(document)
  .ready(
    function() {
   $("#imagen")
     .attr("src","http://luisrodriguez.pe/blog/wp-content/uploads/2015/03/jquery_logo.png");

  });


// añadir co un jqery dentro de un angular

$(document)
  .ready(
    function(){
     $('.mundo')
       .css('color','lime')
       .css('padding','8px')
       .css('text-transform','uppercase')
       .css('text-align','center')
       .css('background','black');

    }

);


// Angular aplicar codigo


angular.module('contenedor',[])
  .controller('pera',

function($scope){

// crear array
$scope.array= ["red", "blue", "green"];
$scope.animales=['dog','cat','leon'];

// Selecionar -
$scope.select="";


// escribir texto
$scope.nombre='aqui tambien podriamos agregar texto como angular ';
$scope.add="agregar estilos "


// agregar estilos
 $scope.estilo = {
   "color" : "white",
   "background-color" : "blue",
   "text-align":"center"
     }
// agregar contenido .

   $scope.i={ texto:'Hola - Mundo', id:'identificacio' };


// lista de nombres

$scope.alumnos=[
 {nombre:'Juan',  curso:'5 curso',    telefono:'0993348'},
 {nombre:'Pablo',   curso:'2 curso',    telefono:'099223283'},
 {nombre:'Cristian',  curso:'5 curso', telefono:'09923448'},
 {nombre:'Escobar', curso:'2 curso', telefono:'099887773'},
 {nombre:'Peres',  curso:'5 curso', telefono:'0992745445'},
 {nombre:'Michael', curso:'2 curso', telefono:'099845456'}
   ];
// scope
  $scope.price = 9.99;
  $scope.numero= 1.21;
  $scope.add= 1212;
  $scope.datos= 3/12/2015 ;


 $scope.friends=[
  {name:'John', phone:'555-1276'},
  {name:'Mary', phone:'800-BIG-MARY'},
  {name:'Mike', phone:'555-4321'},
  {name:'Adam', phone:'555-5678'},
  {name:'Julie', phone:'555-8765'},
  {name:'Juliette', phone:'555-5678'}
 ];

// two- way data binding
  //https://docs.angularjs.org/guide/databinding

$scope.Save=function(){
 $scope.alumnos.push({
   nombre:$scope.nuevoAlumno.nombre,
   telefono:$scope.nuevoAlumno.telefono,
   curso:$scope.nuevoAlumno.curso
  })

}


});


## style.css

.dia_laboral{
  color:black;
  text-align:right;
  padding:8px 22px;
  background:lime;
}


#imagen{
 width:135px;
 height:145px;
  box-shadow:3px 2px 15px;
  float:left;

}


.parrafo{

color:blue;
margin-left:145px;

}

.end{
clear:both;
 position:relative;
 top:15px;
 background:aqua;
 padding:3px;
 text-transform:uppercase;
 border-bottom:4px solid black;
}


.boxColor{
border:1px solid ;
  text-align:center;
  color:black;
}

.boxColor:hover{
background:black;
  color:white;
}
.boxCurso{
background:aqua;

}


.boxCurso:hover{
background:limegreen;
  color:black;
  text-align:center;
}


.contenidoBorde{

 height:180px;
 width:555px;

 background:black;
 border:1px solid aqua;
 border-radius:18px;
 box-shadow:10px;
position:relative;
  left:145px;
  opacity:0.888;
}

.borde{
border:1px solid red;
border-radius:13px;
position:relative;
left:85px;
 top:12px;
}

.formulario,.formulario2{
  width:350px;
  padding:8px;
  background:aqua;
  opacity:0.8;
}
.formulario1{
  width:350px;
  padding:8px;
  background:lime;
}


.center{

position:relative;
top:25px;
left:220px;
}

	<html ng-app='contenedor' >
	<head>
	<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.1/angular.min.js"></script>
	<meta charset=utf-8 />
	<title>Editor JavaScript online - www.proyectosbds.com</title>
	</head>
	<body ng-controller="pera" >



	<p class="titulo"> Hola mundo </p>


	<div class = "box1" id = "caja1">
	<p>Dias de compras</p>
	</div>

	<div class = "box2" id = "caja2">
	<p>Todo empiesa con la raiz para tener un fruto durarero.</p>
	</div>

	<div class = "box3" id = "caja3">
	<p>Frutas</p>
	</div>


	<p>La tecnologia esta avanzando exponencial mente.</p>
	<p class="dia"> hoy estamos lunes</p>


	<img id = "imagen" src = "" alt = "Sample image" />

	<p class="parrafo" title = "Seria el titulo">Este es el parrafo 1 </p>
	<p class="parrafo" >Este es el parrafo 2 </p>


	<p class="end">aqui puedes agregar nuevo texto</p>


	<!-- agregar angular -->

	<select ng-model="select" ng-options="x for x in array">
	<option value="">elige un color</option>
	</select>
	<input type="text" ng-model="select" >



	<p>{{nombre}}</p>

	<p ng-style="estilo">{{ add }} </p>

	<input ng-init="color='aqua'"
	ng-model="color" value="{{color}}"
	style="background-color:{{color}}"/>



	<p class="mundo"> Agrega un contenido {{ i.texto }}</p>




	<div>
	<!-- Filtros -->
	<div>
	<div ng-repeat="alumno in alumnos \| orderBy:'curso' ">
	<div class="nombre boxColor">{{alumno.nombre}} - {{alumno.telefono}} </div>
	<div class="curso boxCurso ">{{alumno.curso}}</div>
	</div>
	</div>
	<!-- constructor de un formulario -->

	<div class=" wrapper">
	<h2>Añadir contacto</h2>

	<div class="contenidoBorde">

	<div class="borde formulario"> Nombre
	<input type="text" ng-model="nuevoAlumno.nombre" >
	</div>
	<div class="borde formulario1"> Telefono
	<input type="text" ng-model="nuevoAlumno.telefono" >
	</div>
	<div class="borde formulario2"> Curso
	<input type="text" ng-model="nuevoAlumno.curso" >
	</div>
	<button class="center" ng-click="Save()">Guardar</button>
	</div>
	</div>


	<hr>

	<h1>filter</h1>
	<input ng-model="search.$" id="search" >

	<div ng-repeat="amigo in friends \| filter:search">

	<td> {{amigo.name}} </td>
	<td> {{amigo.phone}} </td>

	</div>


	<h1> Filtros - Angulars </h1>
	<input type="number" ng-model="price" >
	<p> contar: {{ numero \| currency }}</p>
	<p>Price = {{ price \| currency }}</p>

	<input type="number" ng-model='add ' />
	<p>Numeros ={{ add \| number }} </p>

	<input type="date" ng-model="datos" >

	<p> {{ datos \| date:"mm/dd/yy" }}</p>





	<!--

	<select ng-model="myVar">
	<option value="x">Dogs
	<option value="tuts">Tutorials
	<option value="cars">Cars
	</select>

	<div ng-switch="myVar">
	<div ng-switch-when="x">
	<h1>Dogs</h1>
	<p>Welcome to a world of dogs.</p>
	</div>

	</div>


	-->
	</div>












	</body>
	</html>
	$(document)
	.ready(
	function(){
	$('.titulo')
	.css('background-color','aqua')
	.css('color','black')
	.css('text-align','center')
	.css('padding','8px')
	.css('box-shadow','3px 3px 19px');


	});


	$(document)
	.ready(
	function() {
	$(".box1, #caja3")
	.css("background-color", "black")
	.css('color','white')
	.css('text-align','center')
	.css('padding','3px');
	});


	$(document)
	.ready(function(){
	$('.dia')
	.addClass('dia_laboral');

	});


	$(document)
	.ready(
	function() {
	$("#imagen")
	.attr("src","http://luisrodriguez.pe/blog/wp-content/uploads/2015/03/jquery_logo.png");

	});




	// añadir co un jqery dentro de un angular

	$(document)
	.ready(
	function(){
	$('.mundo')
	.css('color','lime')
	.css('padding','8px')
	.css('text-transform','uppercase')
	.css('text-align','center')
	.css('background','black');

	}

	);



	// Angular aplicar codigo


	angular.module('contenedor',[])
	.controller('pera',

	function($scope){

	// crear array
	$scope.array= ["red", "blue", "green"];
	$scope.animales=['dog','cat','leon'];

	// Selecionar -
	$scope.select="";


	// escribir texto
	$scope.nombre='aqui tambien podriamos agregar texto como angular ';
	$scope.add="agregar estilos "


	// agregar estilos
	$scope.estilo = {
	"color" : "white",
	"background-color" : "blue",
	"text-align":"center"
	}
	// agregar contenido .

	$scope.i={ texto:'Hola - Mundo', id:'identificacio' };



	// lista de nombres

	$scope.alumnos=[
	{nombre:'Juan', curso:'5 curso', telefono:'0993348'},
	{nombre:'Pablo', curso:'2 curso', telefono:'099223283'},
	{nombre:'Cristian', curso:'5 curso', telefono:'09923448'},
	{nombre:'Escobar', curso:'2 curso', telefono:'099887773'},
	{nombre:'Peres', curso:'5 curso', telefono:'0992745445'},
	{nombre:'Michael', curso:'2 curso', telefono:'099845456'}
	];
	// scope
	$scope.price = 9.99;
	$scope.numero= 1.21;
	$scope.add= 1212;
	$scope.datos= 3/12/2015 ;


	$scope.friends=[
	{name:'John', phone:'555-1276'},
	{name:'Mary', phone:'800-BIG-MARY'},
	{name:'Mike', phone:'555-4321'},
	{name:'Adam', phone:'555-5678'},
	{name:'Julie', phone:'555-8765'},
	{name:'Juliette', phone:'555-5678'}
	];

	// two- way data binding
	//https://docs.angularjs.org/guide/databinding

	$scope.Save=function(){
	$scope.alumnos.push({
	nombre:$scope.nuevoAlumno.nombre,
	telefono:$scope.nuevoAlumno.telefono,
	curso:$scope.nuevoAlumno.curso
	})

	}



	});

	.dia_laboral{
	color:black;
	text-align:right;
	padding:8px 22px;
	background:lime;
	}



	#imagen{
	width:135px;
	height:145px;
	box-shadow:3px 2px 15px;
	float:left;

	}


	.parrafo{

	color:blue;
	margin-left:145px;

	}

	.end{
	clear:both;
	position:relative;
	top:15px;
	background:aqua;
	padding:3px;
	text-transform:uppercase;
	border-bottom:4px solid black;
	}


	.boxColor{
	border:1px solid ;
	text-align:center;
	color:black;
	}

	.boxColor:hover{
	background:black;
	color:white;
	}
	.boxCurso{
	background:aqua;

	}


	.boxCurso:hover{
	background:limegreen;
	color:black;
	text-align:center;
	}


	.contenidoBorde{

	height:180px;
	width:555px;

	background:black;
	border:1px solid aqua;
	border-radius:18px;
	box-shadow:10px;
	position:relative;
	left:145px;
	opacity:0.888;
	}

	.borde{
	border:1px solid red;
	border-radius:13px;
	position:relative;
	left:85px;
	top:12px;
	}

	.formulario,.formulario2{
	width:350px;
	padding:8px;
	background:aqua;
	opacity:0.8;
	}
	.formulario1{
	width:350px;
	padding:8px;
	background:lime;
	}



	.center{

	position:relative;
	top:25px;
	left:220px;
	}