Comment Angular construit et fonctionne

Vous voulez juste apprendre comment Angular construit et fonctionne dans les coulisses?

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

Comment Angulaire s'appuie

Après avoir codé nos applications angulaires en utilisant TypeScript, nous utilisons la commande Angular CLI pour construire l'application.

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

Interne Processus

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

2. à son tour Webpack appelle les TypeScript chargeurs qui récupère tous les fichiers .ts dans le projet angulaire, puis les transpose vers JavaScript c'est-à-dire vers un fichier .js, que les navigateurs peuvent comprendre.

Ce post dit Angular a deux compilateurs:

  • Afficher Le Compilateur

  • Module Compilateur

Des Questions sur les builds

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

Angular CLI appelle d'abord le compilateur intégré angular écrit en Typescript = > puis appelle le Transpiler Typescript = > puis appelle le Webpack pour regrouper et stocker dans le répertoire dist/.

Comment fonctionne angulaire

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

Instructions dans documents angulaires

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

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

Questions sur fonctionne

Bien que main.ts soit utilisé dans la déclaration ci-dessus pour expliquer le processus d'amorçage, l'application angulaire n'est-elle pas initialisée ou a-t-elle commencé à utiliser des fichiers Javascript .js?

Toutes les instructions ci-dessus ne sont-elles pas exécutées en utilisant des fichiers Javascript .js?

Personne Ne sait comment toutes les pièces s'emboîtent en profondeur?

23
demandé sur HDJEMAI 2018-02-23 09:56:04

4 réponses

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

Prelude: c'est déroutant

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

Pour approfondir la confusion, le terme compile a souvent été utilisé dans angular-js pour désigner le processus de prise de la le pseudo-html du modèle et le transformer en éléments DOM. Cela fait partie de ce que fait le compilateur, mais l'une des parties les plus petites.

Tout d'Abord, il n'est pas nécessaire d'utiliser la Machine, angulaires-cli, ou Webpack pour exécuter Angulaire. Pour répondre à votre question. Nous devrions regarder une question simple: "Qu'est-ce qui est angulaire?"

Angulaire: Que fait-il?

Cette section peut être controversée, nous verrons. à la base, le service fourni par Angular est une injection de dépendance mécanisme qui fonctionne sur Javascript, HTML et CSS.{[29] } vous é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 tout à fait en quelque sorte.

Pour être (légèrement) plus précis:

    Les modèles
  • permettent de connecter le code HTML au 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 permet également variables dans le composant Javascript pour contrôler la structure et les valeurs dans le DOM.
  • Les classes Javascript (y compris les composants Javascript) doivent pouvoir accéder aux instances d'autres classes Javascript dont elles dépendent (par exemple, l'injection de dépendance classique). Un BookListComponent a besoin d'une instance D'un BookListService qui peut avoir besoin d'une instance D'un BookListPolicy ou quelque chose comme ça. 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 telle sorte qu'elles ne s'appliquent qu'à un sous-ensemble du DOM (le style d'un composant est local à ce composant).

Une chose peut-être importante à noter est Qu'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 de par Webpack.

Que fait le compilateur?

Maintenant que vous savez ce que fait 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épendances, vous devez généralement exprimer vos dépendances avec une sorte de métadonnées (par exemple, comment dit une classeI can be injected, My lifetime is blah, ou You can think of me as a Component type of instance). En Java, Spring l'a fait à l'origine avec des fichiers XML. Java plus tard adopté annotations et ils sont devenus le moyen préféré d'exprimer les métadonnées. C # utilise des attributs pour exprimer les métadonnées.

Javascript ne dispose pas d'un excellent mécanisme pour exposer ces métadonnées intégrées. angular-js a fait une tentative et ce n'était pas mauvais mais il y avait beaucoup de règles qui ne pouvaient pas être facilement vérifiées et étaient un peu déroutantes. Avec Angular, il existe deux façons de spécifier les métadonnées. Vous pouvez écrire du Javascript pur et spécifier les métadonnées manuellement, un peu similaire à angular-js et continuer à suivre les règles et l'écriture de chaudière supplémentaire-code platey. Alternativement, vous pouvez passer à TypeScript qui, comme il se trouve, a des décorateurs (ces symboles @) qui sont utilisés pour exprimer les 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 qui est votre application. Vous vous concentrez sur toutes les pièces et toutes les métadonnées et le compilateur crée un grand interconnectés application.

Comment le compilateur le fait-il?

Le compilateur peut fonctionner de deux façons: l'exécution et l'avance. À partir de là, je suppose que vous utilisez TypeScript:

  • Runtime: lorsque le compilateur typescript s'exécute, il prend toutes les informations de décorateur et les introduit dans le code Javascript attaché aux classes, méthodes et champs décorés. Dans votre index.html vous référencez votre main.js qui appelle la méthode bootstrap. Cette méthode est passée votre module de haut niveau.

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

  • AOT: {[29] } plutôt que de faire tout le travail à L'exécution Angular a fourni un mécanisme pour faire la plupart du travail au moment de la construction. C'est presque toujours fait utiliser un plugin webpack (CE doit être l'un des paquets npm les plus populaires mais les moins connus). Il s'exécute après l'exécution de la compilation typescript, donc il voit essentiellement la même entrée que le compilateur d'exécution. Le compilateur AOT construit votre application tout comme le compilateur d'exécution, mais l'enregistre ensuite dans Javascript.

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

Réponses Spécifiques

Angular CLI appelle d'abord angular built in compilateur écrit dans Tapuscrit => puis appelle le Tapuscrit Transpiler => puis appelle la Webpack à regrouper et à stocker dans le répertoire dist/.

Non. Angular cli appelle Webpack (le service réel de Angular CLI configure webpack. Lorsque vous exécutez ng build, ce n'est pas beaucoup plus qu'un proxy pour démarrer Webpack). Webpack appelle d'abord le compilateur Typescript, puis l'angulaire compilateur (en supposant AOT), tout en regroupant votre code en même temps.

Bien que principal.ts est utilisé dans la déclaration ci dessus pour expliquer bootstrap processus, n'est-ce pas l'application angulaire est démarrée ou a commencé à utiliser Javascript .fichiers js ?

Je ne suis pas tout à fait certain de ce que vous demandez ici. {[10] } sera tranpiled vers le bas dans Javascript. Ce Javascript contiendra un appel à bootstrap qui est le point D'entrée à Angular. Lorsque bootstrap est terminé, vous aurez votre plein Application angulaire en cours d'exécution.

Ce post dit Angular a deux compilateurs:

Afficher Le Compilateur

Compilateur De Module

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

Personne Ne 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 la dépendance l'injection de

Bien sûr. Il fait le routage, la construction de vue, la détection de changement et toutes sortes d'autres choses. Le compilateur génère réellement Javascript pour la construction de vues et la détection des modifications. J'ai menti quand j'ai dit que c'était juste une injection de dépendance. Cependant, l'injection de dépendance est au cœur et suffisant pour le reste de la réponse.

Devrions-nous l'appeler un compilateur?

Il fait probablement beaucoup d'analyse et de lexing et génère certainement beaucoup de code en conséquence ainsi, vous pouvez appeler un compilateur pour cette raison.

D'un autre côté, il ne traduit pas vraiment votre code en une simple représentation différente. Au lieu de cela, il prend un tas de différents morceaux de code et de les tisser en morceaux consommables d'un système plus grand. Le processus de bootstrap ensuite (après la compilation, si nécessaire) prend ces pièces et les branche dans le noyau angulaire.

25
répondu Pace 2018-02-26 13:43:37

Permettez-moi de commencer par le début.

Dans mon application, j'exécute directement l'application à partir de Webpack.

Pour générer et exécuter l'application que nous utilisons webpack --progress et webpack-dev-server --inline la commande a été écrit dans 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 tout le fichier Typescript et la compilation est basée sur les règles déclarées dans le fichier tsconfig.json et que le convertir en fichiers .js respectifs et c'est un fichier de carte.

S'il s'exécute sans erreur de compilation, il créera un fichier bundle.js avec des noms comme nous l'avons déclaré dans la section de sortie Webpack.

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

Génial-tapuscrit-chargeur, angular2-modèle-chargeur Nous utilisons ces chargeur pour compiler le Typescript fichier sur la base déclarée dans le tsconfig.json fichier et angular2-modèle-chargeur de recherche templateUrl et styleUrls la déclaration est à l'intérieur des métadonnées du composant Angular 2 et remplace les chemins par l'instruction require correspondante.

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

Nous utilisons la section resolve ci-dessus pour indiquer à Webpack de convertir Typescript en JavaScript file 

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 développeur code.

 loader: 'raw-loader'

Ci-dessus raw-loader est utilisé pour charger l' .html et .css fichier et de les regrouper avec Typescript fichiers.

À la fin lorsque nous exécutons webpack-dev-server --inline Il va créer son propre serveur et démarrer l'application en tant que chemin mentionné dans le fichier web-pack.config.js où nous avons mentionné le dossier de destination et le point d'entrée.

Dans Angular 2 le point d'entrée de la plupart des applications est main.ts où nous mentionnons le module bootstrap initial par exemple(app.module) ce module contient des informations complètes sur l'application telles que toutes les directives, les services,les modules, les composants et la mise en œuvre du routage de l'application entière.

Remarque: Beaucoup de gens ont des doutes sur la raison pour laquelle {[22] } ne fait que démarrer l'application, même s'ils n'ont pas mentionné où. La réponse est quand la commande Webpack serve l'exécute créer son propre service et par défaut charger index.html si vous n'avez mentionné aucune page par défaut.

J'espère que les informations données aident certaines personnes.

3
répondu Arun 2018-03-06 04:59:15

Donc, si le processus d'amorçage se produit avec un fichier Javascript, pourquoi Angulaire Docs utilise principal.ts fichier TypeScript pour expliquer le processus bootstrap ?

Cela fait partie du transformé .version JS de main.ts émis par ng build qui n'est pas encore uglified et minified, comment attendez-vous qu'un débutant comprenne ce code? n'est-il pas l'air beaucoup plus 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 uglifie et minimise votre code afin de l'optimiser, les bundles générés sont compacts et sont au format peu illisible.

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 principal.le fichier ts est lisible par l'homme et lucide, c'est pourquoi le angular.io utilise principal.ts pour expliquer le processus de bootstrap d'application angulaire.Angulaire: Pourquoi Tapuscrit? en dehors de cela, si vous aviez été un auteur d'un si grand cadre, quelle approche vous auriez utilisé pour rendre votre cadre populaire et convivial? n'iriez-vous pas pour une explication claire et concise plutôt qu'une explication compliquée? Je suis d'accord angular.io la documentation manque d'explication en profondeur et ce n'est pas assez génial, mais pour autant que je l'ai vu, ils s'efforcent de le rendre meilleur.

1
répondu Vikas 2018-03-01 21:17:05

Comment construit angulaire ?

Le Angular CLI appels Webpack lorsque Webpack frappe un .ts fichier il passe à TypeScript Compilateur qui a un transformateur de sortie, qui est une compilation Angular modèles

Donc, la séquence de construction est:

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

Comment fonctionne angulaire ?

Angular bootstraps et s'exécute en utilisant le fichier Javascript.

En fait, le processus d'amorçage est en cours d'exécution et se produit avant d'ouvrir le navigateur. Cela nous amène à notre question suivante.

Donc, si le processus d'amorçage se produit avec Javascript file alors pourquoi Angular Docs utilise main.ts fichier TypeScript pour expliquer le processus d'amorçage ?

Angular Docs parle juste 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.

Crédits va à @Toxicable pour répondre à mes questions dans le chat.

0
répondu stom 2018-02-26 07:27:42