Структура проекта Angular

[IgorKulishov]

Структура проекта Angular

Смотри видео курс 3: "angular4/videokurs/part1/block1/block1_3.html" Открой файлы проекта после генерации проекта и просмотри файлы и папки.

Основные файлы и папки описаны в видео уроке и перечислены ниже. Содержимое ниже не в полной мере соответствует видео уроку. Я старался уделить больше внимания важным моментам к примеру файлам package.json, .angular-cli.json, tsconfig.json и папке dist. Я буду добавлять содержимое этого задания о чем сообщю.

Файлы:

Файлы расположены в порядке объяснения в видео уроке, тем не менее обрати внимание на важные файлы package.json, .angular-cli.json, tsconfig.json

1. .angular-cli.json

Конфигурационный файл проекта Angular Рассмотрим пока основные свойства конфигурационного проекта (обзорно).

• в свойстве project название и описание проекта:

  "project": {
  "name": "my-F1-racing-project"
  }

• в свойстве файла apps находятся основные конфигурации проекта:

  "apps": [
  {
    "root": "src",
    "outDir": "dist",
    "assets": [
      "assets",
      "favicon.ico"
    ],
    "index": "index.html",
    "main": "main.ts",
    "polyfills": "polyfills.ts",
    "test": "test.ts",
    "tsconfig": "tsconfig.app.json",
    "testTsconfig": "tsconfig.spec.json",
    "prefix": "app",
    "styles": [
      "../node_modules/bootstrap/dist/css/bootstrap.css",
      "styles.css"
    ],
    "scripts": [],
    "environmentSource": "environments/environment.ts",
    "environments": {
      "dev": "environments/environment.ts",
      "prod": "environments/environment.prod.ts"
    }
  }
  ]

  Рассмотрим основные свойства входящие внутрь свойства apps:

• "root": "src" - указывает на папку в которой находятся файлы проекта

• "outDir": "dist" - указывает на папку в которую будут помещены конечных файлов включая .html, .css и *.js (javascript откомпелированных typescript файлов) готовых к размещению на сервере и загрузке в браузер;

• "assets": [ ] - указывает в каких папках и файлах находятся файлы с изображениями

• "index": "index.html" - указывает на основной index.html файл html нашего приложения

• "main": "main.ts" - указывает на основной ts файл приложения, который в свою очередь включает (импортирует) в себя все остальные файлы приложения (мы разберем как осуществляется импорт файлов и модулей).

• "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.css", "styles.css" ] - указывает на файлы в которых содержаться css (или scss) стили и классы

• "environments":

  "environments": {
      "dev": "environments/environment.ts",
      "prod": "environments/environment.prod.ts"
    }

  "environments" - указывает на массив конфигурационных файлов в котором содержаться константы angular приложения для использования их внутри файлов, к примеру это могут быть пути url к удаленным серверам. Как мы видем в поле "environment" может находиться несколько файлов, это для того что бы иметь для каждого окружения разные наборы констант (environment variables), к примеру url удаленных серверов могут отличаться для работы на локальном компьютере от url для производства. Можно создавать множество таких файлов помечая их соответственно (название произвольно).

К примеру в нашем случае файл для среды разработки имеет название поля "dev", а для производства "prod" (эти названия полей мы будем указать в команде в терминале при построении приложения, смотри ниже).

Мы так же можем добавить столько файлов окружения сколько нам надо для работы (сколько у нас есть вариантов окружений).

Каждый раз когда мы строим приложения, нам надо указывать в командной строке какой именно файл нам надо использовать (переменные из какого файла нам использовать для построения приложения). К примеру для приложения dev:

ng serve --dev

На самом деле название режима dev является встроенным и поэтому этот режим работает по-умолачнию (без указания флана в командной строке), так что можно просто указать:

ng serve

В обоих случаях (ng serve --dev и ng serve) будет использоваться конфигурационный файл "environments/environment.ts". Как правило этот режим используется для работы на локальном компьютере. Позже мы рассмотрим содержимое конфигурационных файлов "environment.json".

Для запуска prod (production) режима cоответственно, если запустить в режиме:

ng serve --prod

тогда конфигурационные данные будут подгружаться из файла "environments/environment.prod.ts"

Можно добавлять новые режимы для этого их надо добавить в свойство "environments" и указывать при запуске в терминале.

2. .editorconfig

Рассказывается в видео уроке.

3. .gitignore

Перечень файлов и папок, которые мы хотим исключить из коммита в git. Примером могут быть папки node_modules (в которую копируются файлы разработанные другими компаниями и которые используются проектом angular, к примеру модуль bootstrap) и dist (папка в которую копируются откомпелированные файлы JS при процессе компиляции исходных файолов typescript, эта папка как правило указывается в файле tsconfig.json как путь куда надо компелировать файлы).

4. tsconfig.json

Конфигурация typescript нашего проекта. Поскольку angular использует typescript нам надо указать в какую версию JS надо компилировать файлы проекта (JS ES5 или JS ES5). Кроме того указать где находятся исходные файлы typescript и в какую папку копировать конечные откомпилированные файлы проекта javascript.

5. karma.conf.js

Конфигурационный файл для unit test (модульных тестов). Будем отдельно проходить. Для запуска модульных тестов необходимо набрать в терминале команду:

ng test

Модульные тесты пишуться на каждый функциональный блок самими программистами (если следовать современной методологии TDD - test driven development (которой пока мало кому удается придерживаться), то тест должен быть написан до того как пишется сам код ). Мы будем позже изучать как писать модульные тесты (после того как закончим основы Angular). Модульные тесты проверяют работу написанного кода (логики) и пишуться на языке самого кода, к примеру в angular это typescript (javascript). Модульные тесты не проверяют что пользователь видет в браузере (т.е. не проверяют html и css).

6. protractor.conf.json

Конфигурационный файл для e2e (end-to-end) тестов. e2e тесты (в отличии от unit test) проверяют работу от начала до конца работу приложения, т.е. проверяют что пользователь видет в браузере. Программа protractor пробегает по html и проверяет наличие инфрпмации в html внутри тех или иных tags в браузере. Для запуска e2e test необходимо запустить в командной строке:

ng e2e

7. package.json

Один из самых основных конфигурационных файлов любого проекта, который использует приложение по работе с модулями "npm" (не только angular, но и почти всех современных javascript фраймворков), в котором указывается вся информация о нашем проекте и модулях используемых нашим приложением.

package.json это конфигурационный файл используемый npm (node package manager) для скачивания в локальный проект всех модулей с удаленных репозитариев в папку node_modules внутри папки нашего проекта. К модулям используемым нашим приложением относятся к примеру и сам angular ("@angular" modules - как правило названия angular модулей имеют символ "@" перед словом "angular"), css bootstrap.

Рассмотрим что находится внутри package.json:

• название и версия нашего проекта

  "name": "my-F1-racing-app",
  "version": "0.0.1",

• опционально можно добавить описание проекта, информацию о разработчике и путь к git репозитарию, так что другие разработчики смогут использовать наше приложение

  "description": "my F1 racing app shows teams results",
  "repository": "",
  "author": ""

• все модули разработанные другими компаниями или разработчиками (third parties modules) и используемые нашим приложением находятся внутри поля "dependencies". Напротив каждого используемого модуля указывается версия модуля используемая нашим приложением, к примеру:

  "dependencies": {
  "@angular/animations": "4.2.6",
  "@angular/common": "4.2.6",
  "@angular/compiler": "4.2.6",
  "@angular/core": "4.2.6",
  "@angular/forms": "4.2.6",
  "@angular/http": "4.2.6",
  "bootstrap": "4.0.0-beta.2x"
  }

• все модули разработанные другими компаниями или разработчиками (third parties modules) и используемые для рабочей среды (не для самого приложения). Примером может служить typescript, который необходим для компиляции кода typescript в javascript, karma и protractor среды для запуска unit и e2e тестов. Модули используемые для рабочей среды указываются внутри поля devDependencies вместе с версиями:

  "devDependencies": {
  "tslint": "^4.5.1",
  "typescript": "2.3",
  "protractor": "^5.1.1",
  "karma": "^1.4.1"
  }

  Примечание: знак "^" перед версией означает данную версию и выше. По синтасису версий можно отдельно почитать документацию https://docs.npmjs.com/files/package.json

Выдержки из документации:

version Must match version exactly
>version Must be greater than version
>=version etc
<version
<=version
~version "Approximately equivalent to version" See semver
^version "Compatible with version" See semver
1.2.x 1.2.0, 1.2.1, etc., but not 1.3.0
http://... See 'URLs as Dependencies' below
* Matches any version
"" (just an empty string) Same as *
version1 - version2 Same as >=version1 <=version2.
range1 || range2 Passes if either range1 or range2 are satisfied.
git... See 'Git URLs as Dependencies' below
user/repo See 'GitHub URLs' below
tag A specific version tagged and published as tag See npm-dist-tag
path/path/path See Local Paths below

8. tsconfig.json

9. tslint.json

Папки:

1. node_modules

папка в которую npm копирует все модули указанные в package.json. Файлы внутри используются приложением или служат для работы приложения.

2. dist

Папка в которую копируются:

• файлы javascript после компилиции typescript файлов кода проекта.
• html и css файлы проекта
• а так же файлы используемые нашим приложением из папки node_modules (описаные внутри dependencies файла package.json (к примуре @angular, bootstrap и т.д.)

При запуске нашего angular проекта командой ng serve - приложение angular cli запускает сервер и загружает в браузер файлы именно из папки "dist". Так же когда нам надо разместить наш готовый проект на удаленном сервере мы будем брать файлы из папки "dist" и копировать (deploy process) все файлы на удаленный сервер с которого происходит hosting нашего сайта.

Просмотри содержимое папки созданного проекта. Просмотри видео и прочитай данный урок. Отпиши мне свои вопросы.

[g1er]

В принципе мне все ясно. Твое описание определенно более подробное. Я наверно даже сохраню это твое описание, чтобы пользоваться как шпаргалкой, если забуду что-то или захочу вспомнить про какой-то параметр. Насчет вопросов могу только спросить насчет тестирования. В видео говорят, что тестирования (юнит и е2е) в данном курсе затрагиваться не будет, потому что тема большая. Насколько это вообще актуально? Тестирование проводит сам разработчик или есть отдельная команда тестеров, которые знают процесс тестирования (юнит и е2е)? Т.е. должен ли я уметь проводить тестирование или этот навык будет плюсом, но не обязателен? Почему автор считает, что в курсе изучения ангуляра процесс тестирования не нужен?

[IgorKulishov]

Unit test

• пишет сам девелопер
• проверяется функциональная часть (код javascript или typescript) на соответствие требованиям при различных сценариях и не отказоустойчивость (пример если передаваемый параметр не определен или имеет другой тип данных, функция должна правильно завершить работу и желательно выдать сообщение об ошибке)
• редко проверяет содержимое html или стили css
• если тестируемая функциональная часть зависит в свою очередь от каких либо других функциональных блоков, которые не входят в тест, то как правило такие блоки заменяются в самом тесте на фейковые (mocking). Мы будем изучать и делать unit tests.

[IgorKulishov]

e2e End to end test

• пишется как правило QA (quality assurance) специалистом, хотя приветствуется знание, но на практике это не требуется от программиста
• проверяется полностью все приложение на отображение информации в браузере с точки зрения пользователя (используются специальные тестовые приложения такие как protractor для e2e тестирования angular приложений)
• при прогонке e2e тестов выполняются последовательность действий (сценарии) начиная со страницы login, вход в систему с тестовым пользователем, при удачном входе далее переход на страницу(ы) сайта с проверкой вывода на экран информации и работы кпопок (на выполнение нажатий) и далее выход из системы
• при тестировании тестовые программы (protractor) используют html селекторы тестируемого web приложения (tags, classes, attributes).
• лучшая практика создавать специальные html атрибуты для тестовой программы что бы использовать их для тестирования. Как правило эти атрибуты уникальны для каждого тестируемого поля.

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

Для проверки содержимого полей или даже для осуществления нажатий на кнопки или линки мы можем использовать придуманый нами атрибут data-test и присваивать ему уникальные значения для каждого отельного тестируемого поля или кнопки для использования в качестве селекторов (см. селекторы для атрибутов JS https://learn.javascript.ru/css-selectors).

К примеру:

• для проверки и обращения к форме и её дочерним элементам мы присвоим атрибуту значение data-test="registration-form"
• а для проверки значения label поля input соответственно: data-test="input-field-label":

  <form data-test="registration-form">
  <label for="male" data-test="input-field-label">Male</label>
  <input type="text" name="gender" id="male" value="male">
  <input type="submit" value="Submit">
  </form>

  Таким образом во-время тестов используя атрибуты созданные для тестов и их уникальные значения, которые можно использовать как селекторы и обратиться как к form (или вложеным элементам) так и label. В примере выше:

• тестовая программа может проверить наличие "Male" label обратившись к селектору data-test="input-field-label"
• а так же обратиться к form через data-test="registration-form". Используя селектор data-test="registration-form" можно обратитья к любому вложенному элементу внутри form и проверить содержимое и даже осуществить нажатие кнопки submit.

В самом тесте с исползованием атрибутов обращение к атрибутам будет примерно так [data-test="registration-form"].

Дополнительно: Для кругозора как обращаться к атрибутам в JavaScript описано https://learn.javascript.ru/attributes-and-custom-properties Посмотри в частности как можно читать и менять значение атрибута value:

<body>
  <input id="input" type="text" value="markup">
  <script>
    input.setAttribute('value', 'new'); // поменяли атрибут

    alert( input.value ); // 'new', input.value изменилось!
  </script>
</body>