qqc

7 лет назад

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

Всем привет!

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

Первое, что нам понадобится, чтобы начать использовать 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

Теперь нужно настроить компилятор 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);

Запускаем?

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

Получилось?

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

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