JSFiddle - React, Tailwind, and code Playground

by femfoyou

HTML

<script src="home.html"></script>
<script src="acerca.html"></script>
<script src="lista.html"></script>
<body ng-app="angularRoutingApp" ng-controller='mainController'>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#/">

     <h2>Angular Routing</h2>
      </a>
    </div>
    
<div class="navbar-header navbar-right">
    <a href="#/" type="button" class="btn btn-default navbar-btn">
      <span class="glyphicon glyphicon-home"></span> 
      INICIO
    </a>
    <a href="#/acerca" type="button" class="btn navbar-btn">
      <span class="glyphicon glyphicon-shopping-cart"></span> 
      ACERCA
    </a>
    <a href="#/lista" type="button" class="btn navbar-btn">
      <span class="glyphicon glyphicon-shopping-cart"></span> 
      LISTA
    </a>
</div>

  </div>
</nav>

	<div id="main" class="container">
	<!-- Aquí inyectamos las vistas -->
		<div ng-view></div>
	</div>
</body>

CSS

.navbar {
    background-color: white;
    padding: 15px;
}
.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
margin-left: 0;
}
.navbar-brand {
    padding: 0;
}
.done-true {
    text-decoration: line-through;
    color: grey;
}

JavaScript

// Creación del módulo
var angularRoutingApp = angular.module('angularRoutingApp', ['ngRoute']);

// Configuración de las rutas
angularRoutingApp.config(function($routeProvider) {

//    for (i=1; i<=1200; i++) {
	$routeProvider
		
        .when('/', {
			templateUrl	: 'home.html',
			controller 	: 'mainController'
		})
		.when('/acerca', {
			templateUrl : 'acerca.html',
			controller 	: 'aboutController'
		})
		.when('/lista', {
			templateUrl : 'lista.html',
			controller 	: 'contactController'
		})
        
//        .when('/page/:pageId', {
//			templateUrl: 'paglista/home' + $routeParams.pageId + '.html',
//			controller: 'mainController'
//		})
    
    
//        .when('/lista6'+i, {
//                templateUrl: 'paglista/home'+i+'.html',
//        })
    
        
//        .when('/lista0/:listaId', {
//            templateUrl: '/lista'+$routeParams.listaId+'.html',
//            controller: 'RouteController'
//        })
    
/* paginas externas */
    
        .when('/page/0', {
			templateUrl : 'paglista/home0.html',
		})
//        .when('/lista1', {
//			templateUrl : 'paglista/home1.html',
//		})
//        .when('/lista2', {
//			templateUrl : 'paglista/home2.html',
//		})
//        .when('/lista3', {
//			templateUrl : 'paglista/home3.html',
//		})
//        .when('/lista4', {
//			templateUrl : 'paglista/home4.html',
//		})
//        .when('/lista5', {
//			templateUrl : 'paglista/home5.html',
//		})
        .when('/page/6', {
			templateUrl : 'ext1.html',
		})
    
    
		.otherwise({
			redirectTo: '/'
		});

//    }
});


angularRoutingApp.controller('mainController', function($scope, $routeParams) {
    
    // tamaño fuente controlador

    $scope.fuente = {
      fontSize : 24,
      style:{},
    };                
    $scope.estiloFont = function(fuente){
      fuente.style = {'font-size':fuente.fontSize+'px'}
    };
    $scope.style = function(fuente) {
      return fuente.style;
    }
    
    
    $scope.ruta = {
        pageId:...