В предыдущем посте мы создали новый проект 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.