Узнайте, что нового, и создайте приложение
Angular выпустил свою последнюю версию, Angular 6.0. В этой статье мы разберемся с новыми возможностями Angular 6.0, а также настроим новый проект с помощью Angular CLI 6.0 и Visual Studio Code.
Что нового в Angular 6.0?
обновление ng
Новая команда CLI, которая обновит зависимости вашего проекта до последних версий.
доп
Еще одна новая команда CLI, которая облегчает добавление новых возможностей в ваш проект.
Угловые элементы
Это новая функция, позволяющая нам компилировать компоненты Angular в собственные веб-компоненты, которые мы можем использовать в нашем приложении Angular.
Элемент не поддерживается
Вы больше не можете использовать внутри компоненты шаблонов. Вместо этого нужно использовать
Поддержка библиотеки
Angular CLI теперь поддерживает создание и создание библиотек. Чтобы создать проект библиотеки в рабочем пространстве CLI, выполните следующую команду: ng generate library
Компоненты Angular Material Starter
Если вы запустите «ng add @angular/material», чтобы добавить материал в существующую программу, вы также сможете создать 3 новых начальных компонента:
- Материал Сиденав
Начальный компонент включает панель инструментов с названием программы и боковой навигационной панелью - Материал приборной панели
Компонент начальной информационной панели, содержащий динамический список карт - Таблица данных о материале
Начальный компонент таблицы данных, предварительно настроенный с источником данных для сортировки и разбиения на страницы
Поддержка рабочего пространства
Angular CLI теперь поддерживает рабочие области, содержащие несколько проектов, например несколько программ и/или библиотек.
Файл «.angular-cli.json» не поддерживается
Проекты Angular теперь будут использовать angular.json вместо .angular-cli.json для сборки и конфигурации проекта.
Используйте RxJS V6
Angular 6 также позволит нам использовать RxJS V6 с нашим приложением.
Поставщики дрожания деревьев
Angular 6.0 позволяет нам объединять службы в базу кода в модулях, в которые они вводятся. Это поможет нам снизить нашу программу.
К примеру: раньше мы называли наши услуги, как показано ниже.
// In app.module.ts @NgModule({ ... providers: [MyService] }) export class AppModule {} // In myservice.ts import { Injectable } from '@angular/core'; @Injectable() export class MyService { constructor() { } }Этот подход все еще будет работать, но Angular 6.0 дает новую и простую альтернативу этому. Нам больше не нужно добавлять ссылку в наш NgModule. Мы можем ввести ссылку непосредственно в службу. Поэтому мы можем воспользоваться услугой, как показано ниже:
// In myservice.ts import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root', }) export class MyService { constructor() { } }Это новые функции/улучшения в последнем выпуске Angular. Давайте пойдем дальше и создадим нашу первую программу с помощью Angular 6.0.
Предпосылки
- Установите последнюю версию Node.js об этом
- Установите код Visual Studio об этом
Установка Node.js также установит npm на машину. После установки Node.js откройте командную строку и запустите следующий набор команд, чтобы проверить версию Node и npm, установленную на вашем компьютере.
Обратитесь к картинке ниже:
Теперь, когда мы установили Node и NPM, следующим шагом будет установка Angular CLI. Выполните следующую команду в открывшемся окне команды. Это установит Angular 6.0 CLI глобально на вашу машину.
Откройте VS Code и перейдите к Просмотр >> Интегрированный терминал.
Это откроет окно терминала в VS Code.
Введите следующую последовательность команд в открывшемся окне терминала. Эти команды создадут каталог с названием «ng6Demo”, а затем создайте программу Angular с названием “ng6App” внутри этого каталога.
- mkdir ng6Demo
- компакт-диск ng6Demo
- Новое приложение ng6App
Вот мы и создали нашу первую программу Angular 6 с помощью VS Code и Angular CLI. Теперь выполните команду, чтобы открыть проект.
Обратитесь к картинке ниже:
Это откроет файл кода нашего приложения в новом окне VS Code. Вы можете увидеть такую файловую структуру в Solution Explorer.
Обратите внимание, что структура папок отличается от старой версии Angular. У нас есть новый файл «angular.json» вместо старого «.angular-cli.json». Этот файл конфигурации будет выполнять ту же задачу, что и раньше, но схема несколько изменилась.
Откройте файл package.json и вы увидите, что в нашем проекте установлены последние пакеты Angular 6.0.0.
{ "name": "ng6-app", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^6.0.0", "@angular/common": "^6.0.0", "@angular/compiler": "^6.0.0", "@angular/core": "^6.0.0", "@angular/forms": "^6.0.0", "@angular/http": "^6.0.0", "@angular/platform-browser": "^6.0.0", "@angular/platform-browser-dynamic": "^6.0.0", "@angular/router": "^6.0.0", "core-js": "^2.5.4", "rxjs": "^6.0.0", "zone.js": "^0.8.26" }, "devDependencies": { "@angular/compiler-cli": "^6.0.0", "@angular-devkit/build-angular": "~0.6.0", "typescript": "~2.7.2", "@angular/cli": "~6.0.0", "@angular/language-service": "^6.0.0", "@types/jasmine": "~2.8.6", "@types/jasminewd2": "~2.0.3", "@types/node": "~8.9.4", "codelyzer": "~4.2.1", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~1.7.1", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~1.4.2", "karma-jasmine": "~1.1.1", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.3.0", "ts-node": "~5.0.1", "tslint": "~5.9.1" } }Название нашей программы Angular ng6app который находится внутри ng6demo каталог.
Итак, мы сначала перейдем в нашу программу с помощью приведенных ниже команд.
Затем мы используем следующую команду для запуска веб-сервера.
После выполнения этой команды вы можете увидеть, что она просит открыть в вашем браузере. Итак, откройте любой браузер на своем компьютере и перейдите по этому URL-адресу. Теперь вы можете увидеть следующую страницу.
Теперь мы попытаемся изменить текст приветствия на экране. Перейдите к /src/app/app.component.ts файл и замените код на следующий код.
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title="Csharp Corner"; }Теперь откройте браузер, вы увидите, что веб-страница обновлена новым приветственным сообщением «Добро пожаловать в Csharp Corner!»
В этой статье мы узнали о новых возможностях Angular 6.0. Мы установили Angular 6.0 CLI и создали нашу первую программу Angular 6.0 с помощью Visual Studio Code. Мы также настроили приветствие на веб-странице.
Вы также можете найти статью на C# Corner.
Вы можете просмотреть мои другие статьи о Angular здесь
Первоначально опубликовано на