Bernardstanislas
3/5/2015 - 7:28 PM

Les biatchs de l'espace

Les biatchs de l'espace

style.css
content_copyfile_download
body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }
server.js
content_copyfile_download
// Modules
var express = require('express');
var fs = require('fs');

// Server
var app = express();
app.use(express.static(__dirname + '/public'));

// Routing
app.get('/pi', getPi);

app.get('/capitaines', getCapitaines);



function getPi(req, res) {
	var pi = 3.14159265359;
	res.json({
		value: pi
	});
}

function getCapitaines(req, res) {
	var capitaines = [
		{
			nom: 'Haddock',
			age: 48
		},
		{
			nom: 'Popeye',
			age: 32
		},
		{
			nom: 'Obvious',
			age: 10
		}
	];

	res.json(capitaines);
}


// Run the server
var port = 3000;
app.listen(3000);
console.log('Just started the server on port ' + port);
package.json
content_copyfile_download
{
  "name": "Api",
  "version": "0.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "~4.12.2"
  }
}
index.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
	<title>Les biatchs de l'espace</title>

	<!-- Compiled and minified CSS -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css">

	<link rel="stylesheet" type="text/css" href="css/style.css">

	<!-- Compiled and minified JavaScript -->
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

	<script type="text/javascript" src="js/app.js"></script>

</head>
<body>
	<header>
		<nav>
			<div class="nav-wrapper">
				<div class="container">
					<a href="#" class="brand-logo">Les biatchs</a>
				</div>
			</div>
		</nav>
	</header>

	<br>

	<main ng-app="biatch" ng-controller="MainController">
		<div class="container">
			<div class="row">
				<div class="col s12">La valeur de pi d'après le serveur : {{pi}}</div>
			</div>
			<div class="row">
				<div class="col s6" ng-repeat="capitaine in capitaines">
					<div class="card blue-grey darken-1">
						<div class="card-content white-text">
							<span class="card-title">{{capitaine.nom}}</span>
							<p>Je suis le capitaine {{capitaine.nom}}, j'ai actuellement {{capitaine.age}} ans. J'aime les chips.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</main>
	

	<footer class="page-footer">
		<div class="container">
			<div class="row">
				<div class="col l6 s12">
					<h5 class="white-text">Footer de ouf</h5>
					<p class="grey-text text-lighten-4">Contenu de footer de ouf !</p>
				</div>
				<div class="col l4 offset-l2 s12">
					<h5 class="white-text">Links</h5>
					<ul>
						<li><a class="grey-text text-lighten-3" href="#!">Lien 1</a></li>
						<li><a class="grey-text text-lighten-3" href="#!">Lien 2</a></li>
						<li><a class="grey-text text-lighten-3" href="#!">Lien 3</a></li>
						<li><a class="grey-text text-lighten-3" href="#!">Lien 4</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="footer-copyright">
			<div class="container">
				© 2014 Copyright Les Biatchs de l'espace
			</div>
		</div>
	</footer>
</body>
</html>
app.js
content_copyfile_download
var app = angular.module('biatch', []);

app.controller('MainController', ['$scope', 'BiatchService', function($scope, biatchService) {
	$scope.pi = 'Lol en attente du serveur';
	biatchService.getPi(function(result) {
		$scope.pi = result.value;
	});
	biatchService.getCapitaines(function(result) {
		$scope.capitaines = result;
	});

}]);

app.factory('BiatchService', ['$http', function($http) {
	function getPi(callback) {
		$http.get('/pi')
			.success(callback);
	}

	function getCapitaines(callback) {
		$http.get('/capitaines')
			.success(callback);
	}

	return {
		getPi: getPi,
		getCapitaines: getCapitaines
	}
}]);
README
content_copyfile_download
Structure de l'appli :

-- server.js
-- package.json
-- public/
---- index.html
---- js/
------ app.js
---- css/
------ style.css