JSFiddle - React, Tailwind, and code Playground

by David Soto

HTML

<div ng-app="MiBlog">
    <h1>Blog</h1>
    <div ng-view=""></div>
<script type="text/ng-template" id="lista.html">
     <h3>Articulos</h3>
      <div class="well span3" ng-repeat="articulo in articulos">
          <h4><a href="#/detalle/{{articulo.id}}">{{articulo.titulo}}</a></h4>
          <p>{{articulo.fecha}}</p>
      </div>
  </script>
<script type="text/ng-template" id="detalle.html">
    <a href="#/articulos">Regresar</a>
     <h3>{{articuloactual.titulo}}</h3>
    <h5>{{articuloactual.fecha}}</h5>
    <p>{{articuloactual.texto}}</p>
</script>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <link rel="stylesheet" href="http://angularjs.org/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <style>
html img{ width: 200px; height: 150px; }

JavaScript

var MiBlog = angular.module("MiBlog", []);

MiBlog.config(function($routeProvider) {
    $routeProvider.
      when('/articulos', 
           {controller: "ArticulosController", templateUrl:'lista.html'}).
    when('/detalle/:articulosid', 
           {controller: "DetalleController", templateUrl:'detalle.html'}).
      otherwise({redirectTo:'/articulos'});
  });

MiBlog.controller(
    'ArticulosController', 
    ['$scope','ArticulosService',
function ($scope, artService) {
    
    artService.listar(function(data){
        $scope.articulos = data;
    });
}]);

MiBlog.controller(
    'DetalleController', 
    ['$scope','ArticulosService','$routeParams',
function ($scope, artService,$routeParams) {
   articuloid = $routeParams.articulosid;
    
    articulos = artService.detalle(articuloid);   
    $scope.articuloactual = articulos;
}]);

MiBlog.factory('ArticulosService', ['$http', function($http){
    var servicio = {};
    
    var datos = [{"id": "1", "titulo": "Articulo 1", "fecha": "12/01/2014", "texto": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nunc tellus, sagittis sed volutpat quis, lacinia et orci. Suspendisse cursus fringilla enim sit amet tempus. Sed viverra velit in felis mollis tincidunt. Proin elementum felis tristique porta ullamcorper. Cras a odio euismod, feugiat risus eget, aliquam sem. Nam in elementum erat. Maecenas ante est, egestas non nulla at, dictum mollis orci. In vulputate turpis non mi viverra, quis suscipit nisl facilisis. Etiam sapien eros, pellentesque egestas gravida posuere, fringilla eu eros. Pellentesque posuere, est ac hendrerit condimentum, ligula odio dictum nulla, ut faucibus magna eros sed mauris. Sed cursus tortor et luctus ultricies."},
    {"id": "2", "titulo": "Articulo 2", "fecha": "15/01/2014", "texto": "Donec gravida auctor odio sed sollicitudin. Nulla porttitor pulvinar malesuada. Cras viverra sem ut sapien commodo venenatis in sed magna. Pellentesque quis nibh a ante aliquet hendrerit at eget...