A partir de marzo, recibí una nueva tarea relacionada con el desarrollo de UI, utilizando tecnologías como AngularJS y Express JS. Así que aproveché el fin de semana para aprender las nuevas tecnologías.
La arquitectura de UI del producto en el equipo es la siguiente:
Entre ellos, el frontend utiliza principalmente el framework AngularJS, junto conBootstraplos muchos controles proporcionados por AngularJS y JQuery. El backend es principalmente un servidor web construido con Express JS. Express JS combinado con Nginx es muy conveniente.
Por lo tanto, cuando el proyecto no estaba ocupado, tuve tiempo e interés para aprender AngularJS y Express JS.
Al mismo tiempo, implementé un ejemplo de sitio web muy simple con AngularJS + Express JS.
1. AngularJS
AngularJS es un proyecto desarrollado por empleados de Google y posteriormente mantenido por Google. Se puede descargar la última versión 1.4 y la versión estable 1.3.15 desde https://angularjs.org/. Para aprender AngularJS, visitaTutorial de AngularJS 。
En términos simples, AngularJS es unframework de JavaScript que actúa en el frontend. Sus dos características principales son que, a través dedirectivasextiende HTML, y a través deexpresionesvincula datos a HTML. También proporciona controladores, filtros (Filter), fábricas (Factory) y otros servicios.
Debido a que AngularJS se ejecuta en el frontend,puede combinarse con cualquier tecnología de servidor, y es una excelente combinación con Express JS.
AngularJS fue creado para resolver los inconvenientes de manipular el DOM en páginas web estáticas,y es adecuado para desarrollar aplicaciones web dinámicas.。
El principio de AngularJS se puede entender mediante el siguiente diagrama:
Aquí presentaré varios conceptos importantes de AngularJS:
1. Controlador (Controller)
Para manipular dinámicamente los datos en una página web, podemos escribir controladores para las páginas HTML. Un controlador es esencialmente un método de JavaScript. Por ejemplo, podemos escribir un método de JavaScript correspondiente para cada página HTML como controlador, para controlar los datos de la página. Como se muestra a continuación:
index.html
<!doctype html>
<html ng-app="myApp">
<head>
<script src="lib/angular-1.3.15/angular.js.html"></script>
<script src="lib/angular-1.3.15/angular-route.js.html"></script>
<script src="js/controller.js.html"></script>
<script src="js/angularMainApp.js.html"></script>
</head>
<body ng-view>
<div>
<p>Hello {{name}}</p>
</div>
</body>
</html>
Esta es una página escrita con el control de AngularJS, donde la aplicación de AngularJS se especifica como myApp. Observa las expresiones, {{name}}; name es una variable dinámica. Entonces, ¿de dónde viene el valor de name? Se debe asignar un valor a name en el controlador correspondiente, de modo que cuando el usuario visite la página index.html, pueda ver el valor real de name.
controller.js
// Declare angular JS level module wich depends on filters, and services
var myControllers = angular.module('myControllers', []);
// controller
myControllers.controller('indexContrl', ['$scope', function ($scope) {
$scope.name = "Kevin";
}]);
En controller.js, definimos un controlador llamado indexContrl, que asigna el valor a name en index.html. Por supuesto, creo que en el desarrollo real, el código del controlador será sin duda extenso. Recomiendo colocar cada controlador, como indexContrl, en un archivo JS separado, para que sea ordenado y fácil de mantener.
Entonces surge una pregunta:¿Cómo se asocia indexContrl con index.html? ¿Cómo sabe AngularJS que queremos usar indexContrl para controlar index.html?
Hay dos formas: la primera es especificarlo directamente en index.html:
<div ng-controller="indexContrl">
<p>Hello {{name}}</p>
</div>
Pero este método es demasiado problemático para sitios web grandes. Se recomienda usar otro método, que consiste en utilizar otro módulo de AngularJSng-route, para el control de rutas. Para diferentes rutas, se definen sus respectivos controladores en el mismo archivo. Como se muestra a continuación:
myAngularApp.js
// Declare angular JS level module wich depends on filters, and services
var myApp = angular.module('myApp', [ 'ngRoute', 'myControllers']);
// route
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when(
'/',
{
templateUrl: 'index.html',
controller: 'indexContrl'
}
).
otherwise( {
redirectTo: '/404'
});
}
]);
Cabe destacar que se debe hacer referencia a ngRoute en el módulo de myApp, y también se debe incluir el archivo angular-route.js en el archivo; de lo contrario, no funcionará.
De esta manera, los datos en la página index.html serán controlados por la función indexContrl. Esto es solo un demo simple; para más funcionalidades, hay que consultar la documentación.
2. Filtro (Filter)
AngularJS ofrece funcionalidad de filtros. En esencia, definimos algunos métodos comunes para formatear los datos de salida en la página. Es muy conveniente.
Se recomienda colocarlos en un archivo Filter.js separado durante el desarrollo.
3. Servicio Factory
También nos permite definir métodos comunes como servicios. Pero todos los servicios se instancian de forma diferida; solo se instancian cuando se usan o cuando son dependidos, y todos son singletons.
Se recomienda colocarlos en un archivo Factory.js separado durante el desarrollo.
2. Express JS
En el frontend del ejemplo, usamos el framework AngularJS para desarrollar páginas HTML y sus archivos JS correspondientes. Pero para el backend del sitio web se necesitan otras tecnologías. Si queremos usar Node.js como backend, es muy sencillo: basta con http.createServer. Sin embargo, en el desarrollo real de sitios web, Express JS es más adecuado.
Express JS es actualmente el framework de desarrollo web más popular basado en Node.js, y proporciona varios módulos, como session, cookie, etc., lo que permite crear rápidamente un sitio web con funcionalidades completas.
En esencia, Express JS estábasado en el módulo http integrado de Node.jsdesarrollado.
Express JS es muy conveniente para combinarlo con el servidor proxy inverso Nginx.
Aquí, Express JS tiene un concepto importante:middleware. Se pueden cargar y usar muchos módulos, proporcionados por Express JS u otros módulos, como middleware. Su función es procesar solicitudes HTTP; cuando un middleware termina de procesar, puede pasar al siguiente middleware.
Se puede usar NPM para descargar Express JS.
npm install express
Si se quiere usar Express JS rápidamente para crear un backend de sitio web, recomiendo una herramienta llamada express-generator, que puede ayudarle a crear rápidamente un proyecto Express JS y generar los archivos necesarios.
npm install -g express-generator
Pero aquí descubrí que express-generator usa muchos otros módulos, como jade para la renderización de vistas, etc., lo cual es un poco complejo. Prefiero, siguiendo la referencia, crear yo mismo un proyecto Express JS muy simple.
La estructura de directorios es la siguiente:
La carpeta public contiene los archivos relacionados con la UI, como se muestra a continuación:
app.js es el archivo de inicio de Express JS, equivalente a la función main.
app.js
var express = require('express');
var http = require('http');
var path = require('path');
var routes = require('./routes/index');
var app = express();
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
http.createServer(app).listen(3000);
Aquí se usa Express JS para crear un servidor. Ten en cuenta que la línea 8 especifica la carpeta de páginas, y la línea 10 define la información de enrutamiento para la ruta / en el archivo index de la carpeta routes.El orden de estas dos líneas no puede invertirse.。
routes/index
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;
Significa que, para el acceso a la ruta /, se buscará el archivo index.html en la carpeta public.
Así, con un solo comando,
node app.js
se puede poner en marcha el sitio web.
3. Resultados del ejemplo y resumen
Finalmente, al visitar el sitio web, se puede ver el resultado correcto: el sitio web está en funcionamiento y las variables en la página han sido reemplazadas por los datos correctos por el controlador de AngularJS.
Aquí menciono un pequeño detalle: durante las primeras pruebas, las variables de la página no se reemplazaban de ninguna manera. Pasé muchas horas, cambié la biblioteca de AngularJS, modifiqué la escritura del controlador, etc., y nada funcionó. Finalmente, al consultar materiales y documentación, descubrí que solo cuando la página tieneng-view, funciona. Resulta que era así... ¡Qué engaño!...
Este artículo solo presenta un ejemplo muy simple de construcción de un sitio web con AngularJS + Express JS. Espero que te sea útil.
Artículo original: http://www.cnblogs.com/KevinSong/p/4495729.html