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.

Building a website with angular 2

61 views

Published on

Presentation deck for Desert Code Camp 2017

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Building a website with angular 2

  1. 1. Building a Website With Angular 2+ JOE JORDEN SENIOR CONSULTANT, NEUDESIC @COBALTCODER WWW.COBALTCODER.COM WWW.NEUDESIC.COM
  2. 2. Why Are We Here?  Learn to use various parts of Angular:  Modules  Components  Templates  Directives  Services  Pipes  Custom Configuration  Chrome Debugging
  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  Configure Launch.json  Do not hit F12 in Chrome while debugging  That will disconnect VS Code from Chrome
  19. 19. Demo – Debugging  Show debugging in Chrome
  20. 20. Summary  Modules  Components  Templates  Directives  Services  Pipes  Custom Configuration  Chrome Debugging
  21. 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

×