Angularapp1 (4 de 9): index.html

Éste es el código completo

>>>>>
<!doctype html>
<html ng-app=”angularapp1″>
<head>
<meta charset=”utf-8″>
<title>Test Angular</title>
<link rel=”stylesheet” href=”css/styles.css” />

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.js”></script>

<!– model –>
<script src=”js/model/Item.js”></script>
<script src=”js/model/Category.js”></script>
<script src=”js/model/OrderItem.js”></script>
<script src=”js/model/Order.js”></script>
<script src=”js/model/Model.js”></script>

<script src=”js/app.js”></script>
<script src=”home/home.js”></script>
<script src=”category/category.js”></script>
<script src=”summary/summary.js”></script>

</head>
<body ng-controller=”MyAppController”>

<div>Header</div>
<button ng-click=”go(‘/home’)”>Home</button>
<div>Cart summary:</div>
<div>Number of items: {{model.order.getNumberOfItems()}}</div>
<div>Total cost: {{model.order.getTotalCost()}}</div>

<div ng-view></div>

<div>Footer</div>

</body>
</html>
>>>>>

Se incluye tanto el js de angular como el módulo angular-route.js, que es independiente de angular y se necesita para hacer una Single Page App con varias secciones.

Después incluyo cada objeto del model, el app.js y cada controlador.

En el html he añadido una especie de header, botón para ir a la home, resumen del carrito y footer, que aparecerá en todas las páginas o secciones.

Destaco en el html estas directivas:

<html ng-app=”angularapp1″>

Aquí decimos como que estoy en una app que se llamará angularapp1. Veremos posteriormente que a esto se hace referencia en el app.js

<body ng-controller=”MyAppController”>>

Aquí decimos que el controlador general de la app será el MyAppController. Veremos posteriormente que a esto se hace referencia en el app.js.

También veremos posteriormente que cada sección tendrá su propio controlador particular.

<div ng-view></div>

Dentro de este div es donde AngularJs meterá el html de cada sección, el cual se traerá por ajax.