Как начать с угловой 6,0

Автор оригинала: Ankit Sharma.

Узнайте, что новое и постройте приложение

Угловой выпустил свою последнюю версию, угловую 6.0. В этой статье мы поймем новые особенности угловых 6.0, а также настроили новый проект с помощью угловой CLI 6.0 и CLIE и Visual Studio Code.

Что нового в угловых 6,0?

отрицание Обновить

Новая команда CLI, которая обновит ваши зависимости проекта к их последним версиям.

отрицание Добавить

Еще одна новая команда CLI, которая облегчает добавление новых возможностей для вашего проекта.

Угловые элементы

Это новая функция, которая позволяет нам компилировать угловые компоненты к родным веб-компонентам, которые мы можем использовать в нашем угловом приложении.

<Шаблон> Элемент устарел

Вы не можете использовать <Шаблон> Внутри ваших шаблонов компонентов. Вам нужно использовать вместо этого.

Поддержка библиотеки

Угловая CLI теперь имеет поддержку для создания и наращивания библиотек. Для создания библиотечного проекта в вашем рабочем пространстве CLI запускайте следующую команду: NG Generate Biblic <имя> (например: NG Generate Библиотека My-Demo-lib)

Угловые материалы старты

Если вы запустите «NG Add @ Angular/Matize», чтобы добавить материал в существующее приложение, вы также сможете генерировать 3 новых компонента стартера:

Материал Сиденав Компонент стартера, включая панель инструментов с именем приложения и боковой навигации
Материальная приборная панель Компонент приборной панели стартера, содержащий динамический список карт
Таблица данных материала Компонент таблицы таблиц стартера, который предварительно сконфигурирован с DataSource для сортировки и пагинации

Поддержка рабочей области

Angular CLI теперь имеет поддержку рабочих пространств, содержащих несколько проектов, таких как несколько приложений и/или библиотек.

Файл “.angular-cli.json” был устаревшим

Угловые проекты теперь будут использовать «angular.json» вместо «.angular-Cli.json» для конфигурации сборки и проекта.

Используйте RXJS V6.

Угловая 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() { }  }

Этот подход все равно будет работать, но угловые 6.0 обеспечивает новую и проще альтернативу этому. Нам больше не нужно добавлять ссылки в наш NGModule. Мы можем ввести ссылку непосредственно в сервис. Поэтому мы можем использовать услугу, как показано ниже:

// In myservice.ts    import { Injectable } from '@angular/core';    @Injectable({    providedIn: 'root',  })  export class MyService {    constructor() { }  }

Это новые функции/улучшения в последнем выпуске угловых. Давайте перейдем и создайте наше первое приложение, используя угловые 6,0.

Предпосылки

Установите последнюю версию Node.js из здесь
Установить Visual Studio Code из здесь

Установка Node.js также установит NPM на вашем компьютере. После установки Node.js откройте командную строку и запустите следующий набор команд, чтобы установить версию узла и NPM на вашем компьютере.

Обратитесь к изображению ниже:

Теперь, когда мы установили узел и NPM, следующим шагом является установка угловых CLI. Запустите следующую команду в окне команд. Это установит угловые 6,0 CLI во всем мире на вашу машину.

Откройте VS код и перейдите к просмотру >> Интегрированный терминал.

Это откроет окно терминала в VS-коде.

Введите следующую последовательность команд в окне терминала. Эти команды создадут каталог с именем ” NG6DEMO «А потом создайте угловое приложение с именем« » NG6APP «Внутри этого каталога.

MKDIR NG6DEMO
CD NG6DEMO
NG NEW NG6APP.

Там мы идем – мы создали наше первое угловое 6 приложений с использованием VS-кода и угловых CLI. Теперь запустите следующую команду, чтобы открыть проект.

Обратитесь к изображению ниже:

Это откроет файл кода нашего приложения в новом окне кода VS. Вы можете увидеть следующую структуру файла в исследовательском исследовании.

Обратите внимание, что структура папки немного отличается от более старой версии угловой. У нас есть новый файл «angular.json» вместо старого файла “.angular-cli.json”. Этот файл конфигурации все равно будет служить той же задаче, что и раньше, но схема немного изменилась.

Откройте файл package.json, и вы можете наблюдать, что у нас есть последние угловые 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"    }  }

Название нашего углового приложения – NG6APP который внутри NG6DEMO каталог.

Итак, мы сначала перейдите к нашему приложению, используя команды ниже.

И тогда мы используем следующую команду для запуска веб-сервера.

После запуска этой команды вы можете увидеть, что он просит открыть http://localhost: 4200 в вашем браузере. Итак, откройте любой браузер на своей машине и перейдите к этому 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 УГОЛ!»

В этой статье мы узнали о новых особенностях угловых 6.0. Мы установили угловую 6,0 CLI и создали наше первое приложение Angular 6.0 с помощью Visual Studio Code. Мы также настроили приветственное сообщение на веб-странице.

Вы также можете найти эту статью на C # угол Отказ

Вы можете проверить мои другие статьи на угловой здесь

Первоначально опубликовано в https://ankitsharmablogs.com/

Оригинал: “https://www.freecodecamp.org/news/how-to-get-started-with-angular-6-0-a196cbfb9bbb/”