Angular2 - как начать и с какой IDE

Ответ 1

1) IDE

Мне было интересно, какая IDE лучше всего подходит для Angular2.

Я большой сторонник Sublime Text и даже там есть плагин Typescript... Он не чувствовал себя идеально с мощью Typescript.

Поэтому я попытался с моим вторым любимым редактором: Atom (+ плагин Typescript). Лучше, НО, не поддерживать автоматический импорт (может быть, он уже есть?), А также мне пришлось подождать 30 секунд, прежде чем я получу автозаполнение.

Затем я попробовал Webstorm, так как у компании, в которой я сейчас работаю, есть несколько лицензий. Это было здорово, и я был очень счастлив в течение месяца. Но использование редактора, который не является свободным, чувствуется... странно. Я бы не использовал его дома для личных проектов, я не мог бы легко рекомендовать его другим людям. И, честно говоря, я не большой поклонник интерфейса Webstorm.

Итак, я дал (еще одну) попытку Visual Studio Code, который мне не показался настолько удачным, когда я впервые попробовал его несколько месяцев назад. Он серьезно развился и:
- это просто
- это завершено
- Код
- Отладчик (удаленный → супер мощный)
- Git интеграция
- Магазин плагинов
- он имеет отличную поддержку Angular2
- intellisense действительно потрясающе

Я пользуюсь им с месяца и до сих пор, я действительно счастлив и не чувствую необходимости меняться.

Просто чтобы помочь вам начать с хороших плагинов, вот мой:

2) Angular 2: откройте для себя основы

Поскольку вы знакомы с AngularJs, я не знаю, что вы думаете об официальной документации, но я не мог извлечь из нее уроки. Я должен был следовать многим (разным) учебным пособиям, а потом привык, когда понял, что такое AngularJ.

С Angular2 они поняли, что нужно иметь отличную документацию, и обратили на это внимание начиная с альфа-версии (даже если она постоянно развивалась =)!).

Поэтому я бы порекомендовал вам зайти на https://angular.io и просто прочитать документ.

Это хорошо сделано и не только для опытного пользователя. Вы найдете хорошие учебники там!

3) Как использовать Typescript с кодом Visual Studio?

Я настоятельно рекомендую вам использовать angular-cli для разработки приложения Angular2. Не только для простоты, но и потому, что в сообществе нам нужен базовый стартер, который дает нам возможность иметь аналогичное структурированное репо. Таким образом, мы можем легко понять структуру другого проекта.

Кроме того, angular-cli управляет компиляцией Typescript для вас, и вам не нужно иметь дело с ней в командной строке или в вашей IDE.

npm i -g typescript

(больше нет необходимости печатать с Typescript 2.0!)

npm i -g angular-cli
ng new my-super-project --style=scss
cd my-super-project

Тогда просто беги

ng serve

И доступ к вашему приложению по адресу: http://localhost: 4200

Angular-cli компилирует ваш Typescript и даже ваши (sccs | sass | less) файлы.

Когда вы хотите развернуть свое приложение:

ng serve --prod

Также будет минимизировать JS и CSS.

4) Что дальше?

Как только вы почувствуете себя более комфортно с Angular2 в целом, я настоятельно рекомендую вам узнать (больше) о
- Redux
- RxJs

И как только вы ознакомитесь с этими концепциями, вам следует начать играть с ngrx.

Удачи в этом длинном (и потрясающем) путешествии!

Я выпустил стартер ngrx! Для тех, кто знаком с Redux и хочет открыть angular и/или ngrx, это может помочь вам начать! Я уверен, что было бы также неплохо использовать этот шаблон в качестве стартового для любого проекта ngrx (маленького, среднего или даже большого!). Я попытался описать в Readme, как его использовать, и в самом коде есть множество комментариев: https://github.com/maxime1992/angular-ngrx-starter.

Ответ 2

У меня была та же проблема, потому что с момента выхода Angular 2 я ищу хорошую бесплатную среду IDE, которая поддерживает Angular 2. Я опишу свой опыт.

Netbeans

Это очень хорошая IDE для Java и довольно хорошая для веб-разработки. Есть много функций, которые повышают вашу работу. Я установил плагин Everlaw Typescript, который поддерживается на github:

Плагин: https://github.com/Everlaw/nbts/releases

преимущества

• Действия с машинописным шрифтом (сборка, запуск и т.д.) Доступны из проводника проекта.
• Плагин может создавать файлы TS при сохранении.

Недостатки

• Отсутствие поддержки Angular 2, потому что этот плагин поддерживает только машинопись.
• Проблемы с подсветкой intelisense и синтаксиса в угловых файлах шаблонов и ts.
• Отсутствие шаблонных шаблонов для NG2.

ЗАТМЕНИЕ

IMHO Eclipse с плагином Angular2Eclipse теперь является одним из лучших IDE для Angular 2. Это зрелое решение с множеством функций, которые повышают вашу работу.

Плагин: https://marketplace.eclipse.org/content/angular2-eclipse

преимущества

• Интеграция с angular-cli
• Поддержка синтаксиса Angular2 внутри шаблонов компонентов.
• Поддержка машинописных файлов.
• Доступны шаблоны угловых 2 шаблонов.

Недостатки

ИМХО нет недостатков.

Если вы ищете хороший учебник по настройке IDE, попробуйте это

https://jaxenter.com/angular-2-intellij-netbeans-eclipse-128461.html

VS Code + Angular Language Service

С тех пор как я выпустил языковой сервис angular, я изменил IDE на VS Code. Я работал над затмением, но теперь я думаю, что VS Code лучше, потому что он намного быстрее и легче, чем затмение с угловым аддоном.

Служба Angular Language Service - это способ получения дополнений, ошибок, подсказок и навигации внутри ваших шаблонов Angular, независимо от того, являются ли они внешними в файле HTML или встроены в аннотации/декораторы в строку.

Вы можете прочитать больше здесь https://angular.io/guide/language-service

Если вы хотите установить это дополнение, запустите VS Code Quick Open (Ctrl + P), вставьте следующую команду и нажмите ввод.

ext install Angular.ng-template

Страница дополнения https://marketplace.visualstudio.com/items?itemName=Angular.ng-template

Ответ 3

Существует несколько способов начать работу. Но для начинающих вам захочется установить npm в вашу систему.

Go здесь, чтобы установить и установить node.js. Он будет иметь npm, который будет package manager, который вы будете использовать.

Самый простой способ добиться успеха -

Установите typescript в вашу систему.

npm install -g typescript`

npm install -g typings`

Установить Angular -cli

Это инструменты командной строки. Обязательно установите глобально и локально в свой проект.

npm install -g angular-cli

И затем та же самая версия, что и глобальная, локально,

npm install angular-cli

Использование

ng --help Создание и обслуживание проекта Angular2 через сервер разработки.

ng new PROJECT_NAME cd PROJECT_NAME ng serve

Перейдите к http://localhost:4200/. Приложение будет автоматически перезагружаться, если вы измените любой из исходных файлов.

Вы можете настроить HTTP-порт по умолчанию и тот, который используется Сервер LiveReload с двумя параметрами командной строки:

ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153

Angular-cli