В предыдущем посте мы создали новый проект Angular 4. Давайте посмотрим, как добавлять модули, компоненты и маршрутизацию.

Вы можете посмотреть код здесь.

git checkout -b часть2.0 происхождение / часть2.0

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

npm install bootstrap@3

Нам нужно добавить таблицу стилей начальной загрузки в файл .angular-cli.json.

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

Наш первый модуль

Давайте добавим новый модуль employee. Внутри «src / app» запустите

ng generate module employee

or

ng g m employee

Подождите, мы собираемся лениво загружать этот модуль, поэтому нам нужна маршрутизация внутри модуля, верно? Итак, мы также собираемся создать маршрутизацию.

ng g m employee --routing

Время для компонента

Будет создан новый модуль employee с собственной маршрутизацией. позволяет добавить компонент для перечисления сотрудника. Итак, внутри папки employee запустите

ng g c employee-list

Если вы проверите employee.module.ts, вы обнаружите, что компонент импортирован и объявлен в модуле, поэтому он будет доступен для конкретного модуля.

Теперь нам нужен сервис для связи с API. Давайте создадим и это. Итак, внутри папки employee запустите

ng g s employee

Нам нужен модал для сохранения сотрудника. Итак, мы создаем классного сотрудника. Так что в той же папке запустите

ng g class employee

Маршрутизация - попали на страницу Итак, мы создали все необходимые файлы. Но подождите, как мы будем его загружать? Сначала мы добавим маршрутизацию в маршрутизацию приложения для отложенной загрузки модуля.

{ path: 'employee', loadChildren: './employee/employee.module#EmployeeModule', },{ path: '**', redirectTo: 'employee', pathMatch: 'full' }

Добавьте эти маршруты в константные маршруты.

Итак, теперь он будет перенаправлен на маршрут сотрудника. Но подождите, где же наш компонент списка. Нам нужно добавить дополнительные маршруты и модули в файл маршрутизации сотрудников. Итак, в employee-routing.module.ts измените маршруты, например

const routes: Routes = [{ path: "", children: [{ path: "list", component: EmployeeListComponent }, { path: "", redirectTo: 'list', pathMatch: 'full' }] }];

Не забудьте импортировать EmployeeListComponent. Теперь вы можете увидеть работу сотрудника.

API / Сервис

Теперь нам нужно загрузить данные из API, чтобы вывести список сотрудников. Перед этим нам нужно создать модальное окно данных для сотрудника. Итак, в файле employee.ts добавьте

export class Employee { department: string; gender: string; name: string; _id: string; }

Что мы собираемся сделать, так это то, что у нас будут свои собственные сервисы внутри каждого функционального модуля для API calss. Где мы будем устанавливать URL-адреса API и его логику. Итак, в наш employee.service.ts мы сначала внедрим сервис angular http.

constructor(private http: Http) { }

давайте создадим функцию для получения сотрудников из API.

getEmployees() { return this.http.get(base_url + "employee").map((data: Response) => { return data.json() }); }

Служба http возвращает Observable, поэтому мы подпишемся на него в компоненте списка. Итак, мы собираемся внедрить этот EmployeeService в компонент списка.

constructor(private empService:EmployeeService) { }

В это время cli выдаст ошибку, что для этой службы есть поставщик.

ERROR Error: Uncaught (in promise): Error: No provider for EmployeeService!

Нам нужно предоставить эту услугу в модуле сотрудников. Подробнее об услуге читайте здесь.
Так что добавьте услугу в провайдер модуля сотрудника. Итак, в декораторе NgModule после объявлений добавьте

providers: [EmployeeService]

В этот раз вы можете получить еще одну ошибку, например

ERROR TypeError: this.http.get(...).map is not a function

Это потому, что нам нужно импортировать карту из rxjs.

import 'rxjs/add/operator/map';

Итак, теперь мы можем вызвать API и отобразить результат. Итак, в employee-list.component.ts мы вызовем функцию.

getEmployees(){ this.empService.getEmployees().subscribe(data=>{ console.log(data); this.employeelist = data; }) } ngOnInit() { this.getEmployees(); }

Чтобы узнать больше о ngOnInit, прочтите хуки жизненного цикла в документации Angular.

Следует помнить пару моментов:

  • В employee.service.ts base_url должен быть конечной точкой API. Позже мы поставим одну точку. Для текущих требований мы просто сохраняем их как есть.
  • Также у нас есть config.ts в папке src, в которой будет base_url, необходимый для обновления конечной точки API.
  • В карте мы преобразуем ответ, который в строковом формате будет преобразован в JSON.
  • Наконец, вам нужно импортировать HttpModule из @ angular / http в employee.module.ts, чтобы служба http работала.
  • У нас будет SharedModule, который не будет загружаться лениво и включает компонент заголовка. Мы добавим app.component.html.

И, наконец, наш модуль сотрудников

Так же добавьте новый модуль и протестируйте его. Я создал модуль project, который вы могли бы попробовать.

Первоначально опубликовано на www.logicmanialab.com.