Building a website with angular
Download as PPTX, PDF0 likes110 views
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.
![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: [()]](https://image.slidesharecdn.com/buildingawebsitewithangular-181006020107/85/Building-a-website-with-angular-7-320.jpg)
Building a website with angular
- 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