Как Angular создается и запускается

Просто хотите узнать, как Angular создается и работает за кулисами?

Ниже то, что я понял до сих пор. Хочу узнать, не упустил ли я что-нибудь.

Как создается Angular

После кодирования наших приложений Angular с использованием TypeScript мы используем команду Angular CLI для создания приложения.

ng buildкоманда компилирует приложение в выходной каталог, и артефакты сборки будут храниться в этом dist/каталоге.

Внутренний процесс

1. Angular CLI запускает Webpack для сборки и объединения всего кода JavaScript и CSS.

2. В свою очередь, Webpack вызывает загрузчики TypeScript, которые извлекают все .tsфайлы в проекте Angular и затем переносят их в JavaScript, то есть в .jsфайл, который могут понять браузеры.

В этом посте говорится, что в Angular есть два компилятора:

• Просмотреть компилятор

• Компилятор модуля

Вопросы по сборкам

Какая последовательность вызова процесса сборки?

Angular CLI сначала вызывает встроенный компилятор Angular, написанный на TypeScript =>, затем вызывает TypeScript Transpiler =>, затем вызывает Webpack для связывания и сохранения в dist/каталоге.

Как работает Angular

Когда сборка завершена, все компоненты нашего приложения, службы, модули и т. Д. Переносятся в JavaScript .jsфайлы, которые используются для запуска приложения Angular в браузере.

Заявления в Angular Docs

1. Когда вы AppComponentзапускаете класс (в main.ts), Angular ищет <app-root>в index.html, находит его, создает экземпляр AppComponent и отображает его внутри <app-root>тега.

2. Angular создает, обновляет и уничтожает компоненты по мере того, как пользователь перемещается по приложению.

Вопросы по пробегам

Хотя main.tsв приведенном выше утверждении используется для объяснения процесса начальной загрузки, разве приложение Angular не загружается или запускается с использованием .jsфайлов JavaScript ?

Разве все приведенные выше инструкции не выполняются во время выполнения с использованием .jsфайлов JavaScript ?

Кто-нибудь знает, как по глубине сочетаются все части?

(Когда я говорю Angular, я имею в виду Angular 2+ и явно говорю angular-js, если я упоминаю angular 1).

Прелюдия: сбивает с толку

Angular и, вероятно, более точно angular-cli объединили в Javascript ряд инструментов, которые участвуют в процессе сборки. Это действительно приводит к некоторой путанице.

Чтобы усугубить путаницу, этот термин compileчасто использовался в angular-js для обозначения процесса взятия псевдо-html шаблона и превращения его в элементы DOM. Это часть того, что делает компилятор, но одна из меньших частей.

Прежде всего, нет необходимости использовать TypeScript, angular-cli или Webpack для запуска Angular. Чтобы ответить на ваш вопрос. Мы должны ответить на простой вопрос: «Что такое Angular?»

Angular: что он делает?

Этот раздел может быть спорным, мы увидим. По своей сути сервис, предоставляемый Angular, представляет собой механизм внедрения зависимостей, который работает с Javascript, HTML и CSS. Вы пишете все маленькие кусочки индивидуально, и в каждом маленьком кусочке вы следуете правилам Angular для ссылок на другие части. Angular как-то переплетает это все вместе.

Чтобы быть (немного) более конкретным:

• Шаблоны позволяют встраивать HTML в компонент Javascript. Это позволяет пользователю вводить данные в самой DOM (например, щелкать кнопку) для передачи в компонент Javascript, а также позволяет переменным в компоненте Javascript управлять структурой и значениями в DOM.
• Классы Javascript (включая компоненты Javascript) должны иметь возможность доступа к экземплярам других классов Javascript, от которых они зависят (например, классическая инъекция зависимостей). BookListComponent нуждается в экземпляре BookListService, которому может потребоваться экземпляр BookListPolicy или что-то в этом роде. Каждый из этих классов имеет разное время жизни (например, службы обычно являются одиночными, компоненты обычно не одиночными), и Angular должен управлять всеми этими сроками жизни, созданием компонентов и связью зависимостей.
• Правила CSS нужно было загружать таким образом, чтобы они применялись только к подмножеству DOM (стиль компонента является локальным для этого компонента).

Возможно, важно отметить, что Angular не несет ответственности за то, как файлы Javascript ссылаются на другие файлы Javascript (например, importключевое слово). Об этом позаботится Webpack.

Что делает компилятор?

Теперь, когда вы знаете, что делает Angular, мы можем поговорить о том, что делает компилятор. Я не буду вдаваться в технические подробности, главным образом потому, что я невежественен. Однако, в системе впрыска зависимостей вы обычно должны выражать свои зависимости с какой - то метаданных (например , как делает класс скажем I can be injected, My lifetime is blahили You can think of me as a Component type of instance). В Java Spring изначально делал это с файлами XML. Позднее в Java были приняты аннотации, и они стали предпочтительным способом выражения метаданных. C # использует атрибуты для выражения метаданных.

Javascript не имеет отличного механизма для раскрытия этих встроенных метаданных. angular-js предпринял попытку, и это было неплохо, но было много правил, которые нелегко проверить, и которые немного сбивали с толку. В Angular есть два поддерживаемых способа указания метаданных. Вы можете написать чистый Javascript и указать метаданные вручную, что-то вроде angular-js, и просто продолжать следовать правилам и писать лишний шаблонный код. В качестве альтернативы вы можете переключиться на TypeScript, который, как оказалось, имеет декораторы (эти @символы), которые используются для выражения метаданных.

Итак, вот где мы наконец можем добраться до компилятора. Задача компилятора - взять эти метаданные и создать систему рабочих частей, которая является вашим приложением. Вы сосредотачиваетесь на всех частях и всех метаданных, а компилятор создает одно большое взаимосвязанное приложение.

Как компилятор это делает?

Компилятор может работать двумя способами: во время выполнения и с опережением времени. С этого момента я предполагаю, что вы используете TypeScript:

• Время выполнения: когда компилятор машинописного текста запускается, он берет всю информацию декоратора и вставляет ее в код Javascript, прикрепленный к декорированным классам, методам и полям. В вашем index.htmlвы ссылаетесь на ваш, main.jsкоторый вызывает bootstrapметод. Этот метод передается вашему модулю верхнего уровня.

Метод начальной загрузки запускает компилятор среды выполнения и дает ему ссылку на этот модуль верхнего уровня. Затем компилятор среды выполнения начинает сканирование этого модуля, всех служб, компонентов и т. Д., На которые ссылается этот модуль, и всех связанных метаданных, и создает ваше приложение.

• АОТ: Вместо того, чтобы выполнять всю работу во время выполнения, Angular предоставил механизм для выполнения большей части работы во время сборки. Это почти всегда делается с помощью плагина webpack (это должен быть один из самых популярных, но наименее известных пакетов npm). Он запускается после выполнения компиляции машинописного текста, поэтому видит практически тот же ввод, что и компилятор среды выполнения. Компилятор AOT создает ваше приложение так же, как компилятор среды выполнения, но затем сохраняет его обратно в Javascript.

Преимущество здесь не только в том, что вы можете сэкономить процессорное время, необходимое для самой компиляции, но и в том, что это позволяет уменьшить размер вашего приложения.

Конкретные ответы

Angular CLI Сначала вызывает angular встроенный компилятор, написанный на Typescript =>, затем вызывает Typescript Transpiler =>, затем вызывает Webpack для объединения и сохранения в каталоге dist /.

Нет. Angular CLI вызывает Webpack (настоящая служба Angular CLI настраивает webpack. Когда вы запускаете, ng buildэто не более чем прокси для запуска Webpack). Webpack сначала вызывает компилятор Typescript, а затем компилятор angular (при условии AOT), при этом одновременно объединяя ваш код.

Хотя main.ts используется в заявлении выше для объяснения процесса начальной загрузки, разве приложение angular не загружается или запускается с использованием файлов Javascript .js?

Я не совсем уверен, о чем вы здесь спрашиваете. main.tsбудет скопирован в Javascript. Этот Javascript будет содержать вызов, bootstrapкоторый является точкой входа в Angular. Когда bootstrapэто будет сделано, у вас будет запущено полное приложение Angular.

В этом посте говорится, что в Angular есть два компилятора:

Просмотреть компилятор

Компилятор модуля

Если честно, я просто собираюсь заявить здесь о незнании. Я думаю, что на нашем уровне мы можем думать обо всем как об одном большом компиляторе.

Кто-нибудь знает, как по глубине сочетаются все части?

Я надеюсь, что вышесказанное удовлетворило это.

Don't @ Me: Angular делает больше, чем внедрение зависимостей

Конечно. Он выполняет маршрутизацию, просмотр здания, обнаружение изменений и многое другое. Компилятор действительно генерирует Javascript для построения представления и обнаружения изменений. Я соврал, когда сказал, что это просто инъекция зависимости. Однако внедрение зависимостей лежит в основе и достаточно, чтобы дать остальной ответ.

Стоит ли называть это компилятором?

Вероятно, он выполняет много синтаксического анализа и лексирования и в результате определенно генерирует много кода, поэтому вы могли бы назвать его компилятором по этой причине.

С другой стороны, на самом деле он не переводит ваш код просто в другое представление. Вместо этого он берет кучу разных фрагментов кода и объединяет их в расходные части более крупной системы. Затем процесс начальной загрузки (после компиляции, если необходимо) берет эти части и вставляет их в ядро ​​Angular.

Позвольте мне начать с самого начала.

В моем приложении я напрямую запускаю приложение из Webpack.

Для создания и запуска приложения мы используем команды webpack --progress и webpack-dev-server --inline, которые были написаны, package.jsonкак показано ниже.

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

  }

Когда мы запускаем webpack --progressкоманду, она начинает чтение webpack.config.jsфайла, где находит точку входа, как показано ниже.

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

а затем он читает весь Typescriptфайл и компилирует его на основе правил, объявленных в tsconfig.jsonфайле, а затем конвертирует его в соответствующие .jsфайлы и файл карты.

Если он работает без ошибок компиляции, он создаст bundle.jsфайл с именами, которые мы объявили в разделе Webpackвывода.

Теперь позвольте мне объяснить, почему мы используем загрузчики.

устрашающий-машинопись-погрузчик, angular2-шаблон-погрузчик Мы используем эти загрузчик для компиляции Typescriptфайла на основании объявленного в tsconfig.jsonпоисках файлов и angular2-шаблон-погрузчике templateUrlи styleUrlsвнутренней декларации о угловых 2 компоненте метаданных и заменяют пути с соответствующим требуется заявление.

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

Мы используем приведенный выше раздел разрешения, чтобы сообщить Webpackо преобразовании Typescriptв JavaScriptфайл

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

Раздел плагинов используется для внедрения стороннего фреймворка или файла. В моем коде я использую это для ввода index.htmlпапки назначения.

 devtool: 'source-map',

Вышеупомянутая строка используется для просмотра Typescriptфайла в браузере и его отладки, в основном используемого для кода разработчика.

 loader: 'raw-loader'

Вышеупомянутое raw-loaderиспользуется для загрузки файлов и .htmlи объединения .cssих вместе с Typescriptфайлами.

В конце, когда мы запустим webpack-dev-server --inline, он создаст собственный сервер и загрузит приложение по пути, указанному в web-pack.config.jsфайле, где мы упомянули папку назначения и точку входа.

Во Angularвторой точке входа большинства приложений main.tsмы упоминаем начальный модуль начальной загрузки, например (app.module), этот модуль содержит полную информацию о приложении, такую ​​как все директивы, службы, модули, компоненты и реализацию маршрутизации всего приложения.

Примечание. Многие люди сомневаются в том, зачем index.htmlзагружать только приложение, даже если они нигде не упомянули. Ответ: когда Webpackкоманда serve запускается, она создает собственную службу и по умолчанию загружается, index.htmlесли вы не упомянули какую-либо страницу по умолчанию.

Надеюсь, что данная информация кому-то поможет.

Как Angular строит?

В Angular CLIвызовах Webpack, когда Webpackпопадет в .tsфайл , он передает его в TypeScriptкомпилятор , который имеет выходной трансформатор , который компилирует Angularшаблоны

Итак, последовательность сборки:

Angular CLI=> Webpack=> TypeScriptКомпилятор => TypeScriptКомпилятор вызывает Angularкомпилятор во время компиляции.

Как работает Angular?

Angularзагружается и запускается с использованием Javascriptфайла.

Фактически процесс начальной загрузки - это среда выполнения и происходит до открытия браузера. Это подводит нас к следующему вопросу.

Итак, если процесс начальной загрузки происходит с Javascriptфайлом, то почему AngularDocs использует main.tsфайл TypeScript для объяснения процесса начальной загрузки?

AngularДокументы просто говорят о .tsфайлах, поскольку это источник.

Это краткий ответ. Благодарю, если кто-нибудь может подробно ответить.

Кредиты идут @ Toxicable за ответы на мои вопросы в чате.

Возможно, уже поздно для этого ответа, но недавно на эту тему был действительно хороший разговор, который начинается с точки зрения новичка и идет в глубину. Вместо того, чтобы пытаться резюмировать или указывать на дезинформацию в этой ветке своими словами, я просто свяжу видео Кары Эриксон: Как работает Angular .

Она является техническим руководителем фреймворка Angular и делает действительно хорошую презентацию по:

• каковы основные части Angular framework
• как работает компилятор, что он производит
• что такое "определение компонента"
• Что такое бутстрап приложения, как он работает

Итак, если процесс начальной загрузки происходит с файлом Javascript, то почему Angular Docs использует файл main.ts TypeScript для объяснения процесса начальной загрузки?

Это часть преобразованной .js-версии испускаемого main.ts, ng buildкоторая еще не уменьшена и не уменьшена. Как вы ожидаете, что новичок поймет этот код? не кажется ли это сложным?

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

и с помощью ng build --prod --build-optimizerкоторого искажается и минимизируется ваш код для его оптимизации, сгенерированные пакеты компактны и имеют формат, нечитаемый битами.

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

в то время как файл main.ts удобочитаемый и понятный, поэтому angular.io использует main.ts для объяснения процесса начальной загрузки приложения angular. Angular: почему именно TypeScript? Помимо этого, если бы вы были автором такого замечательного фреймворка, какой подход вы бы использовали, чтобы сделать ваш фреймворк популярным и удобным для пользователя? Вы бы не пошли на ясное и краткое объяснение, а не на сложное? Я согласен, что документации angular.io не хватает подробного объяснения, и это не очень хорошо, но, насколько я видел, они изо всех сил стараются сделать ее лучше.

Angular 9+ использует AOT (Ahead of Time Compilation), что означает, что он берет все биты, разбросанные в различных файлах, то есть компонент (.ts + .html + .css), модули (.ts) и создает понятный для браузера JavaScript, который загружается во время выполнения. и выполняется браузером.

До Angular 9 это была JIT (Just in time Compilation), где код компилировался в соответствии с требованиями браузера.

Подробнее см .: Angular AOT Documentaiton