В настоящее время многие разработчики начали изучать и разрабатывать веб-сайты Angular 2, это простое руководство для тех, кто является новичком и начал изучать и разрабатывать с помощью Angular 2. Учебное пособие представляет собой набор шагов, которым необходимо следовать для связи со службой Restful Server, такой как Asp. net webApi для выполнения операции CRUD (создание, чтение, обновление и удаление). Учебное пособие разделено на две части: первая часть — это создание простой службы Asp.net WebApi, т. е. службы Restful на стороне сервера, а вторая часть — это создание приложения Angular 2, состоящего всего из одной страницы для использования webapi.

Первая часть — создание сервиса Restful (webApi)

Что такое Asp.net WebApi? Asp.net Webapi — это платформа на основе MVC, предоставляемая Microsoft для создания веб-API Resful (т. е. веб-сервиса для отдыха). Одним из преимуществ веб-API является простота создания и использования. Как и его остальное, он совместим с HTTP-протоколом и HTTP-глаголом. Чтобы узнать больше об этом, нужно пройти по этой ссылке: Asp.net WebApi Перед тем, как приступить к созданию webApi, на машине должна быть установлена ​​Visual Studio. Если у вас есть визуальная студия, выполните следующие шаги: 1. Создайте новое решение и добавьте в него новый проект. Как показано на изображении ниже

  • Выберите язык разработки (здесь выбран C#)
  • Выберите язык веб-службы
  • Выберите шаблон «Веб-приложение Asp.net».
  • Введите название проекта (здесь Employeemengementapi — название проекта)
  • Нажмите «ОК».

2. В следующем окне

  • Выберите «Пустой» шаблон
  • и установите флажок «WebApi»
  • нажмите ОК.

3. После того, как во время создания проекта будут введены правильные данные, Visual Studio создаст структуру проекта, как показано на рисунке ниже. Теперь можно кодировать Restful webApi.

4. После того, как структура проекта будет готова, первая задача — добавить класс модели. Класс модели — это объект, который может быть отправлен с сервера клиенту в качестве ответа от контроллера или объект, полученный контроллером от клиента как часть запроса. Чтобы добавить класс модели, просто щелкните правой кнопкой мыши папку «Модель» и выберите «Добавить класс».

5. Добавьте имя класса модели, как показано на изображении ниже, и нажмите «Добавить», чтобы создать простой класс в папке модели.

Ниже представлен простой класс сотрудников, созданный как модель, которая будет использоваться в этом руководстве.

namespace EmployeeManagmentApi.Models
{
    public class Employee
    {
        public int ID { get; set; }
        [Required]
        public string firstname { get; set; }
        public string lastname { get; set; }
    }
}

6. После того, как структура проекта будет готова, первая задача — создать Контоллер. Контоллер в среде MVC выполняет тяжелую работу по обработке запроса клиента о доходах и предоставлению надлежащего ответа клиенту. Как показано на изображении ниже, нужно щелкнуть правой кнопкой мыши папку решения и выбрать «Добавить контроллер».

7. После добавления клика он отображает шаблон для контроллера, и, поскольку в нем нет никаких причудливых вещей (т. Е. Никаких вещей, связанных с инфраструктурой объектов), и в качестве его WebApi для этого руководства выбран «Контроллер веб-API с действиями чтения/записи», как показано на изображении ниже. .

8. После того, как вы нажмете «Добавить» на экране выше, он отобразится там, где нужно ввести имя контроллера. после нажатия будет создан контроллер с действием чтения/записи.

Ниже приведен код контроллера, который написан для этого туториала. В рамках руководства мы просто продемонстрируем запрос HttpGet, поэтому создали только один новый метод, который будет возвращать объект Employee.

Здесь важно отметить одну важную вещь: строку [EnableCors(origins: *, headers: *, method: *)] над контроллером, эта строка добавлена ​​для обеспечения поддержки междоменный запрос (т.е. запрос, исходящий из другого домена). Подробнее о междоменном запросе: CORS

namespace EmployeeManagmentApi.Controllers
{
    [EnableCors(origins: "*", headers: "*", methods: "*")]
    public class EmployeeController : ApiController
    {
        // GET: api/GetEmployees
        public IEnumerable<Employee> GetEmployees()
        {
            List<Employee> emplist = new List<Employee>
            {
                new Employee{ ID=1, firstname="Pranay", lastname="Rana"},
                new Employee{ ID=2, firstname="abc", lastname="xyz" }
            };
return emplist;
        }
// GET: api/Employee/5
        public string Get(int id)
        {
            return "value";
        }
// POST: api/Employee
        public void Post([FromBody]string value)
        {
        }
// PUT: api/Employee/5
        public void Put(int id, [FromBody]string value)
        {
        }
// DELETE: api/Employee/5
        public void Delete(int id)
        {
        }
    }
}

9. после завершения работы с контроллером и моделью следует изменить файл WebApiConfig.cs, который помогает настроить webApi, чтобы он соответствовал требованиям, таким как обработка междоменного запроса, формат ответа, маршруты для обслуживания запроса и т. д. Ниже приведен код для то же.

namespace EmployeeManagmentApi
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // Web API configuration and services
            config.Formatters.Remove(config.Formatters.XmlFormatter);
            
            // Cross domain reuest configuration 
            config.EnableCors();
// Web API routes
            config.MapHttpAttributeRoutes();
             
            config.Routes.MapHttpRoute(
               name: "NamedactionApi",
               routeTemplate: "api/{controller}/{action}/{id}",
               defaults: new { id = RouteParameter.Optional }
           );
config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}

Примечание. Обязательно установите пакет Microsoft.AspNet.WebApi.Cors, необходимый для кода обработки междоменных запросов.

10. После этого можно легко протестировать веб-API, просто введя URL-адрес в браузере, как показано на изображении ниже. Он работает как запрос на получение, но если вы хотите протестировать запрос другого типа, например Удалить (HttpDelete), Обновить (HttpPut), Создать (HttpPost), следует использовать Postman или Fiddler.

Это конец первой части этого урока, создание webapi. В учебнике используется Asp.net WebApi, но в нем нет необходимости, можно использовать другую технологию serside.

Вторая часть: создание приложения Angular 2 Прежде чем приступить ко второй части, то есть к приложению Angualr 2, необходимо подготовить среду разработки. необходимо иметь следующие установленные в машине

  1. Код Visual Studio
    Код Visual Studio — это инструмент разработки, предоставляемый Microsoft. Некоторые из его основных преимуществ — это бесплатный и не тяжелый инструмент, как Visual Studio, множество доступных плагинов / расширений, которые помогают в разработке.
  2. Node.Js & npm:
    Требуется для управления и установки libaray/пакетов. Это среда выполнения, которая преобразует машинописный код в код javascript, который браузер понимает и запускает приложение в браузере.
  3. Angular Cli
    Это полезная утилита командной строки, которая помогает от начала проекта (настройка нового приложения) до конца (развертывание проекта). Некоторые из преимуществ: простое создание проекта, позволяет создавать модуль, компонент, сервис, класс модели, канал и т. д. (т.е. используется для скофолдинга), просто помощь команд, настройка lint, которая помогает форматировать код во время разработки, веб-пакет — который помогает в объединение файлов typescript/javascript/css и создание фрагмента кода, тестирование, минимизация, .
  4. Инструмент контроля версий (например, GitHub)
    Полезен для хранения кода в определенном месте, из которого вы можете получить код и сохранить версию кода, чтобы можно было сравнивать разные версии кода.
  5. BootStrap
    Это не обязательный пакет, но он полезен, если вы не хотите тратить много времени на стилизацию своего приложения. В этой библиотеке css есть готовые стили (CSS) и некоторые простые вещи jQuery. Я ускоряю разработку.

После установки всего вышеперечисленного (кроме BootStrap, который требуется установить после создания проекта), мы готовы к работе с первым приложением Angualr 2. 1. Создайте приложение, выполнив команду angular cli «ng new [projectname]», как указано ниже.

Эта команда создаст папку со всем необходимым для приложения angular 2, а также установит необходимые пакеты, которые перечислены в файле package.json.

Примечание: команда запущена с аргументом — маршрутизация, она создаст модуль маршрутизации с новым приложением, это необходимо, так как рано или поздно вам понадобится больше страниц в вашем приложении и вы захотите перемещаться между этими страницами.

После создания папки на локальном диске предлагается закрыть окно командной строки. И если вы видите сбой во время установки пакета, просто оставьте его и закройте командную строку. 2. Теперь откройте Visual Studio Code на своем компьютере и нажмите «Открыть папку», затем перейдите к пути, по которому была создана папка, и нажмите «Выбрать папку».

3. Код Visual Studio показывает структуру папок, как показано ниже в коде Visual Studio.

Важный файл в структуре папки

  1. Package.json — файл, содержащий все пакеты, установленные для проекта, т. е. файл, используемый для управления пакетами в проекте.
  2. tsconfig.json — файл содержит настройки, относящиеся к компилятору машинописного текста, т. е. параметры для компиляции машинописного текста.
  3. src — папка, в которой будет находиться весь код (модуль, компонент, пайп, сервис и т. д.) для создания приложения.
    src› Приложение. Когда создается новое приложение, оно создается с модулем приложения и компонентом приложения по умолчанию.
  4. src › assets — папка содержит стиль, изображения, используемые в проекте.
  5. node_module — папка со всеми установленными пакетами. который указан в package.json.
  6. src › environment — содержит файлы, настройки которых относятся к текущей рабочей среде. т. е. содержит файл настроек для файла настроек, связанных с dev, prod и test evnvironment.
  7. e2e — расшифровывается как сквозное тестирование.
  8. src › polyfill.js — файл содержит код для рендеринга приложения во всех браузерах.
  9. tslint.json — файл содержит все настройки, связанные с линтингом кода, т. е. правильное форматирование кода во время разработки.
  10. angular-cli.json — файл содержит настройку, связанную с утилитой angular cli, эта настройка используется утилитой angular cli.
  11. index.html — страница загружается, когда пользователь просматривает и ее страница, которая загружает угловое приложение.
  12. main.ts — файл, содержащий реальный код начальной загрузки приложения. Он содержит ссылку на модуль, который сначала необходимо загрузить при запуске приложения. Во вновь созданном приложении он содержит ссылку на «ApplicationModule».

4. После открытия приложения запустите интеграционный терминал в Visual Studio, нажав Вид › Встроенный терминал. Это откроет командную строку в Visual Studio.
запустите команду npm install, если установка пакета не была выполнена во время создания проекта. после первого запуска команды ng serve приложение запустится и проверит, что оно работает правильно. Перейдите по URL-адресу: http://localhost:4200, откроется приложение, созданное по умолчанию.
Теперь удалите все лишнее, например html, из файла index.html.

5. Запустите команду npm install bootstrap и установите загрузчик в проекте. После установки, чтобы использовать начальную загрузку в проекте, необходимо изменить файл angular.cli.json, как показано ниже.

"styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.css" ], "scripts": [ "../node_modules/bootstrap/dist/js/bootstrap.js" ],

Перейдите в Angualr cli.json, найдите массив стилей и скриптов и добавьте путь к файлам .css и .js начальной загрузки. 6. Теперь выполните следующую команду во встроенном терминале, т.е. в командной строке, такой же, как на изображении ниже.

  1. ng g module feature/employees — маршрутизация
    Эта команда создает новый mdoule под названием employee с функцией маршрутизации.
  2. Команда ng g component feature/employees
    создает функцию, называемую сотрудниками, в модуле сотрудника.

Обе команды, как показано на изображении ниже, запускаются с аргументом — сухой для команды. Этот инструмент позволяет увидеть, что команда модификации будет делать в проекте, прежде чем запускать его.

Примечание. Пожалуйста, следуйте: руководству по стилю для рекомендуемой структуры углового приложения. В соответствии с руководством приложение должно иметь следующую папку в папке src.

  1. Приложение — эта папка уже есть, когда вы создаете новый проект, папка которого содержит модуль приложения.
  2. Feature — эта папка содержит все функции, которые будут частью приложения. например, в приложении Employeemangment у него будут такие функции, как «Сотрудники» (компонент для добавления, удаления, обновления и чтения сотрудников), «Отдел» (компонент для добавления, удаления, обновления и чтения сотрудников) и т. д.
  3. Core — эта папка будет содержать ядро ​​приложения, она содержит все одноэлементные службы, которые будут использоваться модулями функций, она будет содержать такие службы, как служба исключений для всего приложения, служба профиля пользователя для всего приложения, панель навигации и т. д.
  4. Shared — эта папка будет содержать все командные сервисы, каналы, компоненты, директивы, которые будут использоваться модулями функций.

После запуска команды она создаст функцию под названием «Сотрудники» в проекте. Одним из преимуществ создания модуля/компонента с помощью angular будет выполнение всех необходимых изменений в проекте, таких как добавление маршрутизации, добавление вновь созданного компонента в модуль, поэтому он экономит усилия при переходе к каждому файлу, добавляя эти детали. Он также создает модуль, компонент, службу, канал, директиву с правильным расширением, например xyz.mdoule.ts. xyz.component.ts и т. д. в соответствии с руководством по стилю, чтобы определить, что данный файл предназначен для компонента, модуля или службы и т. д. 7. Следующим шагом является добавление модели в функцию, ее интерфейс будет иметь структуру, аналогичную структуре ответа, которая идет после выполнение http-вызова из службы. Это своего рода простой класс собственности.

команда: ng g interface feature/employees/model создает модель интерфейса model.

Измените model.ts, как показано ниже.

export interface Employee 
{ 
    ID?: number; 
    firstname?: string; 
    lastname?: string; 
}

8. После создания модуля компонент. Используйте приведенную ниже команду, она добавит службу, то есть службу данных, которая будет использоваться модулем Employee. DataService в основном будет иметь код, который взаимодействует с API на стороне сервера.

команда: ng g service feature/employees/employees -m=feature/employees/employees.module создать службу данных с именем employee, а также добавить службу в качестве списка поставщиков в файле определения модуля, как показано на изображении ниже.

Измените employee.service.ts, как показано ниже.

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

import { Employee } from './model';

@Injectable()
export class EmployeesService {

  apiUrl = 'http://localhost:1800/api/demo/';
  constructor(
    private http: HttpClient
  ) { }

  getEmployees(): Observable<Employee[]> {
    const url = `${this.apiUrl}getemployees`;
    return this.http.get <Employee[]>(url);
  }
}

Некоторые изменения, которые следует отметить здесь,

  1. HttpClient — внедряется в службу сотрудников. это услуга, предоставляемая как часть фреймворка Angular 2 для связи с серверной службой. В этом уроке мы познакомимся с веб-интерфейсом EmployeeManagementApi, созданным в первой части.
  2. getEmployees — метод службы, который использует службу http и вызывает метод getEmployees веб-API для получения всех сотрудников.

Примечание. Учебное пособие просто использует вызов HttpGet для передачи данных, но можно легко прочитать другие методы, предоставляемые HttpClient put, post и т. д., которые сопоставляются с другими HttpVerb для выполнения таких операций, как создание, обновление и удаление. 9. После внесения вышеуказанных изменений измените файлы компонентов, как показано ниже.

employees.component.ts

import { Component, OnInit } from '@angular/core';
import { EmployeesService } from './employees.service';
import { Observable } from 'rxjs/Observable';
import { Employee } from './model';

@Component({
  selector: 'app-employees',
  templateUrl: './employees.component.html',
  styleUrls: ['./employees.component.css']
})
export class EmployeesComponent implements OnInit {

  employees: Observable<Employee[]>;
  constructor(
    private employeesService: EmployeesService
  ) { }

  ngOnInit() {
    this.employees = this.employeesService.getEmployees();
  }
}

машинописный код в этом инжекте employeeservice. Вызовите метод employeeservice › getemployees из ngInit, чтобы получить сотрудников с сервера, и он сохраняет ответ, исходящий от серверов, в наблюдаемом массиве сотрудников.

employees.component.html

<div class="container">
  <h2>Employees</h2>
      
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Id</th>
        <th>Firstname</th>
        <th>Lastname</th>
      </tr>
    </thead>
    <tbody *ngIf='employees'>
      <tr *ngFor="let employee of employees | async">
          <td>{{employee.ID}}</td>
          <td>{{employee.firstname}}</td>
          <td>{{employee.lastname}}</td>
      </tr>
    </tbody>
  </table>
</div>

HTML-код использует канал async фреймворка angular для подписки на наблюдаемых сотрудников, созданных в машинописном файле, и получения фактического массива сотрудников. Код также использует директиву angular framewrok *ngFor для просмотра всех сотрудников в полученном массиве и создания строки таблицы.

10. После внесения всех изменений запустите команду «ng lint», чтобы узнать, есть ли какая-либо ошибка lint, т. е. ошибка форматирования кода.

11. На снимке экрана ниже показан окончательный результат руководства.

Заключение
Учебное пособие охватывает большую часть основ, необходимых для начала работы с приложением angula 2 (кроме тестирования приложения). Полный код учебника можно найти здесь: WebApi — EmployeeManagementApi AngularApp — EmployeeManagment

Первоначально опубликовано на сайте pranayamr.blogspot.com 14 апреля 2018 г.