web-dev-qa-db-fra.com

Comment Angular construit et fonctionne

Je veux juste apprendre comment Angular construit et fonctionne en coulisse?

Voici ce que j'ai compris jusqu'ici. Vous voulez savoir si j'ai raté quelque chose.

Comment Angular construit

Après avoir codé nos applications angular à l'aide de TypeScript, nous utilisons Angular CLI Command pour créer l'application.

La commande ng build compile l'application dans un répertoire de sortie et les artefacts de construction seront stockés dans le répertoire dist/.

Processus interne

1. Angular CLI exécute Webpack pour créer et regrouper tout le code JavaScript et CSS.

2. tour à tour Webpack appelle le TypeScript Chargeurs qui récupère tout le fichier .ts dans le angular projet et les transcrit ensuite dans JavaScript c'est-à-dire dans un fichier .js, que les navigateurs peuvent comprendre.

This post dit Angular a deux compilateurs:

  • Voir le compilateur

  • Module compilateur

Questions sur les builds

Quelle est la séquence d'appel du processus de construction?

CLI angulaire Appelle d’abord le compilateur intégré angular écrit en TypeScript => puis appelle le Transcripteur TypeScript => puis appelle le Webpack à regrouper et à stocker dans le répertoire dist/.

Comment fonctionne Angular

Lorsque la construction est terminée, tous les composants, services, modules, etc. de notre application sont transpilés en fichiers Javascript .js qui sont utilisés pour exécuter l'application angular dans le navigateur.

Déclarations en documents angulaires

  1. Lorsque vous bootstrap avec la classe AppComponent (dans main.ts), Angular recherche un <app-root> dans le index.html, le trouve, instancie une instance de AppComponent et la restitue dans la balise <app-root>.

  2. Angular crée, met à jour et détruit des composants lorsque l'utilisateur se déplace dans l'application.

Questions sur les essais

Bien que main.ts soit utilisé dans l'instruction ci-dessus pour expliquer le processus bootstrap, _ l'application n'est-elle pas angular amarrée ou démarrée à l'aide de fichiers Javascript .js?

Toutes les instructions ci-dessus ne sont-elles pas terminées à l'exécution à l'aide de Javascript .jsfiles?

Est-ce que quelqu'un sait comment toutes les pièces s'emboîtent en profondeur?

angulartypescriptbuildangular-cli
57
stom

(Quand je dis Angular je veux dire Angular 2+ et dit explicitement angular-js si je mentionne angular 1).

Prélude: C'est déroutant

Angular, et probablement plus précisément angular-cli, ont fusionné un certain nombre d’outils de tendance en Javascript impliqués dans le processus de construction. Cela crée un peu de confusion.

Pour aggraver la confusion, le terme compile était souvent utilisé dans angular-js pour désigner le processus consistant à transformer le pseudo-html du modèle en un élément de DOM. Cela fait partie de ce que fait le compilateur mais une des plus petites parties.

Tout d’abord, il n’est pas nécessaire d’utiliser TypeScript, angular-cli ou Webpack pour exécuter Angular. Pour répondre à ta question. Nous devrions examiner une question simple: "Qu'est-ce que Angular?"

Angular: Que fait-il?

Cette section peut être controversée, nous verrons. À la base, le service fourni par Angular est un mécanisme d'injection de dépendance fonctionnant avec Javascript, HTML et CSS. écrivez tous les petits morceaux individuellement et dans chaque petit morceau, vous suivez les règles d'Angular pour référencer les autres morceaux. Angular tisse alors cela d'une façon ou d'une autre.

Pour être (légèrement) plus spécifique:

  • Les modèles permettent d'inclure le code HTML dans le composant Javascript. Cela permet à l’utilisateur d’entrer sur le DOM lui-même (par exemple, en cliquant sur un bouton) pour alimenter le composant Javascript et aux variables du composant Javascript de contrôler la structure et les valeurs du DOM.
  • Les classes Javascript (y compris les composants Javascript) doivent pouvoir accéder aux instances des autres classes Javascript dont elles dépendent (par exemple, l'injection de dépendance classique). Un composant BookListComponent a besoin d'une instance d'un BookListService qui pourrait nécessiter une instance d'un BookListPolicy ou quelque chose du genre. Chacune de ces classes a des durées de vie différentes (par exemple, les services sont généralement des singletons, les composants ne sont généralement pas des singletons) et Angular doit gérer toutes ces durées de vie, la création des composants et le câblage des dépendances.
  • Les règles CSS devaient être chargées de manière à ne s'appliquer qu'à un sous-ensemble du DOM (le style d'un composant est local pour ce composant).

Une chose peut-être importante à noter est que Angular n'est pas responsable de la façon dont les fichiers Javascript référencent d'autres fichiers Javascript (par exemple, le mot clé import). Cela est pris en charge par Webpack.

Que fait le compilateur?

Maintenant que vous savez ce que Angular, nous pouvons parler de ce que fait le compilateur. Je vais éviter de devenir trop technique principalement parce que je suis ignorant. Cependant, dans un système d'injection de dépendance, vous devez généralement exprimer vos dépendances avec une sorte de métadonnée (par exemple, comment une classe dit I can be injected, My lifetime is blah ou You can think of me as a Component type of instance). En Java, Spring l’avait initialement fait avec des fichiers XML. Java ont par la suite adopté des annotations qui sont devenues le moyen privilégié d’exprimer des métadonnées. C # utilise des attributs pour exprimer les métadonnées.

Javascript ne dispose pas d'un mécanisme efficace pour afficher ces métadonnées intégrées. angular-js a tenté sa chance et ce n'était pas si mal, mais il y avait beaucoup de règles difficiles à vérifier et un peu déroutantes. Avec Angular, il existe deux méthodes prises en charge pour spécifier les métadonnées. Vous pouvez écrire du code Javascript pur et spécifier les métadonnées manuellement, un peu comme angular-js. Continuez simplement à suivre les règles et à écrire du code supplémentaire. Vous pouvez également passer à TypeScript qui, comme il se doit, contient des décorateurs (ces symboles @, qui servent à exprimer des métadonnées).

Voici donc où nous pouvons enfin arriver au compilateur. Le travail du compilateur consiste à prendre ces métadonnées et à créer le système de pièces de travail constituant votre application. Vous vous concentrez sur toutes les pièces et toutes les métadonnées et le compilateur construit une grande application interconnectée.

Comment le compilateur le fait-il?

Le compilateur peut travailler de deux manières: à l'exécution et à l'avance. À partir de là, je suppose que vous utilisez TypeScript:

  • Durée d'exécution ( Lorsque le compilateur TypeScript est exécuté, il prend toutes les informations sur le décorateur et les insère dans le code Javascript associé aux classes, méthodes et champs décorés. Dans votre index.html, vous faites référence à votre main.js qui appelle la méthode bootstrap. Cette méthode est transmise à votre module de niveau supérieur.

La méthode bootstrap lance le compilateur d'exécution et lui donne une référence à ce module de niveau supérieur. Le compilateur d'exécution commence ensuite à analyser ce module, tous les services, composants, etc. référencés par ce module, ainsi que toutes les métadonnées associées, et construit votre application.

  • AOT: Plutôt que de faire tout le travail au moment de l'exécution, Angular a fourni un mécanisme permettant de faire le gros du travail au moment de la construction. Ceci est presque toujours fait en utilisant n plugin webpack (ce doit être l’un des paquets npm les plus populaires et les moins connus). Il s'exécute après l'exécution de la compilation TypeScript, de sorte qu'il voit essentiellement la même entrée que le compilateur d'exécution. Le compilateur AOT construit votre application de la même manière que le compilateur d'exécution, mais l'enregistre ensuite en Javascript.

L'avantage ici n'est pas seulement que vous pouvez économiser le temps processeur nécessaire à la compilation elle-même, mais il vous permet également de réduire la taille de votre application.

Réponses Spécifiques

CLI angulaire Appelle d’abord le compilateur intégré angular écrit en TypeScript => puis appelle le Transcripteur TypeScript => puis appelle le Webpack à lier et à stocker dans le répertoire dist /.

Non. Angular Appels de la CLI Webpack (le vrai service de la CLI angulaire est la configuration de Webpack. Lorsque vous exécutez ng build, il ne suffit pas d'un proxy pour lancer Webpack). Webpack appelle d'abord le compilateur TypeScript, puis le compilateur angular (en supposant AOT), tout en regroupant votre code en même temps.

Bien que main.ts soit utilisé dans l'instruction ci-dessus pour expliquer le processus bootstrap, l'application angular n'est-elle pas démarrée ou démarrée à l'aide de fichiers Javascript .js?

Je ne suis pas tout à fait sûr de ce que vous demandez ici. main.ts sera transformé en Javascript. Ce Javascript contiendra un appel à bootstrap qui est le point d’entrée de Angular. Lorsque bootstrap est terminé, votre application Angular complète est exécutée.

Ce message dit que Angular a deux compilateurs:

Voir le compilateur

Module compilateur

Pour être honnête, je vais simplement prétendre à l'ignorance. Je pense qu'à notre niveau, nous pouvons simplement penser à tout cela comme un gros compilateur.

Est-ce que quelqu'un sait comment toutes les pièces s'emboîtent en profondeur?

J'espère que ce qui précède satisfait cela.

Don't @ Me: Angular fait plus que l'injection de dépendance

Sûr. Il effectue le routage, la création de vues, la détection de changements et toutes sortes d'autres choses. Le compilateur génère réellement du Javascript pour la construction de vues et la détection de changements. J'ai menti quand j'ai dit que c'était juste une injection de dépendance. Cependant, l'injection de dépendance est à la base et suffisante pour conduire le reste de la réponse.

Faut-il l'appeler un compilateur?

Il effectue probablement beaucoup d’analyses et dexercices et génère définitivement beaucoup de code, vous pouvez donc appeler cela un compilateur.

D'autre part, il ne s'agit pas de traduire votre code simplement en une représentation différente. Au lieu de cela, il prend un tas de différentes pièces de code et les tisse en pièces consommables d'un système plus grand. Ensuite, le processus bootstrap (après compilation, si nécessaire) prend ces éléments et les branche dans le noyau Angular.

60
Pace

Permettez-moi de commencer depuis le début.

Dans mon application, je lance directement l'application depuis Webpack.

Pour construire et exécuter l'application, nous utilisons webpack --progress et webpack-dev-server --inline la commande a été écrite en package.json comme ci-dessous.

"scripts": {
    "serve": "webpack-dev-server --inline ",
    "build": "webpack --progress"

  }

Lorsque nous exécutons la commande webpack --progress, il commence à lire le fichier webpack.config.js où il trouve le point d'entrée comme ci-dessous.

module.exports = {
    devtool: 'source-map',
    entry: './src/main.ts',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: ['awesome-TypeScript-loader', 'angular2-template-loader'],
                exclude: [/\.(spec|e2e)\.ts$/]
            },
            /* Embed files. */
            {
                test: /\.(html|css)$/,
                loader: 'raw-loader',
                exclude: /\.async\.(html|css)$/
            },
            /* Async loading. */
            {
                test: /\.async\.(html|css)$/,
                loaders: ['file?name=[name].[hash].[ext]', 'extract']
            },
        ]
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}

et puis il lit tous les fichiers TypeScript et les compile en se basant sur les règles déclarées dans le fichier tsconfig.json, puis les convertit en fichiers .js respectifs et son fichier de mappage.

S'il fonctionne sans erreur de compilation, il crée un fichier bundle.js avec les noms indiqués dans la section de sortie Webpack.

Maintenant, laissez-moi vous expliquer pourquoi nous utilisons des chargeuses.

awesome-TypeScript-loader, angular2-template-loader Nous utilisons ces chargeurs pour compiler le fichier TypeScript sur la base déclarée dans le fichier tsconfig.json et les recherches angular2-template-loader pour templateUrl et styleUrls la déclaration se trouve à l'intérieur de la métadonnée Angular 2 et remplace les chemins par l'instruction requise correspondante.

resolve: {
        extensions: ['.ts', '.js']
    }

Nous utilisons la section de résolution ci-dessus pour dire à Webpack de convertir le fichier TypeScript en JavaScript

plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]

La section Plugins est utilisée pour injecter un framework ou un fichier tiers. Dans mon code, je l'utilise pour injecter index.html du dossier de destination.

 devtool: 'source-map',

La ligne ci-dessus est utilisée pour voir le fichier TypeScript dans le navigateur et le déboguer, principalement utilisé pour le code de développeur.

 loader: 'raw-loader'

Le raw-loader ci-dessus est utilisé pour charger les fichiers .html et .css et les regrouper avec les fichiers TypeScript.

A la fin de l'exécution webpack-dev-server --inline il créera son propre serveur et démarrera l'application en utilisant le chemin indiqué dans le fichier web-pack.config.js où nous avons mentionné le dossier de destination et l'entrée. point.

Dans Angular 2 le point d’entrée de la plupart des applications est main.ts où nous mentionnons le module initial bootstrap par exemple (app.module). Ce module contient des informations complètes sur l’application, telles que toutes les directives, services. , modules, composants et routage implémentation de toute l'application.

Note: Beaucoup de personnes doutent de la raison pour laquelle index.html ne démarre que l’application, bien qu’elles n’aient mentionné aucun endroit. La réponse est lorsque la commande Webpackservice l'exécute, crée son propre service et, par défaut, elle charge index.html si vous n'avez pas mentionné de page par défaut.

J'espère que ces informations aident certaines personnes.

8
Arun

Comment Angular est-il construit?

Le Angular CLI appelle Webpack, lorsque Webpack frappe un fichier .ts, il le transmet à TypeScript Le compilateur qui a un transformateur de sortie qui compile Angular des modèles

La séquence de construction est donc:

Angular CLI => Webpack => TypeScript Compilateur => TypeScript Le compilateur appelle le compilateur Angular au moment de la compilation.

Comment Angular s'exécute?

Angular démarre et s'exécute à l'aide du fichier Javascript.

En réalité, le processus bootstrap est en cours d'exécution et se produit avant l'ouverture du navigateur. Cela nous amène à notre prochaine question.

Donc, si le processus bootstrap se produit avec le fichier Javascript, alors pourquoi Angular Docs utilise le fichier main.ts TypeScript pour expliquer le processus bootstrap?

Angular Les documents ne parlent que des fichiers .ts puisque c'est la source.

C'est une réponse brève. Appréciez si quelqu'un peut répondre en profondeur.

Les crédits vont à @ Toxicable pour avoir répondu à mes questions dans le chat.

3
stom

Donc, si le processus bootstrap se produit avec un fichier Javascript, alors pourquoi Angular Docs utilise un fichier TypeScript main.ts pour expliquer le processus bootstrap?

Cela fait partie de la version .js transformée de main.ts émise par ng build qui n’est pas encore uglifié et minifié, comment espérez-vous qu'un débutant comprenne ce code? ça n'a pas l'air bien compliqué?

Object(__WEBPACK_IMPORTED_MODULE_1__angular_platform_browser_dynamic__["a" /* platformBrowserDynamic */])().bootstrapModule(__WEBPACK_IMPORTED_MODULE_2__app_app_module__["a" /* AppModule */])
    .catch(function (err) { return console.log(err); });

et avec ng build --prod --build-optimizer qui optimise et minimise votre code afin de l’optimiser, les ensembles générés sont compacts et au format illisible en bits.

webpackJsonp([1],{0:function(t,e,n){t.exports=n("cDNt")},"1j/l":function(t,e,n){"use strict";n.d(e,"a",function(){return r});var r=Array.isArray||function(t){return t&&"number"==typeof t.length}},"2kLc

alors que le fichier main.ts est lisible par l'homme et lucide, c'est pourquoi angular.io utilise main.ts pour expliquer le processus bootstrap de angular . Angular: Why TypeScript ? En dehors de cela, si vous aviez été l'auteur d'un tel cadre, quelle approche auriez-vous adoptée pour rendre votre cadre populaire et convivial? n'allez-vous pas chercher une explication claire et concise plutôt qu'une explication compliquée? Je suis d’accord avec la documentation d’angular.io qui manque d’explications détaillées et qui n’est pas très bonne, mais j’ai vu qu’ils s’efforçaient de l’améliorer.

1
Vikas