This document provides an overview of building a website with Angular 2+. It discusses key Angular concepts like modules, components, templates, directives, services, pipes and custom configuration. It also demonstrates how to debug Angular applications in Chrome. Code examples are provided to illustrate modules, components, templates, directives, services, pipes and custom configuration. The document aims to teach developers how to use various parts of Angular to build a website.

1. Building a Website With
Angular 2+
JOE JORDEN
SENIOR CONSULTANT, NEUDESIC
@COBALTCODER WWW.COBALTCODER.COM WWW.NEUDESIC.COM

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

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
 Configure Launch.json
 Do not hit F12 in Chrome while debugging
 That will disconnect VS Code from Chrome

19. Demo – Debugging
 Show debugging in Chrome

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

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