Из последнего поста я показываю, как создать приложение с angular2 и маршрутизацией, используя angular-cli. В этом посте я добавлю сервисы, внедрение зависимостей и директивы, также используя angular-cli

Исходный код

Полный исходный код доступен на GitHub:

https://github.com/Pabloin/mean-stack-talk

Начнем

Работающее приложение и проект

Приложение работает

Шаг 01: Добавьте класс (модель)

Давайте добавим класс, также упоминаемый как модель:

$ ng generate class services/user.model

мы видим, что это всего лишь немногое, что делает команду ng для нашего класса… давайте добавим все остальное с помощью редактора атомов:

Мы также начали использовать директивы, в данном случае *ngFor, чтобы выполнить итерацию по фиктивному пользовательскому массиву, результатом будет

мы должны добавить сообщение, когда пользовательский массив пуст, и в этом случае *ngIf с:

<tbody *ngIf="users.length">
            <tr *ngFor="let user of users">
              <th scope="row">{{ user.id }}</th>
              <td>{{ user.firstName }}</td>
              <td>{{ user.lastName }}</td>
              <td>{{ user.userName }}</td>
            </tr>
</tbody>
<tbody *ngIf="!users.length">
            <tr>
              <th scope="row" colspan="4">no user!</th>
            </tr>
</tbody>

Шаг 02: Добавьте услуги (модель)

Первый вариант — генерировать сервисы с помощью команды angular-cli:

$ ng generate service <path-to-service/name>
--flat : "--flat false" to indicate if a dir is created
--spec specifies if a spec (testing file) file is generated
--module (-m) allows specification of the declaring module
$ ng generate --help service

Давайте воспользуемся им для создания сервиса data с классом тестирования ( — spec), и нам не нужны «плоские» компоненты: нам нужны каталоги

Let´s generate a dir “services” with the services inside: “services/data”
$ ng generate service services/data --flat true --spec true
or the same is: by default is flat and generate spec file
$ ng generate service services/data

Давайте добавим встроенный код для вставки данных из сервиса во внешний интерфейс:

И у нас тот же результат, мы получаем данные, но на этот раз от сервиса:

Мы видим, что мы установили провайдера: [DataService] в модуле компонента @, это позволяет внедрить зависимость. Мы можем найти провайдера в @ngmodule с тем же результатом.

На этом я закончу пост, тэг и исходный код находятся на GitHub:

Хорошо, на этом пост закончился, я увидел, как использовать сервисы в Angular и кое-что с внедрением зависимостей, а также я использовал несколько директив.

Следующим может быть соединение фронта с бэкендом, получение данных из базы данных mongo DB. Конечно, мы не обращаемся к базе данных напрямую, но через API Rest… это часть IV, скоро увидимся.

Ссылки

Хорошее видео об angular2, похожее на этот пост, от Jhon Papa на ngConf (https://www.youtube.com/watch?v=WAPQF_GA7Qg&t=143s)