Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 3be1003

Browse files
readme - initial section 1 updated
readme - initial section 1 updated
0 parents commit 3be1003

File tree

1 file changed

+306
-0
lines changed

1 file changed

+306
-0
lines changed

‎README.md

Lines changed: 306 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,306 @@
1+
1 Angular Routing and Navigation
2+
=====================
3+
- The `Angular Router enables navigation from one view (component)` to the another/next as users perform tasks, views (component)
4+
- Routing simply means navigating between different view (component)
5+
- **RouterModule**
6+
- RouterModule helps to `create routes`, which allows us to move from one part of the application to another part or from one view to another
7+
- A separate NgModule/Angular Module that provides the necessary service providers and directives for navigating through application views
8+
- **Router**
9+
- The Angular Router is an `optional service that presents a particular component view` for a given URL, it is not part of the Angular core
10+
- The Angular Router enables navigation from one view to the another as users perform application tasks/actions
11+
- **router-outlet**
12+
- The directive `(<router-outlet>)` that marks where the router displays a view (a container to hold different views/components loaded as users perform application tasks/actions)
13+
- **routerLink**
14+
- The attribute/directive for binding a clickable HTML element to a route which denotes link/view name to load/show in `(<router-outlet>)`
15+
16+
1. Angular Routing Application setup steps:
17+
---------------------
18+
1. Generate a new Angular project/app with routing option
19+
2. Generate departmentList and employeeList, and other required components if any
20+
3. Configure the Routes
21+
4. Add buttons and use a directive to navigate
22+
23+
1.1. Generate a new Angular project/app with routing option
24+
---------------------
25+
- Command to create an Angular app with routing: `ng new routing-demo-app --routing`
26+
27+
- Creating a routing module manually in any existing application:
28+
1. In index.html file under `<head> tag` add `<base href="/">` (It helps application to build/generate/constructs URL/view to load properly)
29+
2. In the app, folder create `app-routing.module.ts` file (contains RoutingModule/Routes for application - enter a required path and components details)
30+
3. import app-routing.module.ts file in `app.module.ts` file also add in the imports array
31+
32+
1.2. Generate required components if any (departmentList and employeeList, and other)
33+
---------------------
34+
- Angular CLI command to generate component: `ng g c employee-list -it -is` (Inline Template / Inline style)
35+
- Angular CLI command to generate component: `ng g c department-list -it -is` and other required components if any
36+
37+
1.3. Configure the Routes
38+
---------------------
39+
- In `app.component.html` add tag/directive: `<router-outlet> </router-outlet>`
40+
- In the app-routing.module.ts file, enter required paths and component details to navigate
41+
42+
1.4. Add buttons and use directive to navigate
43+
---------------------
44+
- In `app.component.html` add links/buttons: `<a routerLink="/home" routerLinkActive="active">Home</a>`
45+
- We can also use `<a routerLink="/home" routerLinkActive="active" routerLinkActiveOptions="{exact:true}">Home</a>` to make current exact link active
46+
47+
> **Syntax & Example**: index.html
48+
```html
49+
<!doctype html>
50+
<html lang="en">
51+
52+
<head>
53+
<meta charset="utf-8">
54+
<title>AngularRoutingNavigation</title>
55+
<base href="/">
56+
57+
<meta name="viewport" content="width=device-width, initial-scale=1">
58+
<link rel="icon" type="image/x-icon" href="favicon.ico">
59+
</head>
60+
61+
<body>
62+
<app-root></app-root>
63+
</body>
64+
65+
</html>
66+
```
67+
68+
> **Syntax & Example**: app-routing.module.ts
69+
```ts
70+
import { NgModule } from '@angular/core';
71+
import { Routes, RouterModule } from '@angular/router';
72+
73+
import { DepartmentContactComponent } from './components/department-contact/department-contact.component';
74+
import { DepartmentDetailsComponent } from './components/department-details/department-details.component';
75+
import { DepartmentListComponent } from './components/department-list/department-list.component';
76+
import { DepartmentOverviewComponent } from './components/department-overview/department-overview.component';
77+
import { EmployeeListComponent } from './components/employee-list/employee-list.component';
78+
import { HomeComponent } from './components/home/home.component';
79+
import { ProductListComponent } from './components/product-list/product-list.component';
80+
import { WildcardPagenotfoundComponent } from './components/wildcard-pagenotfound/wildcard-pagenotfound.component';
81+
82+
const routes: Routes = [
83+
// default path
84+
// { path: '', component:DepartmentListComponent},
85+
{ path: 'home', component: HomeComponent },
86+
{ path: '', redirectTo: 'home', pathMatch: 'full' },
87+
{ path: 'departments', component: DepartmentListComponent },
88+
{
89+
path: 'departments/:id',
90+
component: DepartmentDetailsComponent,
91+
children: [
92+
{ path: 'overview', component: DepartmentOverviewComponent },
93+
{ path: 'contact', component: DepartmentContactComponent },
94+
]
95+
},
96+
{ path: 'employees', component: EmployeeListComponent },
97+
{ path: 'products', component: ProductListComponent },
98+
{ path: '**', component: WildcardPagenotfoundComponent }
99+
];
100+
101+
@NgModule({
102+
imports: [RouterModule.forRoot(routes)],
103+
exports: [RouterModule]
104+
})
105+
export class AppRoutingModule { }
106+
107+
// to store all routing component and avoid importing/writing duplicate list of components in app.routing.module / app.module.
108+
// create an array of all routing components export it, then import it in app.module.ts
109+
export const RoutingComponents = [
110+
DepartmentContactComponent,
111+
DepartmentDetailsComponent,
112+
DepartmentListComponent,
113+
DepartmentOverviewComponent,
114+
EmployeeListComponent,
115+
HomeComponent,
116+
ProductListComponent,
117+
WildcardPagenotfoundComponent,
118+
]
119+
```
120+
121+
> **Syntax & Example**: app.module.ts
122+
```ts
123+
import { BrowserModule } from '@angular/platform-browser';
124+
import { NgModule } from '@angular/core';
125+
126+
import { AppRoutingModule, RoutingComponents } from './app-routing.module';
127+
import { AppComponent } from './app.component';
128+
129+
// RoutingComponents array - list all the components used in application
130+
131+
// import { DepartmentContactComponent } from './components/department-contact/department-contact.component';
132+
// import { DepartmentDetailsComponent } from './components/department-details/department-details.component';
133+
// import { DepartmentListComponent } from './components/department-list/department-list.component';
134+
// import { DepartmentOverviewComponent } from './components/department-overview/department-overview.component';
135+
// import { EmployeeListComponent } from './components/employee-list/employee-list.component';
136+
// import { HomeComponent } from './components/home/home.component';
137+
// import { ProductListComponent } from './components/product-list/product-list.component';
138+
// import { WildcardPagenotfoundComponent } from './components/wildcard-pagenotfound/wildcard-pagenotfound.component';
139+
140+
@NgModule({
141+
declarations: [
142+
AppComponent,
143+
RoutingComponents,
144+
// DepartmentDetailsComponent,
145+
// DepartmentContactComponent,
146+
// DepartmentOverviewComponent,
147+
// DepartmentListComponent,
148+
// EmployeeListComponent,
149+
// HomeComponent,
150+
// ProductListComponent,
151+
// WildcardPagenotfoundComponent
152+
153+
],
154+
imports: [
155+
BrowserModule,
156+
AppRoutingModule
157+
],
158+
providers: [],
159+
bootstrap: [AppComponent]
160+
})
161+
export class AppModule { }
162+
```
163+
164+
> **Syntax & Example**: app.component.html
165+
```html
166+
<!--The content below is only a placeholder and can be replaced.-->
167+
<h1 style="text-align:center;">{{ appTitle }}</h1>
168+
169+
<!-- add buttons/links to navigate pages or routings -->
170+
<nav>
171+
<a routerLink="/home" routerLinkActive="active" routerLinkActiveOptions="{exact:true}">Home</a>
172+
&nbsp;&nbsp;
173+
<a routerLink="/departments" routerLinkActive="active" routerLinkActiveOptions="{exact:true}">Departments</a>
174+
&nbsp;&nbsp;
175+
<a routerLink="/employees" routerLinkActive="active" routerLinkActiveOptions="{exact:true}">Employees</a>
176+
&nbsp;&nbsp;
177+
<a routerLink="/products" routerLinkActive="active" routerLinkActiveOptions="{exact:true}">Products</a> &nbsp;&nbsp;
178+
</nav>
179+
180+
<hr />
181+
182+
<!-- ng new routing-demo-app --routing - defulat include router-outlet in app.component.html. routed views goes here -->
183+
<router-outlet></router-outlet>
184+
```
185+
186+
> **Syntax & Example**: app.component.ts
187+
```ts
188+
import { Component } from '@angular/core';
189+
190+
@Component({
191+
selector: 'app-root',
192+
templateUrl: './app.component.html',
193+
styleUrls: ['./app.component.css']
194+
})
195+
export class AppComponent {
196+
public appTitle = 'Angular Routing and Navigation Module';
197+
}
198+
```
199+
200+
> **Syntax & Example**: styles.css
201+
```css
202+
/* You can add global styles to this file, and also import other style files */
203+
204+
/* common global generic styles */
205+
.custom-divider {
206+
margin: 30px 0px;
207+
border-bottom:2px dashed gray;
208+
}
209+
210+
h1,h2,h3 {
211+
text-transform: uppercase;
212+
/* text-transform: capitalize; */
213+
}
214+
215+
h2 {
216+
text-decoration: underline;
217+
}
218+
219+
body {
220+
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
221+
letter-spacing: 2px;
222+
}
223+
224+
li {
225+
margin: 10px 0px;
226+
}
227+
228+
input {
229+
padding: 5px;
230+
}
231+
232+
button {
233+
border-radius: 5px;
234+
padding: 10px 15px;
235+
background-color: teal;
236+
border: none;
237+
outline: none;
238+
cursor: pointer;
239+
color: lightcyan;
240+
}
241+
242+
.button-sub {
243+
background-color: rgba(0, 128, 128, 0.6);
244+
color: white;
245+
}
246+
247+
/* route and navigation - links */
248+
nav a {
249+
padding:10px;
250+
text-decoration: none;
251+
margin-top: 10px;
252+
display: inline-block;
253+
background-color: #eeeeee;
254+
border-radius: 4px;
255+
}
256+
257+
nav a:visited, a:link, a {
258+
color:#607D8B;
259+
}
260+
261+
nav a:hover {
262+
color:#039be5;
263+
background-color: #CFD8DC;
264+
}
265+
266+
nav a.active {
267+
color:#039be5;
268+
font-weight: bold;
269+
text-decoration: underline;
270+
}
271+
272+
/* route and navigation - list badge */
273+
.items {
274+
275+
}
276+
277+
.items li, .link-sub {
278+
width: 200px;
279+
cursor: pointer;
280+
width: 150px;
281+
padding: 10px;
282+
text-decoration: none;
283+
margin-top: 10px;
284+
background-color: #eeeeee;
285+
border-radius: 4px;
286+
}
287+
288+
.badge {
289+
background: teal;
290+
padding: 10px;
291+
margin-right: 5px;
292+
position: relative;
293+
left: -10px;
294+
border-radius: 4px 0px 0px 4px;
295+
}
296+
297+
.description {
298+
299+
}
300+
301+
/* optional parameter - show highlighted */
302+
.items li.selected {
303+
color:#039be5;
304+
background-color: #CFD8DC;
305+
}
306+
```

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /