-
Notifications
You must be signed in to change notification settings - Fork 0
/
notes.txt
93 lines (73 loc) · 1.73 KB
/
notes.txt
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
85
86
87
88
89
90
91
92
93
notes on angular 6 learning
====
setup:
> npm install @angular/cli@6.8.3
> ng new hello-ng6
====
Course outline / Structure:
1 getting starts
2 the basics
3 components & data bindings
4 directives
5 services & DI
6 Routing
7 Observables
8 Forms
9 Pipes
10 HTTP
11 Authentication
12 Optimisations & ngModules
13 Deployments
14 Animations & Testing
====
ngModel:
- used for two way data bindings from form elements.
--
// component html part
<input type="text" [(ngModel)]="firstName">
<span> {{firstName}} </span>
--
// module file part
import {FormsModule} from '@angular/forms';
...{
imports: [
BootstrapModule,
FormsModule
],
...}
====
bootstrap CSS include
inside angular.json file
> projects > [project name] > architect > build >
"styles" > [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]
// note: whole bootstrap will be injected to DOM and internal stylesheet i.e. inside <style>...</style> inside the head.
====
angular app load flow:
index.html > auto injections for scripts:
1 inline.bundle.js
2 polyfills.bundle.js
3 styles.bundle.js
4 vendor.bundle.js
5 main.bundle.js
bootstrap:
main.ts >
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"
import { AppModule } from "./app/app.module"
...
platformBrowserDynamic.bootstrapModule(AppModule);
====
ngModule:
declarations: all the components to be used in the module.
imports: other modules dependencies .e.g forms, http.
providers: register module services.
bootstrap: all the components that must to be known by angular at the time of analysing index.html (usually only AppComponent)
====
Observables
import { Observable, of } from 'rxjs';
// custom success observable (mock)
getMockData() Observable<Hero[]> {
return of(HEROES) ;
}