Введение в ленивую загрузку Angular с маршрутизацией!
Angular предоставляет очень чистый и простой способ модулировать приложение с помощью NgModules. Но Angular также предоставляет простой способ разделить пакет приложений на части на основе группы функций или маршрутов и сократить время начальной загрузки. А остальные фрагменты загружаются только тогда, когда пользователи посещают этот конкретный маршрут. Звучит безподобно!
Итак, давайте попробуем реализовать очень простое приложение, которое реализует отложенную загрузку Angular-6.
Предварительные требования
Последняя версия npm (6.1.0 или выше)
Последняя версия angular cli (6.0.8 или выше)
Во-первых, давайте создадим новое приложение angular, используя следующую команду angular-cli
ng new lazy-loading --routing
Флаг «- routing» в приведенных выше командах дает команду angular-cli генерировать специальные ts-файлы для маршрутизации для нашего нового приложения.
После того, как все файлы сгенерированы и зависимости узлов установлены, cd в папку «lazy-loading» и запустите приложение в режиме разработки, используя следующую команду:
ng serve
После того, как приложение запустится без ошибок, перейдите по URL-адресу приложения в браузере, который обычно должен быть
Теперь давайте создадим два модуля Angular, которые представляют две функции приложения и будут содержать компоненты, специфичные для функций, и будут доступны по разным URL-адресам. Создайте новые модули и компоненты модулей, используя следующую команду:
ng generate module admin --routing ng generate component admin/admin-dashboard ng generate module staff --routing ng generate component staff/staff-dashboard
Как и при создании приложения, флаг «- routing» в приведенных выше командах гарантирует, что файлы модуля маршрутизации будут созданы и для наших новых модулей. Он также заботится об интеграции admin.module и admin-routing.module, а также staff.module и staff-routing.module.
admin-routing.module и staff-routing.module будут отвечать за обработку всех маршрутов, специфичных для администратора и персонала, и должны иметь сопоставления для путей маршрутов к компонентам. .
Теперь приступим к определению наших маршрутов.
Добавьте следующие маршруты в admin.routing.module.ts.
import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component'; const routes: Routes = [ { path: '', component: AdminDashboardComponent } ];
Добавьте следующие маршруты в staff.routing.module.ts
import { StaffDashboardComponent } from './staff-dashboard/staff-dashboard.component'; const routes: Routes = [ { path: '', component: StaffDashboardComponent } ];
В приведенных выше примерах кода мы связали корневой путь конкретного модуля с компонентами панели управления.
И, наконец, мы соединяем наш app-routing.module с этими двумя модулями, используя следующую конфигурацию маршрутов, добавленную в app-routing.module. Обратите внимание, что в следующей конфигурации маршрутов мы не привязываем путь к компоненту, вместо этого мы используем тег loadChildren, в котором указан путь к файлу модуля, за которым следует «#» (хэштег) и имя класса NgModule.
const routes: Routes = [ { path: 'admin', loadChildren: './admin/admin.module#AdminModule' }, { path: 'staff', loadChildren: './staff/staff.module#StaffModule' }, { path: '', redirectTo: '', pathMatch: 'full' } ];
Итак, теперь Angular знает, какие файлы / фрагменты загружать, когда в приложении запрашиваются определенные маршруты.
Давайте добавим подписку к app.component.html, чтобы мы могли нажимать на ссылки для посещения различных частей нашего приложения.
<div style="text-align:center"> <button routerLink="">Home</button> <button routerLink="/admin">Admin</button> <button routerLink="/staff">Staff</button> <h1>Welcome to {{ title }}!</h1> </div> <router-outlet></router-outlet>
Тег «router-outlet» - это то место, где будут отображаться наши представления маршрута.
К этому времени, когда вы сохраните свои файлы, вы должны увидеть 3 разных файла фрагментов (admin-admin-module.js, main.js, staff-staff-module.js), которые создаются в журналах «ng serve». . Если журналы не отображаются, как указано ниже, попробуйте убить и повторно запустить «ng serve».
chunk {admin-admin-module} admin-admin-module.js, admin-admin-module.js.map (admin-admin-module) 11.3 kB [rendered] chunk {main} main.js, main.js.map (main) 12.4 kB [initial] [rendered] chunk {runtime} runtime.js, runtime.js.map (runtime) 8.05 kB [entry] [rendered] chunk {staff-staff-module} staff-staff-module.js, staff-staff-module.js.map (staff-staff-module) 7.59 kB [rendered]
Это означает, что наше приложение разделено на 3 части
- Корневой чанк (app.module)
- Блок, специфичный для администратора (admin.module)
- Фрагмент персонала (Staff.module)
(Если не работает, попробуйте убить службу ng и перезапустить ее)
Как только все заработает и компилируется должным образом, откройте вкладку Chrome dev tools / Network и перезагрузите страницу.
Вы увидите, что все необходимые файлы загружены.
После того, как вы нажмете кнопку администратора, вы увидите, что новый сетевой запрос выполняется для получения блока, определенного администратором, и то же самое произойдет, когда вы нажмете кнопку персонала.
Удачной ленивой загрузки :)
Проверьте работающую версию приложения:
Https://bnmiprkr.github.stackblitz.io/
Обратите внимание на более прохладную версию приложения:
Https://yqniawkn.github.stackblitz.io/
Хотите узнать, как сделать его немного красивее за 4 шага, ознакомьтесь с следующим постом о том, как добавить Angular Material в этот проект :)