├── .gitignore
├── README.md
├── _config.yaml
├── app
├── app-routing.module.ts
├── app.component.ts
├── app.module.ts
├── main.ts
├── tasks
│ ├── task-detail.component.ts
│ ├── tasks-list.component.ts
│ ├── tasks-routing.module.ts
│ ├── tasks.component.ts
│ └── tasks.module.ts
└── users
│ ├── users-list.component.ts
│ ├── users-routing.module.ts
│ ├── users.component.ts
│ └── users.module.ts
├── assets
└── view.gif
├── index.html
├── package.json
├── style.css
├── systemjs.config.js
└── tsconfig.json
/.gitignore:
--------------------------------------------------------------------------------
1 | ###########################
2 | #WebStorm Files
3 | ###########################
4 | .idea/
5 | *ipr
6 | *.iml
7 |
8 | ###########################
9 | #NPM Files
10 | ###########################
11 | node_modules/
12 | npm-debug.log
13 |
14 | ###########################
15 | #Angular2 Files
16 | ###########################
17 | typings/
18 | app/*.js
19 | app/*.js.map
20 | app/tasks/*.js
21 | app/tasks/*.js.map
22 | app/users/*.js
23 | app/users/*.js.map
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Lazy Loading with Angular2 Routing
2 |
3 | Let's dive into one of the cool features of **Angular2 Router** i.e. **Lazy Loading of Modules**.
4 | If we go back to **Angular 1.x** we know that, there we were defining **Controller** and **Template** for each route, while templates were getting
5 | lazy loaded, but js files weren't. But in **Angular2** it is possible to load your modules as and when they are required. So let's not get into the `coding mode`.
6 |
7 | So we have this small app which has basically 3 modules:
8 |
9 | 1. AppModule - This is the root module of the application
10 | 2. TasksModule - This is the child module of `AppModule`
11 | 3. UsersModule - Child module of `AppModule`, sibling module of `TasksModule`
12 |
13 | Following are various components in which the application has been divided:
14 |
15 | 1. AppComponent - This is the root component of the application.
16 | 2. TasksComponent - It is the parent component in the tasks module.
17 | 3. TaskDetailComponent - This component is responsible for displaying details of the task.
18 | 4. TasksListComponent - Component that displays list of tasks.
19 | 5. UsersComponent - It is the parent component in the users module and container component for UsersListComponent.
20 | 6. UsersListComponent - Displays the list of users
21 |
22 | Before we move on further, let's note that there are 3 other important parts of this app:
23 |
24 | 1. ROUTING - This is the main router for our application.
25 | 2. TASKS_ROUTING - This is the child router. Takes care of routing for tasks module.
26 | 3. USERS_ROUTING - Takes care of routing for users module.
27 |
28 | Now, let's see some code now:
29 |
30 | ```app.module.ts
31 | import {NgModule} from '@angular/core';
32 | import {BrowserModule} from '@angular/platform-browser';
33 | import {AppComponent} from './app.component';
34 | import {AppRoutingModule} from './app-routing.module';
35 |
36 | @NgModule({
37 | imports: [
38 | BrowserModule,
39 | AppRoutingModule
40 | ],
41 | declarations: [
42 | AppComponent
43 | ],
44 | bootstrap: [AppComponent]
45 | })
46 | export class AppModule {
47 | }
48 | ```
49 |
50 | > I am assuming that readers of this blog have some idea about Angular2 and its routing but would still try to give overview of few things.
51 |
52 | In the above code you can see that we have imported **NgModule** and **BrowserModule**. We need `NgModule` decorator for defining module-level components, directives, pipes etc.
53 | **BrowserModule** registers critical application service providers and also re-exports **CommonModule** from `@angular/common`.
54 | We provide `AppComponent` in **declarations**, to tell **Angular** that `AppComponent` belongs to `AppModule`.
55 | **bootstrap** is to advise **Angular** to bootstrap `AppComponent` into the **DOM** once `AppModule` starts.
56 |
57 | Our `AppComponent` looks something like this:
58 |
59 | ```app.component.ts
60 | import {Component} from '@angular/core';
61 |
62 | @Component({
63 | selector: 'my-app',
64 | template: `
65 |
69 |
70 | `
71 | })
72 |
73 | export class AppComponent {
74 | }
75 | ```
76 |
77 | As you can see above, we have two anchor tags for navigation - one takes us to `tasks` page and another one takes us to `users` page.
78 | You can see `routerLink` property here which has a string path.
79 |
80 | Let's see `TasksModule`:
81 |
82 | ```tasks.module.ts
83 | import {NgModule} from '@angular/core';
84 | import {CommonModule} from '@angular/common';
85 | import {TasksComponent} from './tasks.component';
86 | import {TaskDetailComponent} from './task-detail.component';
87 | import {TasksListComponent} from './tasks-list.component';
88 | import {TasksRoutingModule} from "./tasks-routing.module";
89 |
90 | @NgModule({
91 | imports: [
92 | CommonModule,
93 | TasksRoutingModule
94 | ],
95 | declarations: [
96 | TasksComponent,
97 | TaskDetailComponent,
98 | TasksListComponent
99 | ]
100 | })
101 | export class TasksModule {
102 | }
103 | ```
104 |
105 | We have imported **CommonModule** because it provides important directives such as **NgIf** and **NgFor**.
106 | And here are the various components:
107 |
108 | ```tasks.component.ts
109 | import {Component} from '@angular/core';
110 |
111 | @Component({
112 | template: `
113 |
135 | `,
136 | })
137 |
138 | export class TasksListComponent {
139 |
140 | constructor(private router:Router) {
141 | }
142 |
143 | private tasks = [
144 | {id: '1', title: 'Code Cleanup'},
145 | {id: '2', title: 'Review Code'},
146 | {id: '3', title: 'Build to Prod'}
147 | ];
148 | private errorMessage:any = '';
149 |
150 | onSelect(task) {
151 | this.router.navigate(['/tasks', task.id]);
152 | }
153 | }
154 | ```
155 |
156 | In order to keep the demo as simple as possible, we have a small hard-coded list of tasks. We are displaying a list of tasks
157 | and on clicking on each task, user would be navigated to `task-detail` page where details of a task would be displayed.
158 |
159 | ```task-detail.component.ts
160 | import {Component} from '@angular/core';
161 |
162 | @Component({
163 | template: `
164 |
165 | Some task detail to show up here.
166 |
167 | `
168 | })
169 |
170 | export class TaskDetailComponent {
171 | }
172 | ```
173 |
174 | And here is the`TasksRoutingModule` which has route configuration for our`tasks` module:
175 |
176 | ```tasks-routing.module.ts
177 | import {NgModule} from '@angular/core';
178 | import {RouterModule} from '@angular/router';
179 | import {TasksComponent} from './tasks.component';
180 | import {TaskDetailComponent} from './task-detail.component';
181 | import {TasksListComponent} from './tasks-list.component';
182 |
183 | @NgModule({
184 | imports: [
185 | RouterModule.forChild([
186 | {
187 | path: '',
188 | component: TasksComponent,
189 | children: [
190 | {
191 | path: '',
192 | component: TasksListComponent
193 | },
194 | {
195 | path: ':id',
196 | component: TaskDetailComponent,
197 | }
198 | ]
199 | }
200 | ])
201 | ],
202 | exports: [
203 | RouterModule
204 | ]
205 | })
206 | export class TasksRoutingModule {
207 | }
208 | ```
209 |
210 | So when a user lands to the application, by default `tasks` module would be displayed to him. So when the path would be simply `/tasks`, user would see list of tasks and once
211 | user clicks on a particular task, id would be added as the **routeParam** and route would change to '/tasks/id'(id of that particular task).
212 |
213 | Now, let's quickly have a look at the `users` module.
214 |
215 | ```users.module.ts
216 | import {NgModule} from '@angular/core';
217 | import {CommonModule} from '@angular/common';
218 | import {UsersComponent} from './users.component';
219 | import {UsersListComponent} from './users-list.component';
220 | import {UsersRoutingModule} from "./users-routing.module";
221 |
222 | @NgModule({
223 | imports: [
224 | CommonModule,
225 | UsersRoutingModule
226 | ],
227 | declarations: [
228 | UsersComponent,
229 | UsersListComponent
230 | ]
231 | })
232 | export class UsersModule {
233 | }
234 | ```
235 |
236 | and here is the `UsersComponent` which is the parent component for `UsersList`. Here are both the components:
237 |
238 | ```users.component.ts
239 | import {Component} from '@angular/core';
240 |
241 | @Component({
242 | template: `
243 |