<!DOCTYPE html>
<!--cargamos nuestro modulo en la etiqueta html con ng-app-->
<html lang="es" ng-app="app">
<head>
<meta charset="UTF-8" />
<title>Combinando Laravel 4 y AngularJS</title>
<link href="css/normalize.css" media="screen" rel="stylesheet" type="text/css">
<link href="css/foundation.min.css" media="screen" rel="stylesheet" type="text/css">
</head>
<body>
<!--creamos el div con la directiva ng-view, aquí será donde
carguen todas las vistas-->
<div class="row" ng-view></div>
<div class="row">
<div class="large-12 columns">
<label>Filtra tu búsqueda: </label>
<input type="text" ng-model="buscador" />
</div>
<div class="large-12 columns">
<label>Establece un orden: </label>
<select ng-model="tipoOrden">
<option value="">Ordena por Id</option>
<option value="id">Ascendente</option>
<option value="-id">Descendente</option>
</select>
</div>
</div>
<div class="row">
<h1 class="subheader">Combinando Laravel 4 y AngularJS</h1>
<ul>
<li ng-repeat="data in tareas|filter:buscador|orderBy:tipoOrden" class="panel callout radius">
<p>Id: {{ data.texto }} </p>
<p>Título: {{ data.hecho }}</p>
</li>
</ul>
</div>
<!--<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>-->
<script type='text/javascript' src='js/angular.js'></script>
<script type='text/javascript' src='js/angular-route.min.js'></script>
<script type='text/javascript' src='js/app.js'></script>
<script type='text/javascript' src='js/controllers.js'></script>
</body>
</html>
var app = angular.module("app", ['ngRoute']);
app.config(function($routeProvider)
{
$routeProvider.when("/home",
{
controller: "homeController",
templateUrl: "index.html"
})
})
/* Styles go here */
app.controller("homeController", function($scope,$http)
{
$scope.tareas = [{texto:'Superheroe de angular', hecho: true},
{texto:'Primera app en angular', hecho: false}];
})