Начало работы с Angular 2 с использованием TypeScript

Чтобы выполнить эту первую задачу, откройте файл server.js

 app.post('/api/achievements', function(request, response){
    achievements.push(JSON.parse(request.body));
    response.send(achievements);
});

Поскольку Http Итак, давайте добавим промежуточное ПО bodyParser

 app.use(bodyParser.text({
   type: 'text/plain'
}));

Модификация компонента запуска и маршрутов

Файл index.html Основная часть этого файла загружает скрипт bootstrapmy-app Этот компонент в свою очередь загружает другие компоненты в приложение. Файл bootstrap.ts загружает приложение AngularJS с использованием основного компонента. Как видите, необходимые функции для инъекций, экспортируемые другими модулями, передаются в функцию. Это делает службы и директивы, экспортируемые этими модулями, доступными для всех дочерних компонентов bootstrap.ts Мы будем использовать my-appformformInjectables

 angular2/forms

Компонент запуска проекта находится внутри папки import {formInjectables} from 'angular2/forms';
bootstrap(MyApp, [routerInjectables, httpInjectables, formInjectables, AchievementsService]); К компоненту применены две аннотации:

1. Компонент: содержит свойства конфигурации компонента, такие как селектор, имена свойств, имена событий и список инъекций в компонент. Значение селектора может совпадать со строкой, используемой в разметке HTML, его не нужно обрабатывать верблюдом
2. Представление: аннотация представления загружает данные, необходимые для части представления компонента. Он включает в себя шаблон HTML (может быть встроенным или URL-адрес шаблона) и список директив, в которых нуждается компонент

Ниже вы можете увидеть соответствующий код:

 app

Компонент @Component({
selector: 'my-app'
})
@View({
templateUrl: _settings.buildPath + '/components/app/app.html',
directives: [RouterLink, RouterOutlet]
}) Сервис my-appRouter Следующий фрагмент определяет два маршрута, необходимые для приложения:

 MyApp

Поскольку компонент добавления еще не добавлен, вы столкнетесь с некоторыми проблемами, если попытаетесь запустить приложение сейчас. Нам нужно создать новую папку внутри папки компонентов и назовите ее export class MyApp {
constructor(@Inject(Router) router: Router) {
router.config([
{ path: '', as: 'home', component: Home },
{ path: '/add', as: 'add', component: Add }
]);
}
} Затем мы добавляем в эту папку два файла: addadd Наконец, добавьте следующий фрагмент в add.ts

 add.html

Представление этого компонента будет иметь форму, принимающую входные данные для сохранения в качестве нового достижения. Итак, добавьте следующий HTML-код на эту страницу:

 add.ts file

В представлении нам нужно создать ссылки для навигации между страницами. Компонент атрибута import {Component, View} from 'angular2/angular2';
import { _settings } from '../../settings'
import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
import {Inject} from 'angular2/di';
import {Router} from 'angular2/router';
import {AchievementsService} from '../../services/achievementsService';

@Component({
selector: ‘add’,
injectables: [FormBuilder]
})
@View({
templateUrl: _settings.buildPath + ‘/components/add/add.html’,
directives:[formDirectives]
})
export class Add {
} Нам нужно присвоить имя компонента атрибуту, и он позаботится о создании ссылки на основе пути, предварительно настроенного для компонента.

 <div>Add New Achievement</div>
<br />
<form>
  <div class="input-group">
    <span>Title</span>
    <input type="text" id="title" class="form-control" />
  </div>
  <div class="input-group">
    <span>Type</span>
    <input type="text" id="type" class="form-control" />
  </div>
  <div class="input-group">
    <span>From</span>
    <input type="text" id="from" class="form-control" />
  </div>
  <div>&nbsp;</div>
  <div class="input-group">
    <input type="submit" value="click" class="btn btn-primary" />
    <input type="reset" value="Reset" class="btn" >
  </div>
</form>

Последним фрагментом HTML-кода, который нам нужен в корневом компоненте, является элемент router-link Это место, где дочерние компоненты будут загружены при навигации по представлениям.

 <ul class="nav navbar-nav">
  <li>
    <a router-link="home">Home</a>
  </li>
  <li>
    <a router-link="add">Add</a>
  </li>
</ul>

Перечисление всех достижений

Теперь давайте изменим домашний компонент, чтобы отобразить список всех достижений в виде закрепленных блоков на стене. Мы будем использовать Bootstrap для стилизации этой страницы. CSS Bootstrap уже загружен в route-outlet

Прежде чем приступить к работе с пользовательским интерфейсом, давайте создадим сервис для отправки запросов Ajax в API Express.js для взаимодействия с данными. У нас есть файл с именем <router-outlet></router-outlet> Переименуйте его в качестве index.htmldummyService Добавьте следующий код в этот файл. Этот фрагмент кода настраивает внедрение зависимостей для службы и добавляет метод для получения всех достижений от службы:

 achievementsService

Методы класса AchievementsService Последние являются объектами, которые имеют встроенные возможности для уведомления, когда что-то меняется. import {Component, View} from 'angular2/angular2';
import { Inject} from 'angular2/di';
import {Http} from 'angular2/http';

export class AchievementsService {
constructor( @Inject(Http) private http: Http) {
}

getAllAchievements(): any {
var path = ‘/api/achievements’;
return this.http.get(path);
}
}HttpAchievementsService

 home.ts import {Component, View, NgFor} from 'angular2/angular2';
import { _settings } from '../../settings'
import {AchievementsService} from '../../services/achievementsService';
import {Inject} from 'angular2/di';

@Component({
  selector: 'home',
  injectables: [AchievementsService]
})
@View({
  templateUrl: _settings.buildPath + "/components/home/home.html",
  directives: [NgFor]
})
export class Home {
  achievements: Array;

  constructor( @Inject(AchievementsService) private achievementsService: AchievementsService) {
    achievementsService.getAllAchievements()
      .map(r => r.json())
      .subscribe(a => {
        this.achievements = a;
      });
  }
} 

 <div class="row">
  <div *ng-for="#achievement of achievements" class="thumbnail col-md-3 col-sm-3 col-lg-3">
    <span class="glyphicon glyphicon-pushpin"></span>
    <div class="caption">
      <strong>{{achievement.title}}</strong>
    </div>
    <p class="text-center">Level: {{achievement.type}}</p>
    <p class="text-center">From: {{achievement.from}}</p>
  </div>
</div>

 addAnAchievement(newAchievement) {
  var path = '/api/achievements';
  return this.http.post(path, JSON.stringify(newAchievement));
}

 addAchievementForm: any;

constructor( @Inject(FormBuilder) private formBuilder: FormBuilder,
    @Inject(Router) private router: Router,
    @Inject(AchievementsService) private achievementsService: AchievementsService) {
  this.addAchievementForm = formBuilder.group({
    title: [''],
    type: [''],
    from: ['']
  });
}

addAchievement() {
  this.achievementsService.addAnAchievement(this.addAchievementForm.value)
    .map(r => r.json())
    .subscribe(result => {
      this.router.parent.navigate('/');
    });
}

 <form (ng-submit)="addAchievement()" [ng-form-model]="addAchievementForm">

 <input type="text" id="title" ng-control="title" class="form-control" />