[Angular 2] Урок 0 - Hello world! ????


Всем привет!

Сегодня я решила написать небольшой пост - введение в Angular. Я расскажу, что нам понадобится, чтобы запустить первое Hello World приложение.

angular lesson 0

Первое, что нам понадобится, чтобы начать использовать Angular - менеджер пакетов npm. Нам будет необходима возможность JavaScript подключать другие внешние библиотеки и пакеты с помощью этой программной платформы.

Еще в первых уроках, я советовала вам среду разработки - Brackets.io. Сейчас же сама я использую WebStorm от JetBrains, и эта IDE гораздо удобнее.

Webstorm - платный, но JetBrains даёт один пробный месяц. Так что если вы ищите удобную IDE, обратите внимание на эту и потестируйте её бесплатно.

Приступим?

Давайте создадим папку, в которой и будем собирать наш проект.
И туда добавим файл package.json, в dependencies и devDependencies определим пакеты, которые нам понадобятся.
В разделе scripts мы задаем команды. Так, например, мы задали команду start, которая в свою очередь выполнит перечисленные в кавычках команды.


{
"name": "ng-qqc",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.13",
"systemjs": "0.19.25",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.6.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.1.0",
"typescript": "^1.8.9"
}
}

  • npm run tsc:w — запуск компилятора TypeScript в режиме наблюдения; процесс продолжает работу, перекомпилируя проект в тот момент, когда засекает изменения, внесённые в файлы TypeScript.
  • npm run lite — запускает lite-server, легковесный статический файловый сервер, написанный и поддерживаемый Джоном Папа с великолепной поддержкой приложений Angular, которые используют маршрутизацию.

После того, как мы сохранили файл package.json, открываем окно терминала (или командную строку в Windows) и запускаем команду, которая установит все необходимые библиотеки:

npm install

install package.json

Теперь нужно настроить компилятор TypeScript.

Напомню, что Angular2 написан на TypeScript, а TypeScript в свою очередь компилируется в JavaScript код. ...

Создаем файл tsconfig.json

{
"compilerOptions": {
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}

Этот файл нужен, чтобы "объяснить" компилятору, как ему следует генерировать файлы JavaScript.

Подробнее о том, из чего состоит tsconfig.json можете почитать в документации.

Осталось создать файл index.html - нашу основу.

<html>
<head>
<title>Angular 2 @qqc</title>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<qqc-app>Загружаю...</qqc-app>
</body>
</html>

Подготовка завершена... Теперь создадим наш первый компонент.

Компонент - основа Angular. Компонент - это класс, который является контроллером некоторого шаблона.

Давайте создадим под нашу основную часть приложения отдельную директорию - app. И добавим файл app.component.ts:


import { Component } from 'angular2/core'

@Component({
selector: 'qqc-app',
template: <h1>Hey! It's qqc's first application with angular2 for Golos.io.</h1>
})
export class AppComponent {}

@Component() - декоратор, который даёт понять, что этот класс - компонента, и что с ним следует делать. Здесь же мы указываем, каким шаблоном (template или templateUrl) будет управлять этот компонент, и задаём селектор, внутри которого и будет отображаться содержимое шаблона.

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

Теперь осталось сказать какой компонент запускать первым, в нашем случае он и единственный - AppComponent. Для этого создадим файл boot.ts:


import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

first angular2 app

Запускаем?

В терминале вводим команду npm start и радуемся!

install package.json

Получилось?

Начало положено, в следующий раз детальнее рассмотрим компоненты и то, как они взаимодействуют друг с другом.

Если у вас возникли какие-то вопросы, что-то не получилось, пишите! ?

РецептыШитьёПутешествияСоветыСпортКнигиАнтошкаДашаTheDeveloperЯ

ИнстаграмТелеграмГитхабПодписаться@qqc

Все урокиФронтендJavaScript


Comments 4


@qqc, хоть для меня все это "птичий язык", но мне очнра, как легко вы на нем разговариваете))))

04.06.2017 05:06
0

@qqc Поздравляю! Вы добились некоторого прогресса на Голосе и были награждены следующими новыми бейджами:

Награда за количество полученных голосов

Вы можете нажать на любой бейдж, чтобы увидеть свою страницу на Доске Почета.
Чтобы увидеть больше информации о Доске Почета, нажмите здесь

Если вы больше не хотите получать уведомления, ответьте на этот комментарий словом стоп

Голосуя за это уведомление, вы помогаете всем пользователям Голоса. Узнайте, как здесь.

04.06.2017 05:26
0

Пока все еще сложно, но интересно :)

04.06.2017 20:29
0

@qqc, сейчас только увидел этот прекрасный пост! очень легко и доступно всё рассказано! Не каждому дано так легко подать материал! Спасибо огромное!

22.06.2017 22:01
0
My pageSettingsLogout
Cancel Confirm
100%
Cancel Confirm
Cancel Confirm