[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


Комментарии 4


Чтобы читать и оставлять комментарии вам необходимо зарегистрироваться и авторизоваться на сайте.

Моя страницаНастройкиВыход
Отмена Подтверждаю
100%
Отмена Подтверждаю
Отмена Подтверждаю