Le mostraré el proceso de crear casi un sitio web completo con una nueva biblioteca: AngularJS. Sin embargo, me gustaría presentarle a AngularJS primero. AngularJS es un marco magnífico de Google para crear aplicaciones web. Este marco le permite extender la sintaxis de HTML para expresar los componentes de su aplicación de manera clara y sucinta, y le permite usar HTML estándar como su lenguaje de plantilla principal. Además, sincroniza automáticamente los datos de su interfaz de usuario con sus objetos JS a través del enlace de datos bidireccional.

Si alguna vez has trabajado con jQuery, lo primero que debes entender sobre Angular es que este es un instrumento completamente diferente. jQuery es una biblioteca, pero AngularJS es framework. Cuando su código funciona con la biblioteca, decide cuándo llamar a una función u operador en particular. En el caso del marco, implementa controladores de eventos, y el marco decide en qué momento necesita invocarlos.

El uso de este marco nos permite distinguir claramente entre plantillas (DOM), modelos y funcionalidad (en controladores). Volvamos a nuestra plantilla, eche un vistazo a nuestro resultado:

• ¿Qué lenguajes de programación hay en tu cola para "estudiar"?
• ¿Cuánto tiempo lleva aprender el desarrollo y qué debo aprender?
• ¿Existe un buen libro de desarrollo web completo?
• ¿Qué significa escalar un sitio web?
• ¿Cuáles son las desventajas de tener un solo subproceso para un lenguaje o marco? ¿Por qué Node y JavaScript todavía están diseñados para ser de un solo subproceso?

Descripción

Esta plantilla es perfecta para sitios de negocios. Consiste en varias páginas estáticas: proyectos, privacidad y sobre páginas. Cada producto tiene su propia página. También hay un formulario de contacto para la comunicación. Eso es todo lo que se necesita para cualquier sitio web pequeño. Además, también es una plantilla receptiva, por lo que se ve bien en cualquier dispositivo.

Espero que les haya gustado la demostración, así que si están listos, comencemos a hacer esta aplicación. Prepare una nueva carpeta para nuestro proyecto y luego cree nuevas carpetas en este directorio:

• css – para archivos de hojas de estilo
• imágenes – para archivos de imagen
• js: para archivos JavaScript (bibliotecas, modelos y controladores)
• páginas – para páginas internas

Etapa 1. HTML

El diseño principal consta de cuatro secciones principales: un encabezado con navegación, un formulario oculto ‘contáctenos’, una sección de contenido principal y un pie de página. Primero tenemos que preparar un encabezado adecuado:

index.html

Como puede ver, es un encabezado ordinario. Ahora, el encabezado con la navegación:

Es un logotipo ordinario, y el menú es el menú habitual de UL-LI. La siguiente sección es más interesante: el formulario ‘Contáctenos’:

Contáctenos

enviar mensaje

Su mensaje ha sido enviado, gracias.

Finalmente, el último elemento clave es la sección de contenido principal:

¿Has notado las numerosas directivas ‘ng-‘? Todas estas directivas nos permiten realizar varias acciones directamente en el DOM, por ejemplo:

• ng-class: ngClass le permite establecer clases CSS en un elemento HTML dinámicamente al vincular una expresión que representa todas las clases que se agregarán.
• ng-click: ngClick le permite especificar un comportamiento personalizado cuando se hace clic en el elemento.
• ng-hide: la directiva ngHide muestra y oculta el elemento HTML dado condicionalmente en función de la expresión proporcionada al atributo ngHide.
• ng-include: busca, compila e incluye un fragmento HTML externo.
• ng-model: es una directiva que le dice a Angular que realice un enlace de datos bidireccional.
• ng-show: la directiva ngShow muestra y oculta el elemento HTML dado condicionalmente en función de la expresión proporcionada al atributo ngShow.
• ng-submit: habilita el enlace de expresiones angulares a eventos que se envían.

Etapa 2. CSS

En esta sección bastante grande, puede encontrar todos los estilos utilizados:

css / style.css

/* Configuración general */
html {
altura mínima: 100%;
overflow-x: oculto;
desbordamiento-y: desplazamiento;
posición: relativa;
ancho: 100%;
}
cuerpo {
color de fondo: # e6e6e6;
color: #FFF;
peso de fuente: 100;
margen: 0;
altura mínima: 100%;
ancho: 100%;
}
una {
decoración de texto: ninguno;
}
un img {
borde: ninguno;
}
h1 {
tamaño de fuente: 3.5em;
peso de fuente: 100;
}
pags {
tamaño de fuente: 1.5em;
}
input, textarea {
-webkit-apariencia: ninguno;
color de fondo: # f7f7f7;
borde: ninguno;
radio de borde: 3px;
tamaño de fuente: 1em;
peso de fuente: 100;
}
input: focus, textarea: focus {
borde: ninguno;
esquema: 2px sólido # 7ed7b9;
}
.izquierda {
flotador izquierdo;
}
.Derecha {
flotar derecho;
}
.btn {
color de fondo: #fff;
radio de borde: 24px;
color: # 595959;
pantalla: bloque en línea;
tamaño de fuente: 1.4em;
peso de fuente: 400;
margen: 30px 0;
acolchado: 10px 30px;
decoración de texto: ninguno;
}
.btn: hover {
opacidad: 0.8;
}
.wrap {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
tamaño de la caja: border-box;
margen: 0 automático;
ancho máximo: 1420 px;
desbordamiento: oculto;
relleno: 0 50px;
posición: relativa;
ancho: 100%;
}
.wrap: antes de {
contenido:”;
pantalla: bloque en línea;
altura: 100%;
margen derecho: -0.25em;
alineación vertical: medio;
}

/ * sección de encabezado * /
encabezado {
altura: 110 px;
}
encabezado .wrap {
altura: 100%;
}
el logotipo de cabecera {
margen superior: 1px;
}
encabezado nav {
flotar derecho;
margen superior: 17px;
}
header nav ul {
margen: 1em 0;
relleno: 0;
}
encabezado nav ul li {
bloqueo de pantalla;
flotador izquierdo;
margen derecho: 20px;
}
header nav ul li a {
radio de borde: 24px;
color: #aaa;
tamaño de fuente: 1.4em;
peso de fuente: 400;
acolchado: 10px 27px;
decoración de texto: ninguno;
}
header nav ul li a.active {
color de fondo: # c33c3a;
color: #fff;
}
header nav ul li a.active: hover {
color de fondo: # d2413f;
color: #fff;
}
header nav ul li a: hover, header nav ul li a.activeSmall {
color: # c33c3a;
}

/ * sección de pie de página * /
pie de página .copyright {
color: #adadad;
margen inferior: 50 px;
margen superior: 50 px;
alinear texto: centro;
}

/ * otros objetos * /
.projectObj {
color: #fff;
bloqueo de pantalla;
}
.projectObj .name {
flotador izquierdo;
tamaño de fuente: 4em;
peso de fuente: 100;
posición: absoluta;
ancho: 42%;
}
.projectObj .img {
flotar derecho;
margen inferior: 5%;
margen superior: 5%;
ancho: 30%;
}

.paddRow {
color de fondo: #dadada;
color: # 818181;
pantalla: ninguno;
relleno inferior: 40px;
}
.paddRow.aboutRow {
color de fondo: # 78c2d4;
color: #FFF! importante;
bloqueo de pantalla;
}
.paddRow .head {
tamaño de fuente: 4em;
peso de fuente: 100;
margen: 40px 0;
}
.paddRow .close {
cursor: puntero;
posición: absoluta;
derecha: 50 px;
arriba: 80px;
ancho: 38px;
}

.acerca de {
color: # 818181;
}
.acerca de la sección {
margen: 0 0 10%;
}
.about .head {
tamaño de fuente: 4em;
peso de fuente: 100;
margen: 3% 0;
}
.about .subHead {
tamaño de fuente: 2.5em;
peso de fuente: 100;
margen: 0 0 3%;
}
.about .txt {
ancho: 60%;
}
.about .image {
ancho: 26%;
}
.about .flLeft {
flotador izquierdo;
}
.about .flRight {
flotar derecho;
}

.projectHead.product {
color de fondo: # 87b822;
}
.projectHead .picture {
margen inferior: 6%;
margen superior: 6%;
}
.projectHead .picture.right {
margen derecho: -3.5%;
}
.projectHead .text {
posición: absoluta;
ancho: 49%;
}
.projectHead .centerText {
margen: 0 automático;
fondo acolchado: 24%;
acolchado: 6%;
alinear texto: centro;
ancho: 55%;
}

.image {
alinear texto: centro;
}
.image img {
alineación vertical: arriba;
ancho: 100%;
}

.Formulario de contacto {
ancho: 50%;
}

.input {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
tamaño de la caja: border-box;
margen: 1% 0;
acolchado: 12px 14px;
ancho: 47%;
}
.input.email {
flotar derecho;
}

botón {
borde: ninguno;
cursor: puntero;
}
.textarea {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
tamaño de la caja: border-box;
altura: 200 px;
margen: 1% 0;
desbordamiento: auto;
acolchado: 12px 14px;
cambiar el tamaño: ninguno;
ancho: 100%;
}

:: – webkit-input-placeholder {
color: # a7a7a7;
}
: -moz-placeholder {
color: # a7a7a7;
}
:: – marcador de posición moz {/ * FF18 + * /
color: # a7a7a7;
}
: -ms-input-placeholder {
color: # a7a7a7;
}

.loader {
-moz-animation: loader_rot 1.3s lineal infinito;
-o-animación: loader_rot 1.3s lineal infinito;
-webkit-animation: loader_rot 1.3s lineal infinito;
animación: loader_rot 1.3s lineal infinito;
altura: 80 px;
ancho: 80px;
}
@ -moz-keyframes loader_rot {
desde {
-moz-transform: rotar (0deg);
}
a {
-moz-transform: rotar (360 grados);
}
}
@ -webkit-keyframes loader_rot {
desde {
-webkit-transform: rotar (0deg);
}
a {
-webkit-transform: rotar (360 grados);
}
}
@keyframes loader_rot {
desde {
transformar: rotar (0deg);
}
a {
transformar: rotar (360 grados);
}
}

.view-enter, .view-leave {
-moz-transición: todos los .5s;
-o-transición: todos los .5s;
-webkit-transition: todos los .5s;
transición: todos los .5s;
}
.view-enter {
izquierda: 20 px;
opacidad: 0;
posición: absoluta;
arriba: 0;
}
.view-enter.view-enter-active {
izquierda: 0;
opacidad: 1;
}
.view-leave {
izquierda: 0;
opacidad: 1;
posición: absoluta;
arriba: 0;
}
.view-leave.view-leave-active {
izquierda: -20px;
opacidad: 0;
}

Tenga en cuenta que se utilizan transiciones CSS3, lo que significa que nuestra demostración solo funcionará en navegadores modernos (FF, Chrome, IE10 +, etc.)

Etapa 3. JavaScript

Como mencioné antes, nuestro controlador principal y el modelo están separados. El menú de navegación se puede manejar aquí, y también podemos operar con el formulario de contacto.

js / app.js

‘uso estricto’;

// inicialización de la aplicación principal angular.js
aplicación var = angular.module (‘ejemplo359’, []).
config ([‘$ routeProvider’, función ($ routeProvider) {
$ routeProvider.
when (‘/’, {templateUrl: ‘pages / index.html’, activetab: ‘projects’, controller: HomeCtrl}).
cuando (‘/ project /: projectId’, {
templateUrl: function (params) {return ‘pages /’ + params.projectId + ‘.html’; },
controlador: ProjectCtrl,
activetab: ‘proyectos’
}).
cuando (‘/ privacidad’, {
templateUrl: ‘pages / privacy.html’,
controlador: PrivacyCtrl,
activetab: ‘privacidad’
}).
cuando (‘/ about’, {
templateUrl: ‘páginas / about.html’,
controlador: AboutCtrl,
activetab: ‘acerca de’
}).
de lo contrario ({redirectTo: ‘/’});
}]). run ([‘$ rootScope’, ‘$ http’, ‘$ browser’, ‘$ timeout’, “$ route”, function ($ scope, $ http, $ browser, $ timeout, $ route) {

$ scope. $ on (“$ routeChangeSuccess”, function (scope, next, current) {
$ scope.part = $ route.current.activetab;
});

// controladores de eventos onclick
$ scope.showForm = function () {
$ (‘. contactRow’). slideToggle ();
};
$ scope.closeForm = function () {
$ (‘. contactRow’). slideUp ();
};

// guarde el formulario ‘Contáctenos’
$ scope.save = function () {
$ scope.loaded = true;
$ scope.process = true;
$ http.post (‘sendemail.php’, $ scope.message) .success (function () {
$ scope.success = true;
$ scope.process = false;
});
};
}]);

app.config ([‘$ locationProvider’, function ($ location) {
$ location.hashPrefix (‘!’);
}]);

Presta atención aquí. Cuando solicitamos una página, carga una página apropiada de la carpeta ‘páginas’: about.html, privacy.html, index.html. Dependiendo del producto seleccionado, abre una de las páginas del producto: product1.html, product2.html, product3.html o product4.html

En la segunda mitad, hay funciones para deslizar el formulario de contacto y manejar su proceso de envío (a la página sendemail.php). El siguiente es el archivo del controlador:

js / controllers.js

‘uso estricto’;

// controladores opcionales
función HomeCtrl ($ scope, $ http) {
}

función ProjectCtrl ($ scope, $ http) {
}

función PrivacyCtrl ($ scope, $ http, $ timeout) {
}

función AboutCtrl ($ scope, $ http, $ timeout) {
}

Está vacío, porque no tenemos nada que usar aquí en este momento.

Etapa 4. Páginas adicionales

AngularJS carga las páginas de forma asincrónica, lo que aumenta la velocidad. Aquí hay plantillas de todas las páginas adicionales utilizadas en nuestro proyecto:

páginas / about.html

Acerca de nosotros

Script Tutorials es una de las comunidades de desarrollo web más grandes. Proporcionamos contenido de alta calidad (artículos y tutoriales) que cubre todas las tecnologías de desarrollo web, incluyendo HTML5, CSS3, Javascript (y jQuery), PHP, etc. Nuestro público son diseñadores web y desarrolladores web que trabajan con tecnologías web.

Información adicional

Promo 1

Lorem ipsum dolor se sienta amet, consectetur adipiscing elit. Nunc et ligula accumsan, pharetra nibh nec, facilisis nulla. En pretium sempre venenatis. En adipiscing augue elit, en venenatis enim suscipit a. Fusce vitae justo tristique, ultrices mi metus.

… ..

páginas / privacy.html

Privacidad y términos

Al acceder a este sitio web, usted acepta regirse por estos Términos y condiciones de uso del sitio web, todas las leyes y regulaciones aplicables, y acepta que es responsable de cumplir con las leyes locales aplicables. Si no está de acuerdo con alguno de estos términos, tiene prohibido usar o acceder a este sitio. Los materiales contenidos en este sitio web están protegidos por las leyes de derechos de autor y marcas aplicables.

Otra información

Encabezado 1

Lorem ipsum dolor se sienta amet, consectetur adipiscing elit. Nunc et ligula accumsan, pharetra nibh nec, facilisis nulla. En pretium sempre venenatis. En adipiscing augue elit, en venenatis enim suscipit a. Fusce vitae justo tristique, ultrices mi metus.

… ..

páginas / pie de página.html

páginas / index.html

$ (‘. projectObj’). bind (‘click’, function (e) {
e.preventDefault ();

var me = esto;
ancho var = $ (me) .width () / 1.5;
$ (me) .find (‘. wrap’). width ($ (me) .find (‘. wrap’). width ());

$ (me) .animate ({
opacidad: 0,
marginLeft: -width
}, 500);

var delayN = 150;
var delayP = 150;

var nextEl = $ (me) .nextAll (‘. projectObj’);
var prevEl = $ (me) .prevAll (‘. projectObj’);

nextEl.each (function (index, elem) {
setTimeout (function () {

$ (elem) .find (‘. wrap’). ancho ($ (elem) .find (‘. wrap’). ancho ());

$ (elem) .animate ({
opacidad: 0,
marginLeft: -width
}, 500, función () {
});
}, delayN);
retraso N + = 100;
});

prevEl.each (function (index, elem) {
setTimeout (function () {
$ (elem) .find (‘. wrap’). ancho ($ (elem) .find (‘. wrap’). ancho ());

$ (elem) .animate ({
opacidad: 0,
marginLeft: -width
}, 500, función () {
});
}, delayP);
retraso P + = 100;
});

setTimeout (function () {
document.location = $ (me) .attr (‘href’);
}, 1000)

falso retorno;
});

Finalmente, las páginas del producto. Todos son prototipos, por lo que decidí publicar solo uno de ellos.

páginas / index.html

Toques finales: estilos receptivos

Todos estos estilos son necesarios para que nuestros resultados se vean igualmente bien en todos los dispositivos móviles y monitores posibles:

@media (ancho máximo: 1200px) {
cuerpo {
tamaño de fuente: 90%;
}
h1 {
tamaño de fuente: 4.3em;
}
pags {
tamaño de fuente: 1.3em;
}
encabezado {
altura: 80 px;
}
el logotipo de cabecera {
margen superior: 12px;
ancho: 200 px;
}
encabezado nav {
margen superior: 11px;
}
encabezado nav ul li {
margen derecho: 12px;
}
encabezado nav ul li a {
radio de borde: 23px;
tamaño de fuente: 1.3em;
acolchado: 10px 12px;
}
.wrap {
relleno: 0 30px;
}
.paddRow .close {
derecha: 30px;
}
}

@media (ancho máximo: 900 px) {
.Formulario de contacto {
ancho: 100%;
}
}

@media (ancho máximo: 768px) {
cuerpo {
tamaño de fuente: 80%;
margen: 0;
}
h1 {
tamaño de fuente: 4em;
}
encabezado {
altura: 70 px;
}
el logotipo de cabecera {
margen superior: 20 px;
ancho: 70 px;
}
encabezado nav {
margen superior: 8px;
}
encabezado nav ul li {
margen derecho: 5px;
}
header nav ul li a {
radio de borde: 20px;
tamaño de fuente: 1.1em;
acolchado: 8px;
}
.wrap {
relleno: 0 15px;
}
.projectObj .name {
tamaño de fuente: 3em;
}
.paddRow {
relleno inferior: 30px;
}
.paddRow .head {
tamaño de fuente: 3em;
margen: 30px 0;
}
.paddRow .close {
derecha: 20 px;
arriba: 60px;
ancho: 30px;
}
.projectHead .picture {
ancho: 67%;
}
.projectHead .picture.right {
margen derecho: 16,5%;
}
.projectHead .text {
posición: estática;
ancho: 100%;
}
.projectHead .centerText {
ancho: 70%;
}
.view-enter, .view-leave {
-webkit-transform: translate3d (0,0,0);
transformar: traducir3d (0,0,0);
}
}

@media (ancho máximo: 480px) {
cuerpo {
tamaño de fuente: 70%;
margen: 0;
}
encabezado {
altura: 50 px;
}
el logotipo de cabecera {
pantalla: ninguno;
}
encabezado nav {
margen superior: 3px;
}
encabezado nav ul li {
margen derecho: 3px;
}
encabezado nav ul li a {
radio de borde: 20px;
tamaño de fuente: 1.3em;
acolchado: 5px 14px;
}
#contactBtn {
pantalla: ninguno;
}
.wrap {
relleno: 0 10px;
}
.paddRow {
relleno inferior: 20px;
}
.paddRow .head {
margen: 20px 0;
}
.paddRow .close {
derecha: 10px;
arriba: 45 px;
ancho: 20px;
}
.about .image {
margen: 10% automático;
ancho: 60%;
}
.about .abIcon {
pantalla: en línea;
}
.projectHead .centerText {
ancho: 90%;
}
.about .txt, .input {
ancho: 100%;
}
.about .flLeft, .about .flRight, .input.email {
flotador: ninguno;
}
}

Fuente: Tutorial: Cómo crear un sitio web receptivo con AngularJS

Saludos !!! Votar si la respuesta es útil

“Compartir la respuesta Compartir es la humanidad”