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?

Doug Corbett

December 12, 2017
Tweet

More Decks by Doug Corbett

Other Decks in Programming

Transcript

  1. Angular Goodness
    Tuesday December 12, 2017
    Doug Corbett
    [email protected]

    View Slide

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

    View Slide

  3. Very Brief Overview

    View Slide

  4. We are going to discuss …

    View Slide

  5. We are going to discuss …
    Angular Forms

    View Slide

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

    View Slide

  7. Common Concerns

    View Slide

  8. Purpose of Forms
    • manipulate data
    • validation
    • enable controls based on validity
    • feedback to the user

    View Slide

  9. Common to Angular Forms
    • Both rely on FormGroup and FormControl
    • Both inherit from AbstractControl
    • Can nest FormGroups

    View Slide

  10. Form and Control States
    • dirty / pristine
    • touched / untouched
    • valid
    • errors collection
    Field 1:
    Field 2:
    Field 3:
    Cancel Save

    View Slide

  11. Vocabulary
    Form model – represents the html form, including controls, value, state, errors.
    Not the same as the data model

    View Slide

  12. Vocabulary
    Data Model - Representation of the data to be saved or otherwise processed.

    View Slide

  13. Model Diagram
    HTML Form Model Data Model API/DB

    View Slide

  14. Template-based Forms

    View Slide

  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.

    View Slide

  16. Anatomy
    Template - HTML that includes the following
    • Form
    • form controls
    • data binding details
    • validation
    Component
    • Properties for data binding
    • supporting methods

    View Slide

  17. Vocabulary
    Template reference variable – a way to reference FormGroups and FormControls in the
    HTML
    Examples: #f="ngForm"
    #inputVar="ngModel"

    View Slide

  18. Vocabulary
    Two-way data binding – how Angular binds model properties to a template.

    type=“text”
    [(ngModel)] = “datamodel. someField”
    name=“someField”
    #someFieldVar=“ngModel” />

    View Slide

  19. HTML Form

    View Slide

  20. Template Driven Form
    Demo

    View Slide

  21. What’s Missing ?

    View Slide

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

    View Slide

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

    View Slide

  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.

    View Slide

  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

    View Slide

  26. Reactive Forms

    View Slide

  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.

    View Slide

  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

    View Slide

  29. Ways to access Form Model Properties
    1. speakerForm.controls.firstName.valid
    2. speakerForm.get('firstName').valid
    3. firstName = new FormControl();

    View Slide

  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.

    View Slide

  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.

    View Slide

  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();

    View Slide

  33. Dynamic Behavior
    We can leverage observables
    by listening to formControls’ valueChanged event.
    by using the debounce function to provide a nicer user experience.

    View Slide

  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.

    View Slide

  35. Vocabulary
    Attribute binding – a way to assign html attributes values based on dynamic
    values produced in Angular
    Examples: attr.for="{{ 'title' + i }}"

    View Slide

  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

    View Slide

  37. Final Thoughts

    View Slide

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

    View Slide

  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.

    View Slide

  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

    View Slide

  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.

    View Slide

  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

    View Slide