Autor: Juan Pablo Fuentes

Formador de programación y bases de datos

Layout semántico

html

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="divs.css">

</head>

<body>

<header><h1>El mundo de los perros</h1>
</header>
<main>
<aside>
<ul>
<li><a href="#">Galería</a></li>
<li><a href="#">Artículos</a></li>
<li><a href="#">Tienda</a></li>
<!--
<li><a href="#">Contacto</a></li>
-->
</aside>
<section><br/>
<h1>Bienvenido a la página sobre el mejor amigo del hombre</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</section>
</main>
<footer >(C) Netmind 2017</footer>
</body>

</html>

css

header{
 background-color:#173e43;
 height:200px;
 padding:20px;
}
header h1{
 color:rgba(255,0,0,.6);
 font-size:80px;
}
aside{
 background-color:#fae596 ;
 height:600px;
 width:20%;
 float:right;
}
section{
 background-color:#dddfd4;
 height:600px;
}
footer{
 background-color:#3fb0ac;
 height:100px;
}

Mini layout

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>

<body>

<div style=”background-color:blue;height:200px”>título
</div>
<div>
<div style=”background-color:orange;height:600px;width:20%;float:right”>Barra</div>
<div style=”background-color:#BBBBBB;height:600px”>Contenido</div>
</div>
<div style=”background-color:blue;height:100px”>Pie</div>
</body>

</html>

Ejemplo muy simple angular

core.js

var actores = angular.module('actores', []);

function mainController($scope, $http) {
	$scope.formData = {};

	// when landing on the page, get all todos and show them
	$http.get('http://localhost/api.php/actor/')
		.success(function(data) {
			$scope.actores = data;
		})
		.error(function(data) {
			console.log('Error: ' + data);
		});


}

index.html

<!doctype html><!doctype html>
<!-- ASSIGN OUR ANGULAR MODULE --><html ng-app="actores"><head> <!-- META --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->
 <title>Angular actor App</title>
 <!-- SCROLLS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- load bootstrap -->
 <!-- SPELLS -->
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script><!-- load angular --> <script src="core.js"></script>
</head>
<!-- SET THE CONTROLLER AND GET ALL actores WITH INITIALIZE FUNCTION --><body ng-controller="mainController"> 
<div class="container">
 <!-- HEADER AND actor COUNT --> 
<div class="jumbotron text-center"> 
<h1>Actores <span class="label label-info">{{ actores.length }}</span></h1> </div>
 <!-- actor LIST --> 
<div id="actor-list" class="row">
 <div class="col-sm-4 col-sm-offset-4">
 <!-- LOOP OVER THE actores IN $scope.actores --> 
<div class="checkbox" ng-repeat="actor in actores"> 
<label> {{ actor.first_name }} {{ actor.last_name }} </label> </div>
 </div> 
</div>
 </div>
</body></html>

Consumir servicios rest con angular

Algunas páginas muy explicativas:

https://carlosazaustre.es/blog/tutorial-ejemplo-de-aplicacion-web-con-angular-js-y-api-rest-con-node/

https://www.cursoangularjs.es/

https://www.toptal.com/angular-js/un-tutorial-paso-a-paso-para-tu-primera-aplicaci%C3%B3n-angularjs/es