Как Угловая строит и работает

Ответ 1

(Когда я говорю "Угловое", я имею в виду "Угловое" 2+ и явно укажу угловое js, если упомянуть угловой 1).

Прелюдия: это путают

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

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

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

Угловая: что она делает?

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

Быть (слегка) более конкретным:

• Шаблоны позволяют подключать 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 приняла аннотации, и они стали предпочтительным способом выражения метаданных. С# использует атрибуты для выражения метаданных.

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

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

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

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

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

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

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

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

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

Угловой CLI Первые вызовы, угловые встроенные в компилятор, написанные в Typcript =>, затем вызовы Transcript_Precripter =>, а затем вызовы Webpack для связывания и хранения в каталоге dist/.

Нет. Угловые вызовы CLI Webpack (реальная услуга "Угловая CLI" настраивает webpack. Когда вы запускаете ng build это не намного больше, чем прокси для запуска Webpack). Webpack сначала вызывает компилятор TypScript, а затем угловой компилятор (при условии AOT), все одновременно связывая ваш код.

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

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

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

Просмотр компилятора

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

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

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

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

Не @Me: Угловая делает больше, чем инъекции зависимости

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

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

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

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

Ответ 2

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

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

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

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

  }

Когда мы запускаем webpack --progress она начинает читать файл webpack.config.js где находит точку входа, как 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 компонента и заменяет пути соответствующей инструкцией require.

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-сервер --inline, он создаст собственный сервер и загрузит приложение в качестве пути, указанного в файле web-pack.config.js где мы упомянули папку назначения и точку входа.

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

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

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

Ответ 3

Итак, если процесс начальной загрузки происходит с файлом 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";nd(e,"a",function(){return r});var r=Array.isArray||function(t){return t&&"number"==typeof t.length}},"2kLc

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

Ответ 4

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

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

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

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

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

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

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

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

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

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

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