6. INSTALAR ANGULAR - mavira21/CREAR-WEB-CON-PROCESSWIRE GitHub Wiki

1.- Editar _init.php

Creamos el archivo _init.php
Para ello vamos a la carpeta miweb -> btn dr.-> new file ->escribimos _init.php -> ctr + S-> Guardar
Pegamos este código:

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.min.js"></script>

    <script>var app=angular.module('myApp',['ngRoute'])</script>
  </head>
  <body ng-app="myApp">

Esto sería el angular básico, pero una vez instalado el módulo JSON y HANNA CODE (en PW), modificadas las rutas a los archivos styles y scripts, debería quedar así:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>miweb</title>
    <link href="<?php echo $config->urls->templates?>styles/bootstrap.min.css" rel="stylesheet">
    <link href="<?php echo $config->urls->templates?>styles/font-awesome.min.css" rel="stylesheet">
    <link href="<?php echo $config->urls->templates?>styles/prettyPhoto.css" rel="stylesheet">
    <link href="<?php echo $config->urls->templates?>styles/animate.css" rel="stylesheet">
    <link href="<?php echo $config->urls->templates?>styles/main.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->       
    <link rel="shortcut icon" href="<?php echo $config->urls->templates?>images/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?php echo $config->urls->templates?>images/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php echo $config->urls->templates?>images/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php echo $config->urls->templates?>images/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="<?php echo $config->urls->templates?>images/ico/apple-touch-icon-57-precomposed.png">

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

    <script>
        var app=angular.module('myApp',['ngRoute','factories']);
        app.filter('unsafe', function($sce) { 
            return function(val) { return $sce.trustAsHtml(val); }; });
     
        app.filter( 'portrait', function () {
            return function( text ) {
              var n = text.split('/');
              var r = n.pop();
              return n.join( '/' )+'/portrait_'+r;
            };
          });      
    </script>
    
    <script src="<?php echo $config->urls->templates?>scripts/factories.js"></script>  
    <script>
	  app.controller('BodyCtrl',function($scope, pw){
	      $scope.page=<?php echo $page->toJSON() ?>;
	      console.log($scope.page);
	  });
    </script>

    </head>

<body ng-app="myApp"> 
   <header id="header">

Ver gist

Y a partir de aquí pegaríamos el html de la plantilla elegida que corresponda al header
Para ello vamos a el archivo index.html y copiamos y modificamos el header a nuestro gusto.

2.- Editar home.php

Creamos el archivo home.php del mismo modo.

Pegamos este código:

<script>
  app.controller('HomeCtrl',function($scope){
      $scope.page=<?php echo $page->toJSON() ?>;
  });
</script>

<div ng-controller="HomeCtrl">
	<h1>hi there {{page.title}}</h1>
</div>

Ver gist

3.- Editar _main.php

Y por último creamos el archivo _main.php

Pegamos este código:

  </body>
</html>

Esto sería el angular básico, pero una vez modificadas las rutas a los archivos scripts, debería quedar así:

  <footer>

 </footer><!--/#footer-->

    <script src="<?php echo $config->urls->templates?>scripts/jquery.js"></script>
    <script src="<?php echo $config->urls->templates?>scripts/bootstrap.min.js"></script>
    <script src="<?php echo $config->urls->templates?>scripts/jquery.prettyPhoto.js"></script>
    <script src="<?php echo $config->urls->templates?>scripts/jquery.isotope.min.js"></script>
    <script src="<?php echo $config->urls->templates?>scripts/main.js"></script>
    <script src="<?php echo $config->urls->templates?>scripts/wow.min.js"></script>

</body>
</html>

Ver gist

Entre las etiquetas

incluiríamos el footer de la plantilla elegida.

4.- Logo y fuentes

Si tenemos un logo o fuentes debemos modificar las rutas respectivas

href="<?php echo $config->urls->root?>"><img src="<?php echo $config->urls->templates?>images/logo.png" alt="logo"></a>

5.- Instalar todos los ficheros CSS y JS necesarios para esta plantilla

  • Arrastramos todos los css a nuestra carpeta de styles y los js a scripts ( por SFTP hacer upload folder)
  • Hacer lo mismo con font e images
  • En todas las lineas, tanto de css como de js sustituiremos de la siguiente forma
    # donde ponga por ejemplo: ccs/bootstrap.min.css  =>  
    <?php echo $config->urls->templates?>css/bootstrap.min.css  
    #

6.- Páginas

Ahora podemos ya empezar a crear cada página de nuestra web.
La página principal es home.php (inicio, portada)

Si no tenemos el módulo Pages2JSON instalado en el administrador no podremos ver nada por el navegador aunque hayamos configurado los archivos anteriores.

Editar en cada plantilla el JSON

En cada plantilla (pe. contacto.php) debemos editarla y en la última pestaña (Pages2JSON) indicarle que campos serán visibles

MÁS INFO

⚠️ **GitHub.com Fallback** ⚠️