This document provides an overview of key concepts for building a website with Angular, including modules, components, templates, directives, services, pipes, custom configuration, debugging in Chrome, and elements. It discusses each concept and provides examples from demo code. The document is intended to teach how to use various parts of Angular to build a website.

1. Building a Website With
Angular
JOE JORDEN
@COBALTCODER WWW.COBALTCODER.COM

2. Why Are We Here?
 Learn to use various parts of Angular:
 Modules
 Components
 Templates
 Directives
 Services
 Pipes
 Custom Configuration
 Chrome Debugging
 Elements (time permitting)

3. Modules
 Cohesive block of code
 declarations - the view classes that belong to this module.
 Three kinds of view classes: components, directives, and pipes.
 exports - the subset of declarations made visible to other modules.
 imports - declares exports from other modules for use in the current module.
 providers - list of services that this module contributes to the global collection of
services; they become accessible in all parts of the app.
 bootstrap - the main application view, called the root component, that hosts all other
app views.

4. Demo - Modules
 Show app module

5. Components
 A component controls a section of the screen called a view.
 Component's application logic defined in a class.
 Class interacts with the view through an API.

6. Demo – Components
 Show existing components

7. Templates
 A form of HTML that tells Angular how to render the component.
 Looks like HTML with some subtle differences
 handlebars {{}}
 bindings
 Attribute: []
 Event: ()
 Two-way data: [()]

8. Demo – Templates
 Show existing templates

9. Directives
 A directive is a class that modifies the DOM.
 Decorated with @Directive
 When Angular renders a template, it transforms the DOM according to the
instructions given by directives.
 Some built-in directives
 *ngFor (structural directive)
 *ngIf (structural directive)
 ngModel (attribute directive)
 Can build custom directives

10. Demo - Directives
 Show *ngFor, *ngIf, ngModel in templates
 CountDown directive

11. Services
 Used to share information and methods between components
 Angular has no formal definition of a service
 Make it @Injectable for dependency injection

12. Demo - Services
 Show existing services

13. Pipes
 Used to modify output in a template
 Built-in pipes (https://angular.io/api?type=pipe)
 DatePipe
 CurrencyPipe
 DecimalPipe
 PercentPipe
 LowerCasePipe
 UpperCasePipe
 TitleCasePipe
 Pipes can be chained
 Can build custom pipes

14. Pipe Parameters
 Can send parameters using :
 I.E. <p>The client's anniversary is {{ anniversary | date:"MM/dd/yy" }} </p>

15. Demo - Pipes
 Show existing pipes

16. Using Custom Configuration
 Custom json files
 Access with custom class

17. Demo – Configuration
 Show custom configuration implementation

18. Debugging in Chrome
 Install extension
 Configure Launch.json

19. Demo – Debugging
 Show debugging in Chrome

20. Elements
 Custom elements that house the Angular component
 Self-bootstrapping
 Can be surfaced in other frameworks (e.g. React, Vue, Preact, etc.)

21. Demo - Elements
 Show elements

22. Summary
 Modules
 Components
 Templates
 Directives
 Services
 Pipes
 Custom Configuration
 Chrome Debugging
 Elements

23. References
 Code: https://github.com/CobaltCoder/CodeCamp2018
 SlideShare: https://www.slideshare.net/CobaltCoder/building-a-website-with-angular-2-80621227
 Blog: http://www.cobaltcoder.com
 In depth tutorial: http://www.angular.io