├── .gitignore
├── LICENSE
├── LICENSE.CC0
├── Procfile
├── README.md
├── angular-advanced-topics
├── README.md
└── control-css-classes.png
├── angular-basic-training.pdf
├── angular-fundamentals
└── README.md
├── angular-other-topics
├── README.md
├── animations
│ ├── README.md
│ └── web-animations-compatibility.png
├── change-detection
│ ├── README.md
│ └── change-detection-tree.png
└── lazy-loading
│ ├── README.md
│ ├── build-with-lazy-loading.png
│ ├── build-without-lazy-loading.png
│ ├── chunk.PNG
│ └── main.PNG
├── deck2pdf-0.3.0
├── bin
│ ├── deck2pdf
│ └── deck2pdf.bat
└── lib
│ ├── deck2pdf-0.3.0.jar
│ ├── groovy-2.4.4.jar
│ └── itextpdf-5.5.1.jar
├── index.html
├── make-pdf.py
├── package-lock.json
├── package.json
├── pdf.html
├── reactive-programming-with-angular
├── EXERCISES.md
├── README.md
└── demo
│ └── README.md
├── setup
└── README.md
├── spas-tooling-and-typescript
├── README.md
└── spa-flow.png
├── testing
└── README.md
└── useful-resources
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | .idea/
4 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2016, Gofore Oy
2 |
3 | Permission to use, copy, modify, and/or distribute this software for any
4 | purpose with or without fee is hereby granted, provided that the above
5 | copyright notice and this permission notice appear in all copies.
6 |
7 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
8 | WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
9 | MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
10 | ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
11 | WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
12 | ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
13 | OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
14 |
--------------------------------------------------------------------------------
/LICENSE.CC0:
--------------------------------------------------------------------------------
1 | Creative Commons Legal Code
2 |
3 | CC0 1.0 Universal
4 |
5 | CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE
6 | LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN
7 | ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS
8 | INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES
9 | REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS
10 | PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM
11 | THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED
12 | HEREUNDER.
13 |
14 | Statement of Purpose
15 |
16 | The laws of most jurisdictions throughout the world automatically confer
17 | exclusive Copyright and Related Rights (defined below) upon the creator
18 | and subsequent owner(s) (each and all, an "owner") of an original work of
19 | authorship and/or a database (each, a "Work").
20 |
21 | Certain owners wish to permanently relinquish those rights to a Work for
22 | the purpose of contributing to a commons of creative, cultural and
23 | scientific works ("Commons") that the public can reliably and without fear
24 | of later claims of infringement build upon, modify, incorporate in other
25 | works, reuse and redistribute as freely as possible in any form whatsoever
26 | and for any purposes, including without limitation commercial purposes.
27 | These owners may contribute to the Commons to promote the ideal of a free
28 | culture and the further production of creative, cultural and scientific
29 | works, or to gain reputation or greater distribution for their Work in
30 | part through the use and efforts of others.
31 |
32 | For these and/or other purposes and motivations, and without any
33 | expectation of additional consideration or compensation, the person
34 | associating CC0 with a Work (the "Affirmer"), to the extent that he or she
35 | is an owner of Copyright and Related Rights in the Work, voluntarily
36 | elects to apply CC0 to the Work and publicly distribute the Work under its
37 | terms, with knowledge of his or her Copyright and Related Rights in the
38 | Work and the meaning and intended legal effect of CC0 on those rights.
39 |
40 | 1. Copyright and Related Rights. A Work made available under CC0 may be
41 | protected by copyright and related or neighboring rights ("Copyright and
42 | Related Rights"). Copyright and Related Rights include, but are not
43 | limited to, the following:
44 |
45 | i. the right to reproduce, adapt, distribute, perform, display,
46 | communicate, and translate a Work;
47 | ii. moral rights retained by the original author(s) and/or performer(s);
48 | iii. publicity and privacy rights pertaining to a person's image or
49 | likeness depicted in a Work;
50 | iv. rights protecting against unfair competition in regards to a Work,
51 | subject to the limitations in paragraph 4(a), below;
52 | v. rights protecting the extraction, dissemination, use and reuse of data
53 | in a Work;
54 | vi. database rights (such as those arising under Directive 96/9/EC of the
55 | European Parliament and of the Council of 11 March 1996 on the legal
56 | protection of databases, and under any national implementation
57 | thereof, including any amended or successor version of such
58 | directive); and
59 | vii. other similar, equivalent or corresponding rights throughout the
60 | world based on applicable law or treaty, and any national
61 | implementations thereof.
62 |
63 | 2. Waiver. To the greatest extent permitted by, but not in contravention
64 | of, applicable law, Affirmer hereby overtly, fully, permanently,
65 | irrevocably and unconditionally waives, abandons, and surrenders all of
66 | Affirmer's Copyright and Related Rights and associated claims and causes
67 | of action, whether now known or unknown (including existing as well as
68 | future claims and causes of action), in the Work (i) in all territories
69 | worldwide, (ii) for the maximum duration provided by applicable law or
70 | treaty (including future time extensions), (iii) in any current or future
71 | medium and for any number of copies, and (iv) for any purpose whatsoever,
72 | including without limitation commercial, advertising or promotional
73 | purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each
74 | member of the public at large and to the detriment of Affirmer's heirs and
75 | successors, fully intending that such Waiver shall not be subject to
76 | revocation, rescission, cancellation, termination, or any other legal or
77 | equitable action to disrupt the quiet enjoyment of the Work by the public
78 | as contemplated by Affirmer's express Statement of Purpose.
79 |
80 | 3. Public License Fallback. Should any part of the Waiver for any reason
81 | be judged legally invalid or ineffective under applicable law, then the
82 | Waiver shall be preserved to the maximum extent permitted taking into
83 | account Affirmer's express Statement of Purpose. In addition, to the
84 | extent the Waiver is so judged Affirmer hereby grants to each affected
85 | person a royalty-free, non transferable, non sublicensable, non exclusive,
86 | irrevocable and unconditional license to exercise Affirmer's Copyright and
87 | Related Rights in the Work (i) in all territories worldwide, (ii) for the
88 | maximum duration provided by applicable law or treaty (including future
89 | time extensions), (iii) in any current or future medium and for any number
90 | of copies, and (iv) for any purpose whatsoever, including without
91 | limitation commercial, advertising or promotional purposes (the
92 | "License"). The License shall be deemed effective as of the date CC0 was
93 | applied by Affirmer to the Work. Should any part of the License for any
94 | reason be judged legally invalid or ineffective under applicable law, such
95 | partial invalidity or ineffectiveness shall not invalidate the remainder
96 | of the License, and in such case Affirmer hereby affirms that he or she
97 | will not (i) exercise any of his or her remaining Copyright and Related
98 | Rights in the Work or (ii) assert any associated claims and causes of
99 | action with respect to the Work, in either case contrary to Affirmer's
100 | express Statement of Purpose.
101 |
102 | 4. Limitations and Disclaimers.
103 |
104 | a. No trademark or patent rights held by Affirmer are waived, abandoned,
105 | surrendered, licensed or otherwise affected by this document.
106 | b. Affirmer offers the Work as-is and makes no representations or
107 | warranties of any kind concerning the Work, express, implied,
108 | statutory or otherwise, including without limitation warranties of
109 | title, merchantability, fitness for a particular purpose, non
110 | infringement, or the absence of latent or other defects, accuracy, or
111 | the present or absence of errors, whether or not discoverable, all to
112 | the greatest extent permissible under applicable law.
113 | c. Affirmer disclaims responsibility for clearing rights of other persons
114 | that may apply to the Work or any use thereof, including without
115 | limitation any person's Copyright and Related Rights in the Work.
116 | Further, Affirmer disclaims responsibility for obtaining any necessary
117 | consents, permissions or other rights required for any use of the
118 | Work.
119 | d. Affirmer understands and acknowledges that Creative Commons is not a
120 | party to this document and has no duty or obligation with respect to
121 | this CC0 or use of the Work.
--------------------------------------------------------------------------------
/Procfile:
--------------------------------------------------------------------------------
1 | web: npm start
2 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Angular (2+) Basic Training
2 |
3 | ## Training topics
4 | - [SPAs, Tooling and TypeScript](spas-tooling-and-typescript/README.md)
5 | - Tooling
6 | - Node.js and npm
7 | - ES2015 (ES6)
8 | - Webpack
9 | - Using IDEs and Editors for Angular and TypeScript
10 | - Angular CLI
11 | - TypeScript
12 | - Advantages
13 | - Typing
14 | - Interfaces
15 | - [Angular Fundamentals](angular-fundamentals/README.md)
16 | - Background
17 | - Architecture
18 | - NgModules
19 | - Components
20 | - Templates
21 | - Component Lifecycle Hooks
22 | - Two-way Data Binding
23 | - Services
24 | - Asynchronous and Server-side Communication
25 | - [Angular Advanced Topics](angular-advanced-topics/README.md)
26 | - Router
27 | - Pipes
28 | - Forms
29 | - Dependency Injection
30 | - Directives
31 | - [Reactive Programming with Angular](reactive-programming-with-angular/README.md)
32 | - Promises
33 | - Observables
34 | - Reactive Programming with Observables
35 | - RxJS
36 | - [Testing](testing/README.md)
37 | - Unit Testing
38 | - E2E Testing
39 | - [Lazy Loading](angular-other-topics/lazy-loading/README.md)
40 | - [Animations](angular-other-topics/animations/README.md)
41 |
42 | [Useful Resources](useful-resources/README.md)
43 |
44 | ### Open training slides on your own computer
45 |
46 | npm install -g live-server
47 | live-server --cors
48 |
--------------------------------------------------------------------------------
/angular-advanced-topics/README.md:
--------------------------------------------------------------------------------
1 | # Angular Advanced Topics
2 | - Router
3 | - Forms
4 | - Pipes
5 | - Directives
6 |
7 | ---
8 |
9 | # Router
10 | - Core responsibilities:
11 | - Map URL into app state
12 | - Provide transitions from one URL to another (state to another)
13 | - Supports lazy loading of certain paths
14 |
15 | ---
16 |
17 | # Router Basics
18 | Route declarations
19 |
20 | _app.module.ts_
21 | ```typescript
22 | import { NgModule } from '@angular/core';
23 | *import { RouterModule } from '@angular/router';
24 |
25 | *const routeConfig = [
26 | * {
27 | * path: 'todos',
28 | * component: TodosComponent
29 | * }
30 | *];
31 |
32 | @NgModule({
33 | declarations: [
34 | AppComponent, TodosComponent, TodoItemComponent
35 | ],
36 | imports: [
37 | BrowserModule,
38 | * RouterModule.forRoot(routeConfig),
39 | ],
40 | bootstrap: [AppComponent]
41 | })
42 | export class AppModule { }
43 | ```
44 |
45 | ---
46 |
47 | # Router Basics
48 | `` declares the placeholder for routed component tree
49 |
50 | _app.component.html_
51 | ```html
52 | App works!
53 |
54 | ```
55 |
56 | ---
57 |
58 | # Router - More advanced routes
59 |
60 | _app.module.ts_
61 | ```typescript
62 | const routeConfig = [
63 | {
64 | path: 'todos',
65 | * children: [
66 | * {
67 | * path: '',
68 | * component: TodosComponent
69 | * },
70 | * {
71 | * path: ':index',
72 | * component: EditTodoItemComponent
73 | * }
74 | * ]
75 | }
76 | ];
77 | ```
78 |
79 | declares routes `todos/` and `todos/:index`. `:index` is named placeholder for path parameter that can be accessed within the component.
80 |
81 | ---
82 |
83 | # Redirects
84 | - By default matching of URLs is done with _startsWith_ algorithm (and everything starts with path `'''`)
85 | - `pathMatch: 'full'` can be used to set the algorithm to full matching
86 | - Redirects can be done by using `redirectTo` instead of specifying `component`
87 |
88 | _app.module.ts_
89 | ```typescript
90 | const routeConfig = [
91 | {
92 | * path: ''
93 | * pathMatch: 'full',
94 | * redirectTo: 'todos/'
95 | },
96 | {
97 | path: 'todos',
98 | component: TodosComponent
99 | }
100 | ];
101 | ```
102 |
103 | ---
104 |
105 | # Accessing Route Parameters
106 | - Route parameters can be accessed via `params` field of `ActivatedRoute` as observable
107 | - Once parameters change new event will be sent.
108 | - Makes it possible to reuse the same component instead of instantiating a new one
109 |
110 | ```typescript
111 | @Component({})
112 | export class EditTodoItemComponent {
113 | constructor(route: ActivatedRoute) {
114 | this.route.params.subscribe(params => {
115 | this.index = params.index;
116 | });
117 | }
118 | ```
119 |
120 | ---
121 |
122 | # Fragments & Query Parameters
123 | - Fragments (`example.com#key=value`) and query parameters (`example.com?key=value`) are shared by all routes
124 | - Can be accessed like path parameters:
125 |
126 | ```typescript
127 | @Component({})
128 | export class MyComponent {
129 | constructor(route: ActivatedRoute) {
130 | this.route.queryParams.subscribe(params => { // or .fragment
131 | this.key = params.key;
132 | });
133 | }
134 | ```
135 |
136 | ---
137 |
138 | # Router - Navigating
139 | Two ways to navigate between states:
140 | - Imperatively inside a component:
141 |
142 | ```typescript
143 | this.router.navigateByUrl('todos/1')
144 | ```
145 |
146 | - Declaratively inside a template:
147 |
148 | ```typescript
149 |
150 | ```
151 |
152 | ---
153 |
154 | # Navigation syntax
155 | - Parts of paths can be composed easily with the array syntax
156 | - Array syntax concatenates the parts with `/`
157 | - So the below are the same:
158 |
159 | ```typescript
160 | this.router.navigateByUrl('todos/1/tasks');
161 | this.router.navigate(['todos', 1, 'tasks']);
162 | ```
163 |
164 | ```html
165 |
166 |
167 | ```
168 |
169 | ---
170 |
171 | # Absolute vs. Relative Navigation
172 |
173 | - If the path starts with a slash (`/`), it is an absolute navigation.
174 | - Example:
175 | ```typescript
176 | // Assuming we are now in example.com/todos/1
177 | this.router.navigateByUrl('tasks'); // example.com/todos/1/tasks
178 | this.router.navigateByUrl('/tasks'); // example.com/tasks
179 | ```
180 | - `../` can be used to go one level up
181 | ```typescript
182 | // Assuming we are now in example.com/todos/1/tasks
183 | this.router.navigateByUrl('../'); // example.com/todos/1
184 | ```
185 |
186 | ---
187 |
188 | # Router Guards
189 | - Guards allow changing the behaviour of routing for certain routes
190 | - Guards can be registered for navigation into and out of route
191 | - Guards can cancel the routing and instead redirect user to somewhere else
192 | - Example use cases:
193 | - Authentication
194 | - Preloading data for component
195 | - Logging
196 | - "You have unsaved changes. Are you sure you want to leave?"
197 |
198 | ---
199 |
200 | # Guard Types
201 | - Multiple guards available for each route:
202 | - `CanActivate` to mediate navigation to a route
203 | - `CanActivateChild` to mediate navigation to a child route
204 | - `CanDeactivate` to mediate navigation away from the current route
205 | - `Resolve` to perform route data retrieval before route activation
206 | - `CanLoad` to mediate navigation to a feature module loaded asynchronously
207 | - The `Can*` guards can return either boolean or promise (resolving to a boolean value) to allow or prevent navigation
208 |
209 | ---
210 | # Guard Example
211 | - Usage:
212 |
213 | _app.module.ts_
214 | ```typescript
215 | const routeConfig = [
216 | {
217 | path: 'todos',
218 | * canActivate: [AuthGuard],
219 | component: TodosComponent
220 | }
221 | ];
222 | ```
223 |
224 | _auth-guard.ts_
225 | ```typescript
226 | import { CanActivate, Router,
227 | ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
228 |
229 | @Injectable()
230 | export class AuthGuard implements CanActivate {
231 | constructor(private router: Router, private authService: AuthService) {}
232 |
233 | canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
234 | return this.authService.checkLogin(state.url);
235 | }
236 | ```
237 |
238 | ---
239 |
240 | # Router URL Strategies
241 | - Two strategies for URL formation:
242 | - `PathLocationStrategy`: HTML5 _pushState_ style (`example.com/todos/1`) (default)
243 | - `HashLocationStrategy`: Hash URLs (`example.com/#/todos/1`)
244 | - Setting the strategy:
245 |
246 | ```typescript
247 | @NgModule({
248 | imports: [
249 | BrowserModule,
250 | RouterModule.forRoot(routeConfig, `{ useHash: true }`)
251 | ],
252 | declarations: [ AppComponent ],
253 | bootstrap: [ AppComponent ]
254 | })
255 | export class AppModule {}
256 | ```
257 |
258 | ---
259 |
260 | # Forms
261 | - Angular provides highly advanced form management functionality:
262 | - Two-way data binding
263 | - Change tracking
264 | - Validation
265 | - Error handling
266 |
267 | ---
268 |
269 | # Template-driven vs. Reactive Forms
270 | - Angular forms can be either template-driven or reactive
271 | - Both have their own `NgModule`: `FormsModule` and `ReactiveFormsModule`
272 | - Both modules are in `@angular/forms` npm package
273 | - The underlying principles are the same but the usage is different
274 | - Both can be used within a single application, even on single component
275 | - Only template-driven forms are covered in this training, as they are enough for most use cases
276 |
277 | ---
278 |
279 | # Reactive Forms
280 | - As the name suggests, based on reactive programming (covered tomorrow)
281 | - Form controls defined in component instead of template
282 | - Require more boilerplate code
283 | - For complex use cases
284 | - More easy to test
285 |
286 | ---
287 |
288 | # Reactive Forms Example
289 |
290 | ```typescript
291 | import { Component } from '@angular/core';
292 | import { FormGroup, FormBuilder, Validators } from '@angular/forms';
293 |
294 | export class TodosComponent {
295 | todosForm: FormGroup;
296 |
297 | constructor(private fb: FormBuilder) {
298 | this.todosForm = this.fb.group({
299 | name: ['', Validators.required],
300 | done: [false],
301 | });
302 | }
303 | }
304 | ```
305 |
306 | ```html
307 |
311 | ```
312 |
313 | ---
314 |
315 | # Template-driven Forms
316 | - Forms declared in templates rather than in component
317 | - Each input inside form element is attached by default
318 | - Each input needs to have (unique) name attribute set
319 |
320 | ```html
321 |