Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular Goodness

Angular Goodness

Please join me as we saunter through the land of Angular and build something from nothing. ( Yes I said saunter. Work with me, please.) We will visit with some of the symbiotic creatures like TypeScript, ES6, node, npm, and Angular-CLI. We will take some Angular components and services out for some exercise. I want to share with you a sense of what a fun and joyous experience is it to build an Angular app.

This presentation is organized to give you a good sense of how quickly you can build an application from an idea with some nimble fingers. We won’t even have to come up with our own business idea. The internet is chock full of them. So let’s borrow from an already successful online auction website who will go nameless. We will also have a back-end server “read to go” handling all of our data service needs. In this presentation, we will focus on the happy path on the client-side. If it was easy to build an application, what would that look like? What would it feel like?

E710a7268891ac8c9c13756fcd28fa5f?s=128

Doug Corbett

December 12, 2017
Tweet

Transcript

  1. Angular Goodness Tuesday December 12, 2017 Doug Corbett dougccorbett@gmail.com

  2. Agenda Design 1 Simple Pages 3 CRUD Pages 4 Security

    5 Scaffold 2
  3. Very Brief Overview

  4. We are going to discuss …

  5. We are going to discuss … Angular Forms

  6. We are going to discuss … Angular Forms Assumptions: None

    really
  7. Common Concerns

  8. Purpose of Forms • manipulate data • validation • enable

    controls based on validity • feedback to the user
  9. Common to Angular Forms • Both rely on FormGroup and

    FormControl • Both inherit from AbstractControl • Can nest FormGroups
  10. Form and Control States • dirty / pristine • touched

    / untouched • valid • errors collection Field 1: Field 2: Field 3: Cancel Save
  11. Vocabulary Form model – represents the html form, including controls,

    value, state, errors. Not the same as the data model
  12. Vocabulary Data Model - Representation of the data to be

    saved or otherwise processed.
  13. Model Diagram HTML Form Model Data Model API/DB

  14. Template-based Forms

  15. Directives FormsModule • ngForm - access form model • ngModel

    - two way binding • ngModelGroup - grouping input elements within the form Notes: Angular creates the form model for us in template driven forms.
  16. Anatomy Template - HTML that includes the following • Form

    • form controls • data binding details • validation Component • Properties for data binding • supporting methods
  17. Vocabulary Template reference variable – a way to reference FormGroups

    and FormControls in the HTML Examples: #f="ngForm" #inputVar="ngModel"
  18. Vocabulary Two-way data binding – how Angular binds model properties

    to a template. <form (ngSubmit)=“save()” #sampleForm=“ngForm”> <input id=“someField” type=“text” [(ngModel)] = “datamodel. someField” name=“someField” #someFieldVar=“ngModel” /> </form>
  19. HTML Form

  20. Template Driven Form Demo

  21. What’s Missing ?

  22. What’s Missing ? Need to respond dynamically to user entered

    data.
  23. What’s Missing ? Need to respond dynamically to user entered

    data. Dynamic validation based on user entry.
  24. What’s Missing ? Need to respond dynamically to user entered

    data. Dynamic validation based on user entry. Need to handle multiple child data dynamically.
  25. What’s Missing ? Need to respond dynamically to user entered

    data. Dynamic validation based on user entry. Need to handle multiple child data dynamically. Easy Testability
  26. Reactive Forms

  27. Directives ReactiveFormsModule • formGroup - to bind the form element

    in the template to the root formGroup element of the Form Model, tells Angular not to build its own form model • formControl • formControlName - used to bind each input element to its associated form control • formGroupName • formArrayName Notes: We create the form model when using reactive forms.
  28. Anatomy Template - HTML that includes the following • form

    • form controls • data binding details Component • create the form model • Validation • Properties for data binding • supporting methods
  29. Ways to access Form Model Properties 1. speakerForm.controls.firstName.valid 2. speakerForm.get('firstName').valid

    3. firstName = new FormControl();
  30. FormBuilder FormBuilder is a class we can use to build

    a form model based on configuration. It is a factory that creates formGroups, FormControls and FormArrays.
  31. Validation 1. Built-in • Validators.required • Validators.pattern • Validators.minLength(10) 2.

    Custom – Allow you to create your own custom rules, like “age must be between 18 and 130. 3. Cross field – custom validation applied at the formGroup level possibly taking into consideration two or more formControls contained within the formGroup.
  32. Dynamic Validation We can add or remove validation based on

    user actions. mycontrol.clearValidators(); mycontrol.setValidators(Validators.required); mycontrol.setValidators([ Validators.required, Validators.maxLength(30) ]); mycontrol.updateValueAndValidity();
  33. Dynamic Behavior We can leverage observables by listening to formControls’

    valueChanged event. by using the debounce function to provide a nicer user experience.
  34. Dynamically duplicate elements on a form We can encapsulate a

    group of formControls in a formGroup and create a formArray of this formGroup. Examples: Addresses Phone Numbers Notes Websites etc. And even these can be nested.
  35. Vocabulary Attribute binding – a way to assign html attributes

    values based on dynamic values produced in Angular Examples: attr.for="{{ 'title' + i }}"
  36. Easier Testability Encapsulating business logic in classes allows for easier

    testability. Reactive forms relies on class components to define the form model and some business rules and it has access to the data model. All of these elements can be tested directly. This is not so with template-based forms. Demo
  37. Final Thoughts

  38. Final Thoughts Both template-based and reactive forms allow us to

    build forms to manage application data.
  39. Final Thoughts Both template-based and reactive forms allow us to

    build forms to manage application data. Template-based forms are easier to work with and will be familiar to Angular 1.x developers.
  40. Final Thoughts Both template-based and reactive forms allow us to

    build forms to manage application data. Template-based forms are easier to work with and will be familiar to Angular 1.x developers. Depending on your needs, neither is considered better than the other … however
  41. Final Thoughts Both template-based and reactive forms allow us to

    build forms to manage application data. Template-based forms are easier to work with and will be familiar to Angular 1.x developers. Depending on your needs, neither is considered better than the other … however Reactive forms provides all the power of template based forms and then some.
  42. Reference Materials Official Angular Documentation https://angular.io/guide/forms Angular 4 Front to

    Back – Brad Traversy https://www.udemy.com/angular-4-front-to-back Angular Reactive Forms https://app.pluralsight.com/library/courses/angular-2-reactive-forms ng-book – The Complete Book on Angular 4 – Nathan Murray and Ari Lerner Event Demo code https://github.com/dougcorbett/event-demo