The Digital Mike

Cómo crear bloques en AngularJs

The Digital Mike

|

|

, , , , ,

¿Tiene problemas con la creación de bloques para su sitio usando angular v1.x.x? Es algo con lo que lucho muchos días, pero hay una forma sencilla de solucionar el problema. En este artículo, aprenderá exactamente lo fácil que es como crear bloques en angularjs.

Buscando dividir el contenido en mi página web, estaba buscando en línea la forma de lograrlo. Y dado que es un poco difícil encontrar una respuesta correcta allá afuera, publicaré la solución para ti aquí en este blog. La solución a su problema es bastante simple y no complicada. Todo esto requiere que se agreguen algunas piezas de código más simples a su página.

El primer paso para resolver el como crear bloques en angularjs es sentar las bases de todo lo demás. En esta sección, deberá verificar la estructura de la carpeta de su proyecto. Dado que está utilizando Angular v1.x.x, la estructura que necesita será algo muy simple.

En la carpeta base necesita tener un archivo app.module.js, y dado que agregará diferentes bloques, debe agregar una carpeta para almacenar esos bloques, llamo a mi carpeta «bloques de página». En el interior se comenzará a agregar una nueva carpeta con el nombre del bloque, en este caso, como es un ejemplo simple de un sitio web, se agregará una carpeta denominada «encabezados» que contiene la carpeta del bloque con tres archivos: un archivo de módulo, un componente archivo y un archivo de plantilla. Con esto, estamos listos para comenzar y su estructura de archivos tendrá este formulario.

Esta imagen te permite ver cómo se ve la estructura.

Las diferentes paginas

A continuación, deberá agregar al archivo «app.module.js» el siguiente código.

«app.module.js«

angular.module('myApp',[
   'headerOne'
]);

Y en su archivo «index.html» agregue a la etiqueta «HTML» este código: ng-app = «myApp» Su sitio está listo para recibir código angular … recuerde que necesita agregar el script angular a su sitio. El resultado es este:

«index.html«

<!doctype html>
<html lang="en" ng-app="myApp">
  <head>
   <title>Title</title>
  <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <!-- angular -->
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
   <!-- pagescripts -->
   <script src="app.module.js"></script>
   <script src="pageblocks/headers/header-one/header-one.module.js"></script>
   <script src="pageblocks/headers/header-one/header-one.component.js"></script>
</head>
<body>
  <!-- Header -->
  <header-one></header-one>
  <!-- jQuery first, then Popper.js, then Bootstrap JS goes here -->
  <!-- Optional JavaScript goes here -->
</body>
</html>

El siguiente paso es agregar el contenido a su bloque de encabezado, así que abra los tres archivos que crea dentro de la carpeta del bloque de encabezado y comience a agregar esto:

«header-one.module.js«

app.module('headerOne', []);
"header-one.component.js"
app.module('headerOne').component('headerOne', {
   templateUrl: 'pageblocks/headers/header-one/header-one.template.html'
});

«header-one.template.html«

<!-- info sample -->
<div class="jumbotron">
  <div class="text-center">
    <h2>Title</h2>
    <h5>Subtitle</h5>
  </div>
  <form class="form-group my-5 pr-5 pl-5 text-center">
    <div class="row">
      <div class="col-sm-10 mb-3">
        <select class="form-control">
          <option>Number One</option>
          <option>Number Two</option>
          <option>Number Three</option>
        </select>
      </div>
      <div class="col-sm-2">
        <button type="submit" class="btn btn-primary">Start</button>
      </div>
    </div>
  </form>
</div>

Como puede ver aquí, estoy usando código de arranque para diseñar mi página, por lo que debemos agregar los scripts de requisitos al archivo index.html. Agregue esto a index.html, «estilo en el encabezado y script en la parte inferior de su página antes de la etiqueta de cierre </body> «.

«Adding bootstrap to index.html»

<head>
  ...
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"/>
  <!--angulajs -->
  ...
</head>
<body>
  <header-one></header-one>
  ...
  <!--jQuery first, then Popper.js, then Bootstrap JS goes here-->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</body>

Al final de este instructivo, terminará con algo como esto:

Structure

Y El resultado final es este:

Ahora que tiene todo en su lugar y está listo para comenzar a hacer su sitio web.

Disfruta 8-D