Angular учебник
Начало работы с угловым
Поиск…
замечания
Угловая (обычно называемая « Угловая 2+ » или « Угловая 2 ») является основанной на TypeScript интерфейсом веб-интерфейса с открытым исходным кодом под управлением Angular Team в Google и сообществом частных лиц и корпораций для рассмотрения всех части рабочего процесса разработчика при создании сложных веб-приложений. Угловая - это полная перепись от той же команды, которая построила AngularJS . ¹
Структура состоит из нескольких библиотек , некоторые из которых являются ядром (например, угловым / ядром ) и некоторыми необязательными ( @ angular / animations ).
Вы пишете угловые приложения, создавая HTML- шаблоны с помощью Angularized markup, пишите классы компонентов для управления этими шаблонами, добавляя логику приложения в сервисах , а также компоненты и услуги бокса в модулях .
Затем вы запускаете приложение, загружая корневой модуль . Угловая передача, представление содержимого приложения в браузере и реагирование на взаимодействие пользователя в соответствии с инструкциями, которые вы предоставили.
Возможно, наиболее важной частью разработки приложений с угловыми углами являются компоненты . Компонент представляет собой комбинацию HTML-шаблона и класса компонентов, который контролирует часть экрана. Ниже приведен пример компонента, который отображает простую строку:
SRC / приложение / app.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>` }) export class AppComponent { name = 'Angular'; }
Каждый компонент начинается с @Component декоратора @Component которая принимает объект метаданных . Объект metadata описывает, как HTML-шаблон и класс компонента работают вместе.
Свойство selector указывает Angular на отображение компонента внутри пользовательского <my-app> в файле index.html .
index.html (внутри тега
body)<my-app>Loading AppComponent content here ...</my-app>
Свойство template определяет сообщение внутри заголовка <h1> . Сообщение начинается с «Hello» и заканчивается на {{name}} , который является выражением привязки угловой интерполяции . Во время выполнения Angular заменяет {{name}} на значение свойства name компонента. Связывание с интерполяцией является одной из многих функций Angular, которые вы найдете в этой документации. В этом примере измените свойство name класса компонента на 'Angular' на 'World' и посмотрите, что произойдет.
Этот пример написан в TypeScript , надмножестве JavaScript. Angular использует TypeScript, потому что его типы упрощают поддержку производительности разработчика с помощью инструментария. Кроме того, почти вся поддержка для TypeScript и поэтому использование простого JavaScript для написания вашего приложения будет затруднительным . Написание Углового кода в JavaScript возможно, однако; это руководство объясняет, как это сделать.
Более подробную информацию об архитектуре Angular можно найти здесь
Версии
| Версия | Дата выхода |
|---|---|
| 5.0.0-beta.1 (последний) | 2017-07-27 |
| 4.3.2 | 2017-07-26 |
| 5.0.0-beta.0 | 2017-07-19 |
| 4.3.1 | 2017-07-19 |
| 4.3.0 | 2017-07-14 |
| 4.2.6 | 2017-07-08 |
| 4.2.5 | 2017-06-09 |
| 4.2.4 | 2017-06-21 |
| 4.2.3 | 2017-06-16 |
| 4.2.2 | 2017-06-12 |
| 4.2.1 | 2017-06-09 |
| 4.2.0 | 2017-06-08 |
| 4.2.0-РК-2 | 2017-06-01 |
| 4.2.0-RC.1 | 2017-05-26 |
| 4.2.0-rc.0 | 2017-05-19 |
| 4.1.3 | 2017-05-17 |
| 4.1.2 | 2017-05-10 |
| 4.1.1 | 2017-05-04 |
| 4.1.0 | 2017-04-26 |
| 4.1.0-rc.0 | 2017-04-21 |
| 4.0.3 | 2017-04-21 |
| 4.0.2 | 2017-04-11 |
| 4.0.1 | 2017-03-29 |
| 4.0.0 | 2017-03-23 |
| 4.0.0-rc.6 | 2017-03-23 |
| 4.0.0-rc.5 | 2017-03-17 |
| 4.0.0-rc.4 | 2017-03-17 |
| 2.4.10 | 2017-03-17 |
| 4.0.0-rc.3 | 2017-03-10 |
| 2.4.9 | 2017-03-02 |
| 4.0.0-РК-2 | 2017-03-02 |
| 4.0.0-RC.1 | 2017-02-24 |
| 2.4.8 | 2017-02-18 |
| 2.4.7 | 2017-02-09 |
| 2.4.6 | 2017-02-03 |
| 2.4.5 | 2017-01-25 |
| 2.4.4 | 2017-01-19 |
| 2.4.3 | 2017-01-11 |
| 2.4.2 | 2017-01-06 |
| 2.4.1 | 2016-12-21 |
| 2.4.0 | 2016-12-20 |
| 2.3.1 | 2016-12-15 |
| 2.3.0 | 2016-12-07 |
| 2.3.0-rc.0 | 2016-11-30 |
| 2.2.4 | 2016-11-30 |
| 2.2.3 | 2016-11-23 |
| 2.2.2 | 2016-11-22 |
| 2.2.1 | 2016-11-17 |
| 2.2.0 | 2016-11-14 |
| 2.2.0-rc.0 | 2016-11-02 |
| 2.1.2 | 2016-10-27 |
| 2.1.1 | 2016-10-20 |
| 2.1.0 | 2016-10-12 |
| 2.1.0-rc.0 | 2016-10-05 |
| 2.0.2 | 2016-10-05 |
| 2.0.1 | 2016-09-23 |
| 2.0.0 | 2016-09-14 |
| 2.0.0-rc.7 | 2016-09-13 |
| 2.0.0-rc.6 | 2016-08-31 |
| 2.0.0-rc.5 | 2016-08-09 |
| 2.0.0-rc.4 | 2016-06-30 |
| 2.0.0-rc.3 | 2016-06-21 |
| 2.0.0-РК-2 | 2016-06-15 |
| 2.0.0-RC.1 | 2016-05-03 |
| 2.0.0-rc.0 | 2016-05-02 |
Установка углового с использованием углового кли
Этот пример представляет собой быструю настройку Angular и как создать быстрый пример проекта.
Предпосылки:
- Node.js 6.9.0 или выше.
- npm v3 или больше или пряжа .
- Типики v1 или выше.
Откройте терминал и выполните команды один за другим:
npm install -g typings или yarn global add typings
npm install -g @angular/cli или yarn global add @angular/cli
Первая команда устанавливает библиотеку типизации глобально (и добавляет typings исполняемой в PATH). Второй устанавливает @ angular / cli глобально, добавляя исполняемый файл ng к PATH.
Чтобы настроить новый проект
Перейдите с помощью терминала в папку, в которой вы хотите настроить новый проект.
Запустите команды:
ng new PROJECT_NAME
cd PROJECT_NAME
ng serve
Вот и все, у вас теперь есть простой пример, выполненный с помощью Angular. Теперь вы можете перейти к ссылке, отображаемой в терминале, и посмотреть, что она работает.
Чтобы добавить к существующему проекту
Перейдите в корень вашего текущего проекта.
Выполните команду:
ng init
Это добавит необходимые строительные леса в ваш проект. Файлы будут созданы в текущем каталоге, поэтому обязательно запустите его в пустой директории.
Выполнение проекта локально
Чтобы видеть и взаимодействовать с вашим приложением во время работы в браузере, вы должны запустить локальный сервер разработки, в котором размещаются файлы для вашего проекта.
ng serve
Если сервер успешно запущен, он должен отображать адрес, на котором работает сервер. Обычно это:
http://localhost:4200
Исходя из этого, этот локальный сервер разработки подключается с помощью Hot Module Reloading, поэтому любые изменения в html, машинописном тексте или css приведут к тому, что браузер будет автоматически перезагружен (но может быть отключен по желанию).
Создание компонентов, директив, труб и услуг
Команда ng generate <scaffold-type> <name> (или просто ng g <scaffold-type> <name> ) позволяет автоматически генерировать угловые компоненты:
# The command below will generate a component in the folder you are currently at
ng generate component my-generated-component
# Using the alias (same outcome as above)
ng g component my-generated-component
# You can add --flat if you don't want to create new folder for a component
ng g component my-generated-component --flat
# You can add --spec false if you don't want a test file to be generated (my-generated-component.spec.ts)
ng g component my-generated-component --spec false
Существует несколько возможных типов лесов, которые могут генерировать угловые cli:
| Тип лесов | использование |
|---|---|
| модуль | ng g module my-new-module |
| Составная часть | ng g component my-new-component |
| директива | ng g directive my-new-directive |
| труба | ng g pipe my-new-pipe |
| обслуживание | ng g service my-new-service |
| Учебный класс | ng g class my-new-class |
| Интерфейс | ng g interface my-new-interface |
| Enum | ng g enum my-new-enum |
Вы также можете заменить имя типа своей первой буквой. Например:
ng gm my-new-module для создания нового модуля или ng gc my-new-component для создания компонента.
Строительство / Пакетирование
Когда вы все закончите создание своего приложения с угловым веб-сайтом, и вы хотите установить его на веб-сервере, таком как Apache Tomcat, все, что вам нужно сделать, это запустить команду сборки либо с установленным флагом, либо без него. Производство будет минимизировать код и оптимизировать производственные параметры.
ng build
или же
ng build --prod
Затем зайдите в корневой каталог проектов для папки /dist , которая содержит сборку.
Если вы хотите получить преимущества небольшого пакета продуктов, вы также можете использовать компиляцию шаблона Ahead-of-Time, которая удаляет компилятор шаблона из окончательной сборки:
ng build --prod --aot
Тестирование устройства
Угловое обеспечивает встроенное модульное тестирование, и каждый элемент, созданный угловым кли, генерирует базовый единичный тест, который может быть израсходован. Модульные тесты записываются с использованием жасмина и выполняются через Карму. Чтобы начать тестирование, выполните следующую команду:
ng test
Эта команда выполнит все тесты в проекте и будет повторно выполнять их каждый раз при изменении исходного файла, будь то тест или код из приложения.
Для получения дополнительной информации также посетите страницу angular-cli github
Угловая программа «Hello World»
Предпосылки:
Настройка среды разработки
Прежде чем мы начнем, мы должны настроить нашу среду.
Установите Node.js и npm, если они еще не установлены на вашем компьютере.
Убедитесь, что вы используете хотя бы узел 6.9.x и npm 3.xx, запустив узел -v и npm -v в окне терминала / консоли. Более старые версии вызывают ошибки, но более новые версии - это хорошо.
Установите Угловую CLI глобально, используя
npm install -g @angular/cli.
Шаг 1. Создание нового проекта.
Откройте окно терминала (или командную строку Node.js в окнах).
Мы создаем новое приложение проекта и скелета, используя команду:
ng new my-app
Здесь ng для углового. Мы получаем файловую структуру примерно так.
Есть много файлов. Теперь нам не нужно беспокоиться обо всех них.
Шаг 2: Обслуживание приложения
Мы запускаем наше приложение, используя следующую команду:
ng serve
Мы можем использовать флаг -open (или просто -o ), который автоматически откроет наш браузер на http://localhost:4200/
ng serve --open
Перейдите в браузер по адресу http://localhost:4200/ . Это выглядит примерно так:
Шаг 3: Редактирование нашего первого углового компонента
CLI создал для нас Угловой компонент по умолчанию. Это корневой компонент, и он называется app-root . Его можно найти в ./src/app/app.component.ts .
Откройте файл компонента и измените свойство title из Welcome to app!! к Hello World . Браузер автоматически перезагружается с измененным заголовком.
Исходный код: Обратите внимание на title = 'app';
Измененный код: изменяется значение title .
Аналогичным образом происходит изменение ./src/app/app.component.html .
Оригинальный HTML
Измененный HTML
Обратите внимание, что будет отображаться значение title из ./src/app/app.component.ts . Браузер автоматически перезагружается при выполнении изменений. Это выглядит примерно так.
Чтобы узнать больше по этой теме, перейдите по этой ссылке здесь .