Cover image for Angular 6 by Example

Angular 6 by Example

Author Kevin Hennessy , Chandermani Arora
Release Date: 2018/06/01
ISBN: 9781788835176
Topic:
0%
427
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

Harness the power of Angular Components, Router, Forms, Directives and much more to build professional-grade web apps with TypeScript

About This Book
  • Get to grips with #1 JavaScript framework and explore modern concepts for developing single page applications
  • Develop full-featured web applications using Angular 6 and TypeScript from scratch
  • Learn professional web programming techniques to supercharge your Angular projects
Who This Book Is For

Angular by Example is an essential guide for beginners who want to get started with Angular. You'll start building applications immediately with the featured examples and uncover a simpler approach to JavaScript web development. Prior experience with HTML, CSS, and JavaScript is necessary.

What You Will Learn
  • Get introduced to the Angular framework and create a simple guess the number app that explores core features of the framework
  • Dig deeper into the angular framework by building the 7-minute workout app throughout the book
  • Explore primary building blocks of Angular – components
  • Go deep into the inner workings of Angular 6 directives and components
  • Learn about cross-component communication using Angular events
  • Get started with the unit and E2E testing
  • Understand how to encounter scenarios such as authentication and authorization, localization, performance, and migrating apps from Angular 1 to Angular 6
In Detail

Angular helps you build faster, efficient, and flexible cross-platform applications. Creating complex and rich web applications, with a lighter resource footprint, has never been easier or faster. Angular is now at release 6, with significant changes compared to previous versions.

In this third edition of Angular by Example, you'll build three apps with varying degrees of complexity. The book starts with a simple “Guess the Number”game, which serves as a platform to launch you into the world of Angular. Next, you will learn to develop a popular “7-Minute Workout” app, covering the building blocks of Angular. The final app, “Personal Trainer” morphs the existing “7-Minute Workout” into a full-fledged personal workout builder and runner, covering advanced directive building, which is the most fundamental and powerful feature of Angular.In addition to this, you will learn about testability and the framework constructs Angular provides to effectively test your app. The book concludes by providing you with practical advice and useful tips that will come in handy as you build more apps with Angular.

Style and approach

This unique web development book will help you get to grips with Angular and explore a powerful solution for developing single page applications. Start building applications immediately with the featured examples, and uncover a simpler approach to JavaScript web development.

Downloading the example code for this book You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Table of Contents

  1. Title Page
  2. Copyright and Credits
    1. Angular 6 by Example Third Edition
  3. Packt Upsell
    1. Why subscribe?
    2. PacktPub.com
  4. Contributors
    1. About the authors
    2. About the reviewer
    3. Packt is searching for authors like you
  5. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
      1. Download the example code files
      2. Conventions used
    4. Get in touch
      1. Reviews
  6. Getting Started
    1. Angular basics
      1. The component pattern
      2. Using the component pattern in web applications
      3. Why weren't components used before in Angular?
      4. What's new that enables Angular to use the component pattern?
        1. Web Components
        2. Angular and Web Components
        3. Language support in Angular
          1. ES2015
          2. TypeScript
        4. Putting it all together
      5. Angular modules
      6. The basic steps to building Angular applications
    2. The customary Hello Angular app – Guess the Number!
      1. Building Guess the Number!
      2. Designing our first component
      3. Developing our first component
        1. Installing Bootstrap
      4. What do we have so far?
      5. The host file - index.html
        1. Custom element
      6. The component file
        1. The import statement
        2. Decorator
        3. Defining the class
      7. The module file
      8. Bootstrapping
      9. We're up and running!
    3. Digging deeper
      1. Interpolation
      2. Tracking changes in the number of tries
      3. Expressions
        1. The safe navigation operator
      4. Data binding
        1. Property binding
        2. Event binding
      5. Structural directives
    4. Revisiting our app
    5. Looking at how our code handles updates
    6. Maintaining state
      1. Component as the container for state
      2. Change detection
    7. Tools
    8. Resources
    9. Summary
  7. Building Our First App – 7 Minute Workout
    1. What is 7 Minute Workout?
    2. Downloading the code base
    3. Setting up the build
      1. Angular CLI
        1. Code transpiling
    4. Organizing code
      1. Feature folders
    5. The 7 Minute Workout model
    6. First feature module
    7. App bootstrapping
    8. Exploring Angular modules
      1. Comprehending Angular modules
    9. Our first component - WorkoutRunnerComponent
      1. Component lifecycle hooks
    10. Building the 7 Minute Workout view
      1. The Angular binding infrastructure
      2. Interpolations
      3. Property binding
        1. Property versus attribute
        2. Property binding continued...
          1. Interpolation syntactic sugar over property binding
          2. Quick expression evaluation
          3. Side effect-free binding expressions
        3. Angular directives
        4. Target selection for binding
      4. Attribute binding
      5. Style and class binding
      6. Attribute directives
      7. Styling HTML with ngClass and ngStyle
    11. Learning more about an exercise
      1. Adding descriptions and video panels
        1. Component with inputs
        2. Structural directives
        3. The ever-so-useful NgForOf
          1. Asterisk (*) in structural directives
          2. NgForOf performance
        4. Angular security
          1. Trusting safe content
        5. OnChange life cycle event
      2. Formatting exercise steps with innerHTML binding
      3. Displaying the remaining workout duration using pipes
      4. Angular pipes
        1. Pipe chaining
      5. Implementing a custom pipe - SecondsToTimePipe
      6. Adding the next exercise indicator using ngIf
      7. Pausing an exercise
      8. The Angular event binding infrastructure
        1. Event bubbling
        2. Event binding an $event object
      9. Two-way binding with ngModel
    12. Summary
  8. More Angular – SPA and Routing
    1. Exploring Single Page Application capabilities
      1. The Angular SPA infrastructure
        1. Angular routing
        2. Angular router
        3. Routing setup
      2. Adding start and finish pages
        1. Route configuration
          1. Pushstate API and server-side url-rewrites
        2. Rendering component views with router-outlet
        3. Route navigation
          1. The link parameter array
        4. Using the router service for component navigation
        5. Using the ActivatedRoute service to access route params
    2. Angular dependency Injection
      1. Dependency injection 101
      2. Exploring dependency injection in Angular
    3. Tracking workout history
      1. Building the workout-history-tracker service
      2. Integrating with WorkoutRunnerComponent
        1. Injecting dependencies with Constructor Injection
      3. Dependency injection in depth
        1. Registering dependencies
          1. Angular providers
          2. Value providers
          3. Factory providers
          4. Explicit injection using injector
        2. Dependency tokens
          1. Using InjectionToken
          2. Using string tokens
      4. Adding the workout history page
      5. Sorting and filtering history data using pipes
        1. The orderBy pipe
        2. Pipe chaining with search pipe
        3. Pipe gotcha with arrays
      6. Angular change detection overview
      7. Hierarchical injectors
        1. Registering component-level dependencies
        2. Angular DI dependency walk
      8.  Dependency injection with @Injectable
      9. Tracking route changes using the router service
    4. Fixing the video playback experience
      1. Using thumbnails for video
      2. Using the ngx-modialog library
        1. Creating custom dialogs
    5. Cross-component communication using Angular events
      1. Tracking exercise progress with audio
      2. Building Angular directives to wrap HTML audio
      3. Creating WorkoutAudioComponent for audio support
        1. Understanding template reference variables
        2. Template variable assignment
        3. Using the @ViewChild decorator
        4. The @ViewChildren decorator
      4. Integrating WorkoutAudioComponent
        1. Exposing WorkoutRunnerComponent events
        2. The @Output decorator
        3. Eventing with EventEmitter
        4. Raising events from WorkoutRunnerComponent
        5. Component communication patterns
        6. Injecting a parent component into a child component
          1. Using component life cycle events
        7. Sibling component interaction using events and template variables
    6. Summary
  9. Personal Trainer
    1. The Personal Trainer app - the problem scope
    2. Personal Trainer requirements
    3. The Personal Trainer model
    4. Getting started with the code for Personal Trainer
    5. Using the Personal Trainer model in Workout Builder services
    6. The Personal Trainer layout
    7. Personal Trainer navigation with routes
      1. Getting started with Personal Trainer navigation
      2. Introducing child routes to Workout Builder
      3. Adding the child routing component
      4. Updating the WorkoutBuilder component
      5. Updating the Workout Builder module
      6. Updating App Routing module
      7. Putting it all together
      8. Lazy loading of routes
      9. Integrating sub- and side-level navigation
        1. Sub-level navigation
        2. Side navigation
    8. Implementing workout and exercise lists
      1. WorkoutService as a workout and exercise repository
      2. Workout and exercise list components
      3. Workout and exercise list views
        1. Workouts list views
        2. Exercises list views
    9. Building a workout
      1. Finishing left nav
      2. Adding WorkoutBuilderService
      3. Adding exercises using ExerciseNav
      4. Implementing the Workout component
      5. Route parameters
      6. Route guards
        1. Implementing the resolve route guard
      7. Implementing the Workout component continued...
      8. Implementing the Workout template
    10. Angular forms
      1. Template-driven and reactive forms
      2. Template-driven forms
      3. Getting started
        1. Using NgForm
        2. ngModel
          1. Using ngModel with input and textarea
        3. Using ngModel with select
      4. Angular validation
      5. ngModel
        1. The Angular model state
        2. Angular CSS classes
      6. Workout validation
        1. Displaying appropriate validation messages
        2. Adding more validation
        3. Managing multiple validation messages
          1. Custom validation messages for an exercise
      7. Saving the workout
        1. More on NgForm
        2. Fixing the saving of forms and validation messages
      8. Reactive forms
        1. Getting started with reactive forms
        2. Using the FormBuilder API
        3. Adding the form model to our HTML view
        4. Adding form controls to our form inputs
        5. Adding validation
        6. Adding dynamic form controls
        7. Saving the form
        8. Custom validators
        9. Integrating a custom validator into our forms
      9. Configuration options for running validation
    11. Summary
  10. Supporting Server Data Persistence
    1. Angular and server interactions
      1. Setting up the persistence store
      2. Seeding the database
    2. The basics of the HTTPClient module
    3. Personal Trainer and server integration
      1. Loading exercise and workout data
      2. Loading exercise and workout lists from a server
        1. Adding the HTTPClient module and RxJS to our project
        2. Updating workout-service to use the HTTPClient module and RxJS
        3. Modifying getWorkouts() to use the HTTPClient module
      3. Updating the workout/exercise list pages
      4. Mapping server data to application models
      5. Loading exercise and workout data from the server
      6. Fixing the builder services
      7. Updating the resolvers
      8. Fixing the Workout and Exercise components
    4. Performing CRUD on exercises/workouts
      1. Creating a new workout
      2. Updating a workout
      3. Deleting a workout
      4. Fixing the upstream code
    5. Using promises for HTTP requests
    6. The async pipe
    7. Cross-domain access and Angular
      1. Using JSONP to make cross-domain requests
      2. Cross-origin resource sharing
    8. Handling workouts not found
    9. Fixing the 7 Minute Workout app
    10. Summary
  11. Angular Directives in Depth
    1. Classifying directives
      1. Components
      2. Attribute directives
      3. Structural directives
    2. Building a remote validator directive
      1. Validating workout names using async validators
    3. Building a busy indicator directive
      1. Injecting optional dependencies with the @Optional decorator
      2. Implementation one – using renderer
      3. Angular renderer, the translation layer
      4. Host binding in directives
        1. Property binding using @HostBinding
        2. Attribute binding
        3. Event binding
      5. Implementation two - BusyIndicatorDirective with host bindings
    4. Directive injection
      1. Injecting directives defined on the same element
      2. Injecting directive dependency from the parent
      3. Injecting a child directive (or directives)
      4. Injecting descendant directive(s)
    5. Building an Ajax button component
      1. Transcluding external components/elements into a component
        1. Content children and view children
        2. Injecting view children using @ViewChild and @ViewChildren
        3. Tracking injected dependencies with QueryList
        4. Injecting content children using @ContentChild and @ContentChildren
    6. Dependency injection using viewProvider
    7. Understanding structural directives
      1. TemplateRef
      2. ViewContainerRef
    8. Component styling and view encapsulation
      1. Overview of Shadow DOM
      2. Shadow DOM and Angular components
    9. Summary
  12. Testing Personal Trainer
    1. The need for automation
    2. Testing in Angular
      1. Types of testing
      2. Testing – who does it and when?
      3. The Angular testing ecosystem
    3. Getting started with unit testing
      1. Setting up Karma and Jasmine for unit testing
      2. Organization and naming of our test files
      3. Unit-testing Angular applications
        1. Unit-testing pipes
        2. Running our test files
      4. Unit-testing components
        1. Angular testing utilities
        2. Managing dependencies in our tests
      5. Unit-testing WorkoutRunnerComponent
        1. Setting up component dependencies
        2. Mocking dependencies - workout history tracker
        3. Mocking dependencies – workout service
        4. Mocking dependencies - router
        5. Configuring our test using TestBed
      6. Starting unit testing
      7. Debugging unit tests in Karma
      8. Unit-testing WorkoutRunner continued...
        1. Using Jasmine spies to verify method invocations
        2. Using Jasmine spies to verify dependencies
        3. Testing event emitters
        4. Testing interval and timeout implementations
        5. Testing workout pause and resume
      9. Unit-testing services
        1. Mocking HTTP request/response with HttpTestingController
      10. Unit-testing directives
        1. The TestBed class
        2. Testing remote validator
    4. Getting started with E2E testing
      1. Introducting Protractor
      2. Setting up Protractor for E2E testing
      3. Writing E2E tests for the app
      4. Setting up backend data for E2E testing
      5. More E2E tests
        1. Testing Workout Runner
        2. Using page objects to manage E2E testing
    5. Summary
  13. Some Practical Scenarios
    1. Building a new app
      1. Seed projects
    2. Angular performance
      1. Byte size
      2. Initial load time and memory utilization
      3. The Angular rendering engine
      4. Server-side rendering
      5. Offloading work to a web worker
      6. Performant mobile experience
      7. Change detection improvements
        1. Change detection
        2. Change detection setup
        3. When does change detection kick in?
        4. How does change detection work?
      8. Change detection performance
        1. Using immutable data structures
        2. Using Observables
        3. Manual change detection
    3. Handling authentication and authorization
      1. Cookie-based authentication
      2. Token-based authentication
      3. Handling authorization
        1. Adding authorization support
          1. Sharing user authentication context
          2. Restricting routes
          3. Conditionally rendering content based on roles
    4. Migrating AngularJS apps
      1. Should I migrate?
        1. Advantages of Angular
      2. Developing AngularJS apps today for easy migration
        1. One component per file
        2. Avoiding inline anonymous functions
        3. Avoiding $scope!
          1. Using controller as (controller aliasing) syntax everywhere
          2. Avoiding ng-controller
        4. Building using the AngularJS 1.5+ component API
      3. What to migrate?
      4. Preparing for Angular migration
        1. Identifying third-party dependencies
          1. jQuery libraries
          2. AngularJS libraries
        2. Choice of language
    5. Migrating AngularJS's Personal Trainer
      1. Setting up AngularJS's Personal Trainer locally
      2. Identifying dependencies
      3. Setting up the module loader
      4. Enabling TypeScript
      5. Adding Angular
        1. The ngUpgrade Library
        2. Bootstrapping the hybrid app
      6. Injecting Angular components into AngularJS views
      7. Migrating our first view to Angular component
        1. Injecting AngularJS dependencies into Angular
        2. Registering Angular components as directives
      8. Rules of engagement
        1. AngularJS directives and Angular components
        2. Resource sharing and dependency injection
          1. Sharing an AngularJS service
          2. Sharing an Angular service
        3. Change detection
      9. Migrating the start and finish pages
        1. AngularJS directive upgrade
        2. Replacing angular-translate with ngx-translate
          1. Using ngDoBootstrap for initialization
        3. Integrating the start and finish pages
        4. Getting rid of angular-translate
      10. Learning
    6. Summary
  14. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think
18.116.40.53