-
Notifications
You must be signed in to change notification settings - Fork 0
/
BeginningAngular
84 lines (69 loc) · 2.83 KB
/
BeginningAngular
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
Root
Main.ts
This is the start point of the application, it performs the application bootstrap, and tells angular which module is the start up module
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
App.Module.ts
Main application module, this is where we can globally import and load components.
Also this is where we place our routing code.
We specify the page to show when none is specified, and also when a page is not found.
Index.html
HTML5 page markup, with a <app-root></app-root> declaration.
App.Component.ts
This is where we declare the component at the app (root) level.
import { Component } from "@angular/core";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent{
pageTitle = 'Demo Angular Application';
}
app.component.html
contains the Html that will be rendered by Angular in place of the <app-root> declaration.
Add Routing
First we will change the index.html page to add basic styling with bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Angular Application</title>
<base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
Now in the app.module.ts you will notice the AppRouterModule?, we'll get rid of this and add an import for the RouterModule
import { RouterModule } from '@angular/router';
path: 'nnn' or '' or '**'
redirectTo:
component:
,RouterModule.forRoot([
{ path: 'welcome', component: WelcomeComponent },
{ path: '', redirectTo: 'welcome', pathMatch: 'full' },
{ path: '**', redirectTo: 'welcome', pathMatch: 'full' }])
<div class="container">
<div class="jumbotron1 text-center">
<h1>{{pageTitle}}</h1>
<p>{{pageSubTitle}}</p>
</div>
<nav class='navbar navbar-expand navbar-light bg-light'>
<ul class='nav nav-pills'>
<li><a class='nav-link' routerLinkActive='active' [routerLink]="['/welcome']">Home</a></li>
<li><a class='nav-link' routerLinkActive='active' [routerLink]="['/uk']">UK</a></li>
<li><a class='nav-link' routerLinkActive='active' [routerLink]="['/business']">Business</a></li>
<li><a class='nav-link' routerLinkActive='active' [routerLink]="['/politics']">Politics</a></li>
<li><a class='nav-link' routerLinkActive='active' [routerLink]="['/sport']">Sport</a></li>
</ul>
</nav>
<div class='container'>
<router-outlet></router-outlet>
</div>
</div>