Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

Building a website with angular

Download to read offline

Presentation for Desert Code Camp 2018

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Building a website with angular

  1. 1. Building a Website With Angular JOE JORDEN @COBALTCODER WWW.COBALTCODER.COM
  2. 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. 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. 4. Demo - Modules  Show app module
  5. 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. 6. Demo – Components  Show existing components
  7. 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. 8. Demo – Templates  Show existing templates
  9. 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. 10. Demo - Directives  Show *ngFor, *ngIf, ngModel in templates  CountDown directive
  11. 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. 12. Demo - Services  Show existing services
  13. 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. 14. Pipe Parameters  Can send parameters using :  I.E. <p>The client's anniversary is {{ anniversary | date:"MM/dd/yy" }} </p>
  15. 15. Demo - Pipes  Show existing pipes
  16. 16. Using Custom Configuration  Custom json files  Access with custom class
  17. 17. Demo – Configuration  Show custom configuration implementation
  18. 18. Debugging in Chrome  Install extension  Configure Launch.json
  19. 19. Demo – Debugging  Show debugging in Chrome
  20. 20. Elements  Custom elements that house the Angular component  Self-bootstrapping  Can be surfaced in other frameworks (e.g. React, Vue, Preact, etc.)
  21. 21. Demo - Elements  Show elements
  22. 22. Summary  Modules  Components  Templates  Directives  Services  Pipes  Custom Configuration  Chrome Debugging  Elements
  23. 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

Presentation for Desert Code Camp 2018

Views

Total views

62

On Slideshare

0

From embeds

0

Number of embeds

1

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×