À partir de mars, on m'a confié une nouvelle tâche liée au développement d'interface utilisateur, utilisant des technologies telles qu'AngularJS et Express JS. J'ai donc profité de l'occasion pour apprendre les nouvelles technologies les week-ends.

L'architecture de l'interface utilisateur du produit de notre équipe est la suivante :

Le front-end utilise principalement le framework AngularJS, combiné avecBootstraples nombreux contrôles qu'il fournit, ainsi que JQuery. Le backend utilise principalement un serveur web construit avec Express JS. Express JS fonctionne très facilement avec Nginx.

Par conséquent, lorsque le projet n'était pas chargé, j'avais le temps et l'intérêt d'apprendre AngularJS et Express JS.

En même temps, j'ai réalisé un exemple de site web très simple en utilisant AngularJS + Express JS.

I. AngularJS

AngularJS est un projet développé par des employés de Google et ensuite maintenu par Google. Vous pouvez télécharger la dernière version 1.4 et la version stable 1.3.15 depuis https://angularjs.org/. Pour apprendre AngularJS, veuillez consulterTutoriel AngularJS 。

En termes simples, AngularJS est unframework Javascript qui s'exécute côté front-end.Ses deux principales caractéristiques passent pardes directivesd'extension de HTML, et pardes expressionsde liaison de données à HTML. Il fournit également des contrôleurs, des filtres Filter, des services Factory, etc.

Comme AngularJS s'exécute côté front-end,il peut être combiné avec n'importe quelle technologie côté serveur,et il s'intègre parfaitement avec Express JS.

AngularJS a été créé pour résoudre les inconvénients de la manipulation du DOM dans les pages web statiques,et convient au développement d'applications web dynamiques.。

Le principe d'AngularJS peut être compris à l'aide du diagramme suivant :

Voici quelques concepts importants d'AngularJS :

1. Contrôleur

Pour manipuler dynamiquement les données d'une page web, nous pouvons écrire un contrôleur pour la page HTML. Un contrôleur est essentiellement une méthode Javascript. Par exemple, pour chaque page HTML, nous pouvons écrire une méthode Javascript correspondante comme contrôleur afin de contrôler les données de la page. Comme suit :

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>

Ceci est une page écrite avec un contrôleur AngularJS. Spécifiez l'application AngularJS comme myApp. Remarquez l'expression {{name}} ; name est une variable dynamique. D'où vient la valeur de name ? Elle est assignée à name dans le contrôleur correspondant, afin que lorsque les utilisateurs visitent la page index.html, ils puissent voir la valeur réelle 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";
}]);

Dans controller.js, nous définissons un contrôleur nommé indexContrl, qui assigne une valeur à name dans index.html. Bien sûr, dans un développement réel, le code du contrôleur sera certainement volumineux. Je suggère de placer chaque contrôleur comme indexContrl dans un fichier JS séparé, ce qui est plus standardisé et plus facile à maintenir.

Il y a un problème :Comment indexContrl est-il associé à index.html ? Comment AngularJS sait-il que nous voulons utiliser indexContrl pour contrôler index.html ?

Il y a deux façons. L'une est de le spécifier directement dans index.html :

        <div ng-controller="indexContrl">
            <p>Hello {{name}}</p>
        </div>

Mais cette approche est trop pénible pour les grands sites web. Il est recommandé d'utiliser une autre façon, qui consiste à utiliser un autre module d'AngularJSng-routepour faire le contrôle de routage. Pour différents chemins, définissez les contrôleurs respectifs dans le même fichier. Comme suit :

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'
        });
    }
]);

Il est à noter que vous devez référencer ng-route dans le module myApp, et également inclure le fichier angular-route.js dans votre page, sinon cela ne fonctionnera pas.

De cette façon, les données de la page index.html seront contrôlées par la fonction indexContrl. Ce n'est qu'une simple démo ; pour plus de fonctionnalités, vous devez lire la documentation.

2. Filtre

AngularJS fournit une fonctionnalité de filtre. En essence, nous définissons certaines méthodes communes pour formater les données affichées sur la page. C'est très pratique.

Il est recommandé de les placer dans un fichier Filter.js séparé lors du développement.

3. Service Factory

Il nous permet également de définir certaines méthodes communes en tant que services. Cependant, tous les services sont instanciés paresseusement ; ils ne sont instanciés que lorsqu'ils sont utilisés ou dont on dépend, et ce sont tous des singletons.

Lors du développement, il est recommandé de les placer dans un fichier Factory.js distinct.

II. Express JS

Dans le front-end de l'exemple, nous avons utilisé le framework AngularJS pour développer des pages HTML et les fichiers JS correspondants. Mais le backend du site web nécessite d'autres technologies. Si nous voulons utiliser Node.js comme backend, c'est très simple ; http.createServer suffit. Cependant, dans le développement réel d'un site web, Express JS est plus approprié.

Express JS est actuellement le framework de développement web le plus populaire basé sur Node.js, fournissant divers modules tels que session et cookie, et permettant de construire rapidement un site web entièrement fonctionnel.

Par essence, Express JS estdéveloppé à partir du module http intégré de Node.js.

Express JS est très pratique à utiliser avec le serveur proxy inverse Nginx.

Ici, un concept important d'Express JS estmiddleware, vous pouvez charger et utiliser de nombreux modules fournis par Express JS ou d'autres modules en tant que middleware. Son rôle est de traiter les requêtes HTTP. Après qu'un middleware a terminé le traitement, il peut passer au middleware suivant.

Vous pouvez utiliser NPM pour télécharger Express JS.

npm install express

Si vous voulez utiliser rapidement Express JS pour construire le backend d'un site web, je recommande un outil appelé express-generator. Il peut vous aider à créer rapidement un projet Express JS et à générer les fichiers nécessaires.

npm install -g express-generator

Mais ici, j'ai constaté qu'express-generator utilise pas mal d'autres modules, comme Jade pour le rendu de vues, ce qui est un peu compliqué. Néanmoins, je m'en suis servi comme référence et j'ai construit moi-même un projet Express JS des plus simples.

Le chemin est le suivant :

Le dossier public contient les fichiers liés à l'interface utilisateur, comme suit :

Parmi eux, app.js est le fichier d'entrée d'Express JS, équivalent à la fonction 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);

Ici, nous utilisons Express JS pour créer un serveur. Notez que la ligne 8 spécifie le dossier des pages, et la ligne 10 définit les informations de route pour le chemin / dans le fichier index du dossier routes.L'ordre de ces deux lignes ne peut pas être erroné.。

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;

Cela signifie que pour les requêtes vers le chemin /, il recherche le fichier index.html dans le dossier public.

De cette façon, avec une seule commande,

node app.js

vous pouvez lancer le site web.

III. Exemple de résultats et résumé

Enfin, visitez le site web et vous pouvez voir le résultat correct. Le site web est en ligne, et les variables sur la page ont été remplacées par les données correctes par le contrôleur AngularJS.

Je voudrais mentionner un petit détail. Lors du test initial, les variables sur la page n'étaient pas remplacées quoi qu'il arrive. J'ai passé des heures, changé la bibliothèque AngularJS, changé le code du contrôleur, en vain. Finalement, après avoir vérifié les références et la documentation, j'ai découvert que cela ne fonctionne que lorsque la page possèdeng-view, cela fonctionne. Donc c'est comme ça... Quelle galère...

Cet article ne présente qu'un exemple très simple de création d'un site web avec AngularJS + Express JS. J'espère que cela vous sera utile.

Article original : http://www.cnblogs.com/KevinSong/p/4495729.html