Базовая архитектура
Давай разберемся какой проект мы получили в результате и из каких основных файлов состоят все Angular 2 проекты.
Каталог src
Приложение находится в папке src. Все Angular 2 компоненты, шаблоны, стили, изображения и все остальное, что нужно вашему приложению, можно найти здесь. Любые файлы за пределами этой папки предназначены для запуска/сборки вашего приложения.
| File | Purpose | |
|---|---|---|
| app/app.component.{ts,html,css,spec.ts} | Defines the AppComponent along with an HTML template, CSS stylesheet, and a unit test. It is the root component of what will become a tree of nested components as the application evolves. | |
| app/app.module.ts | Defines AppModule, the root module that tells Angular how to assemble the application. Right now it declares only the AppComponent. Soon there will be more components to declare. | |
| assets/* | A folder where you can put images and anything else to be copied wholesale when you build your application. | |
| environments/* | This folder contains one file for each of your destination environments, each exporting simple configuration variables to use in your application. The files are replaced on-the-fly when you build your app. You might use a different API endpoint for development than you do for production or maybe different analytics tokens. You might even use some mock services. Either way, the CLI has you covered. | |
| favicon.ico | Every site wants to look good on the bookmark bar. Get started with your very own Angular icon. | |
| index.html | The main HTML page that is served when someone visits your site. Most of the time you'll never need to edit it. The CLI automatically adds alljsandcssfiles when building your app so you never need to add any<script>or<link>tags here manually. | |
| main.ts | The main entry point for your app. Compiles the application with the JIT compiler and bootstraps the application's root module (AppModule) to run in the browser. You can also use the AOT compiler without changing any code by passing in--aot to ng build or ng serve. | |
| polyfills.ts | Different browsers have different levels of support of the web standards. Polyfills help normalize those differences. You should be pretty safe with core-js and zone.js, but be sure to check out the Browser Support guide for more information. | |
| styles.css | Your global styles go here. Most of the time you'll want to have local styles in your components for easier maintenance, but styles that affect all of your app need to be in a central place. | |
| test.ts | This is the main entry point for your unit tests. It has some custom configuration that might be unfamiliar, but it's not something you'll need to edit. | |
| tsconfig.{app\ | spec}.json | TypeScript compiler configuration for the Angular app (tsconfig.app.json) and for the unit tests (tsconfig.spec.json). |
Корневой каталог
Каталог src/это только один из элементов в корневой папке проекта. Другие файлы помогают вам создавать, тестировать, документировать и развертывать приложение. Эти файлы находятся в корневом каталоге рядом с src/.
| File | Purpose |
|---|---|
| e2e/ | Inside e2e/ live the End-to-End tests. They shouldn't be inside src/ because e2e tests are really a separate app that just so happens to test your main app. That's also why they have their own tsconfig.e2e.json. |
| node_modules/ | Node.js creates this folder and puts all third party modules listed in package.json inside of it. |
| .angular-cli.json | Configuration for Angular CLI. In this file you can set several defaults and also configure what files are included when your project is build. Check out the official documentation if you want to know more. |
| .editorconfig | Simple configuration for your editor to make sure everyone that uses your project has the same basic configuration. Most editors support an .editorconfig file. See http://editorconfig.orgfor more information. |
| .gitignore | Git configuration to make sure autogenerated files are not commited to source control. |
| karma.conf.js | Unit test configuration for theKarma test runner, used when runningng test. |
| package.json | npm configuration listing the third party packages your project uses. You can also add your own custom scripts here. |
| protractor.conf.js | End-to-end test configuration forProtractor, used when running ng e2e. |
| README.md | Basic documentation for your project, pre-filled with CLI command information. Make sure to enhance it with project documentation so that anyone checking out the repo can build your app! |
| tsconfig.json | TypeScript compiler configuration for your IDE to pick up and give you helpful tooling. |
| tslint.json | Linting configuration for TSLint together with Codelyzer, used when running ng lint. Linting helps keep your code style consistent. |
Давайте более детально разберемся из чего состоит Angular приложении, как устроен Angular и что содержится во всех этих файла.
Angular framework состоит из различный библиотек/модулей. Некоторые из них обязательные, а других мы может использовать по необходимости.
Angular приложения состоят из HTML-шаблонов, классов компонентов (необходимы для управления этими шаблонами), сервисов (содержал логику приложения).
Angular имеет 8 основный стоительных блоков/инструментов. Которые позволяют нам создавать приложения.
Modules
Components
Templates
Metadata
Data binding
Directives
Services
Dependency injection
