Angular 6 for Enterprise-Ready Web Applications

Angular 6 for Enterprise-Ready Web Applications

by Doguhan Uluca
Released May 2018
Publisher(s): Packt Publishing
ISBN: 9781786462909

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

A hands-on guide with a minimalist and flexible approach that enables quick learning and rapid delivery of cloud-ready enterprise applications with Angular 6

About This Book
  • Explore tools and techniques to push your web app to the next level
  • Master Angular app design and architectural considerations
  • Learn continuous integration and deploy your app on a highly available cloud infrastructure in AWS
Who This Book Is For

This book is for developers who want to confidently deliver high-quality and production-grade Angular apps from design to deployment. We assume that you have prior experience in writing a RESTful API with the tech stack of your choice; if you don't, you can still gain a lot of benefit from this book, which focuses on the entire scope of frontend development, from design to deployment!

What You Will Learn
  • Create full-stack web applications using Angular and RESTful APIs
  • Master Angular fundamentals, RxJS, CLI tools, unit testing, GitHub, and Docker
  • Design and architect responsive, secure and scalable apps to deploy on AWS
  • Adopt a minimalist, value-first approach to delivering your app with Kanban
  • Get introduced to automated testing with continuous integration on CircleCI
  • Optimize Nginx and Node.js web servers with load testing tools
In Detail

Angular 6 for Enterprise-Ready Web Applications follows a hands-on and minimalist approach demonstrating how to design and architect high quality apps.

The first part of the book is about mastering the Angular platform using foundational technologies. You will use the Kanban method to focus on value delivery, communicate design ideas with mock-up tools and build great looking apps with Angular Material. You will become comfortable using CLI tools, understand reactive programming with RxJS, and deploy to the cloud using Docker.

The second part of the book will introduce you to the router-first architecture, a seven-step approach to designing and developing mid-to-large line-of-business applications, along with popular recipes. You will learn how to design a solid authentication and authorization experience; explore unit testing, early integration with backend APIs using Swagger and continuous integration using CircleCI. In the concluding chapters, you will provision a highly available cloud infrastructure on AWS and then use Google Analytics to capture user behavior.

By the end of this book, you will be familiar with the scope of web development using Angular, Swagger, and Docker, learning patterns and practices to be successful as an individual developer on the web or as a team in the Enterprise.

Style and approach

The book follows a hands-on, value-first methodology to help readers design and architect small and large applications, while covering ancillary topics that all web developers should be aware of. The book uses minimal and flexible tools and techniques to enable quick learning and rapid delivery of high-quality and reliable Angular applications.

Table of contents

  1. Title Page
  2. Copyright and Credits
    1. Angular 6 for Enterprise-Ready Web Applications
  3. Packt Upsell
    1. Why subscribe?
    2. PacktPub.com
  4. Contributors
    1. About the author
    2. About the reviewers
    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. Setting Up Your Development Environment
    1. CLI package managers
      1. Install Chocolatey for Windows
      2. Installing Homebrew for macOS
    2. Git and GitHub Desktop
      1. Why use GitHub?
      2. Why use GitHub Desktop?
      3. Installing Git and GitHub Desktop
    3. Node.js
      1. Existing Node.js Installation
      2. Installing Node.js
    4. Visual Studio Code
      1. Installing Visual Studio Code
    5. Automation for Windows and macOS
    6. Summary
    7. Further reading
  7. Create a Local Weather Web Application
    1. Introduction to Angular
      1. Angular's philosophy
    2. What's new in Angular 6?
    3. Angular in Full-Stack Architecture
      1. Wireframe design
      2. High level architecture
      3. Folder structure
        1. Set up your development directory
    4. Generate your Angular application
      1. Installing Angular CLI
      2. Initializing Angular app
      3. Publishing Git Repository using GitHub Desktop
      4. Inspecting and updating package.json
      5. Commiting code using VS Code
      6. Running your Angular app
    5. Optimizing VS Code for Angular
      1. IDE settings
      2. IDE extensions
      3. Coding style
    6. Planning a feature road map using Waffle
      1. Setting up a Waffle project
      2. Creating issues for your Local Weather app
    7. Crafting UI elements using components and interfaces
      1. Adding an Angular component
      2. Define your model using interfaces
    8. Using Angular Services and HttpClient to retrieve data
      1. Creating a new Angular Service
      2. Inject dependencies
      3. Discover OpenWeatherMap APIs
      4. Storing environment variables
      5. Implementing an HTTP GET operation
      6. Retrieving service data from a component
    9. Transform data using RxJS
      1. Understanding Reactive programming
      2. Implementing Reactive transformations
    10. Summary
  8. Prepare Angular App for Production Release
    1. Angular unit tests
      1. Unit test execution
      2. Declarations
      3. Providers
      4. Imports
      5. Test doubles
        1. Jasmine specs
    2. Angular e2e tests
      1. e2e test execution
      2. e2e spec
    3. Troubleshooting common Angular errors
      1. Debugging with Chrome Developer Tools
      2. Optimizing Chrome Dev Tools
      3. Troubleshooting network issues
      4. Investigating console errors
      5. Karma, Jasmine, and Unit Testing errors
        1. NetworkError
        2. Generic ErrorEvents
      6. Debugging with Visual Studio Code
    4. Null guarding in Angular
      1. Property initialization
      2. Safe navigation operator
      3. Null guarding with *ngIf
    5. Containerizing the app using Docker
      1. Installing Docker
      2. Setting up Docker scripts
      3. Docker extension in VS Code
      4. NPM Scripts in VS Code
    6. Deploying containerized app
      1. Zeit Now
      2. Configuring the Now CLI tool
      3. Deploying
    7. Summary
  9. Staying Up to Date with Angular Updates
    1. A brief history of web frameworks
    2. Updating Node
      1. n - Node version manager for macOS
    3. Updating npm and Global npm packages
      1. Global Npm packages
        1. Npm fails to install a global tool on Windows
    4. Updating Angular
      1. Angular update guide
        1. Take stock of your current version
        2. Using Angular Update Guide
      2. Updating your Angular app
        1. Pre-upgrade checklist
        2. Before updating
        3. During the Update
        4. Incompatible peer dependencies
        5. Continuing the update
        6. After the update
        7. Post Update Checklist
        8. Manual update
    5. Testing performance
    6. Addressing security vulnerabilities
    7. Updating your web server
    8. Updating Docker image
    9. Summary
  10. Enhance Angular App with Angular Material
    1. Angular Material
    2. Angular Material setup and performance
      1. Installing Angular Material
        1. Automatically
        2. Manually
      2. Understanding Material's components
      3. Manually configuring Angular Material
        1. Importing modules
        2. Importing theme
        3. Adding Material Icon font
    3. Angular Flex Layout
      1. Responsive layouts
      2. Installing Angular Flex Layout
      3. Layout basics
        1. Flex Layout APIs for DOM containers
        2. Flex Layout APIs for DOM elements
        3. Flex Layout APIs for any element
    4. Adding Material Components to your app
      1. Angular Material schematics
      2. Modifying landing page with Material Toolbar
      3. Representing weather in Material Card
        1. Accessibility
        2. Card header and content
        3. Material typography
          1. Applying typography
        4. Updating the tagline as center-aligned caption
        5. Updating Current Weather card layout
          1. Implementing Layout Scaffolding
        6. Aligning elements
        7. Styling elements
          1. Fine-tuning styles
        8. Tweaking to match design
    5. Updating unit tests
    6. Custom themes
      1. Advanced themes
    7. Updating Angular Material
      1. Take stock of your current versions
      2. Check on the latest available versions
      3. Updating Angular Material
    8. Summary
  11. Reactive Forms and Component Interaction
    1. Interactive prototype
      1. MockFlow WireFramePro
      2. Building the mock-up
        1. Home screen
        2. Search results
        3. Settings pane
      3. Adding interactivity
      4. Exporting the functional prototype
    2. Searching with user input
      1. Adding Angular Reactive Forms
      2. Adding and verifying components
      3. Adding search to weather service
      4. Implementing search
      5. Limiting user inputs with throttle/debounce
      6. Implementing input validation and error messaging
      7. Template driven forms with two-way binding
    3. Enabling component interaction
      1. Global events
      2. Child-parent relationships with event emitters
      3. Parent-child relationships with input binding
      4. Sibling interactions with subjects
    4. Summary
  12. Create a Router-First Line-of-Business App
    1. Angular cheat sheet
      1. Binding
      2. Built-in directives
      3. Common pipes
      4. Starter commands, major components, and CLI scaffolds
        1. Configure Angular CLI autocomplete
    2. Router-first architecture
    3. Creating LemonMart
      1. Creating a Router-first app
      2. Configuring Angular.json and Package.json
      3. Configuring Material and Styles
    4. Designing LemonMart
      1. Identifying user roles
      2. Identifying high-level modules with site map
    5. Generating router-enabled modules
    6. Designing the home route
      1. Setting up default routes
      2. RouterLink
      3. Router outlet
    7. Branding, Custom, and Material Icons
      1. Branding
        1. Color palette
        2. Implementing browser manifest and icons
      2. Custom icons
      3. Material icons
    8. Angular Augury
      1. Component Tree
        1. Break point debugging
      2. Router Tree
      3. NgModules
    9. Submodules with lazy loading
      1. Configuring submodules with components and routes
      2. Eager loading
      3. Lazy loading
    10. Completing the walking skeleton
      1. Manager module
      2. User module
      3. POS and inventory modules
        1. POS module
        2. Inventory module
      4. Inspect router tree
    11. Common Testing Module
    12. Summary
  13. Continuous Integration and API Design
    1. Continuous Integration
      1. Containerizing build environment
        1. Builder
          1. Debugging build environment
        2. Tester
          1. Configuring a headless browser for Angular
          2. Configuring testing environment
        3. Web server
      2. CircleCI
      3. Code coverage report
    2. API design
      1. Designing around major data components
        1. Defining entities
      2. Swagger
        1. Defining a Swagger YAML file
        2. Creating a Swagger server
          1. OpenAPI 3.0 with unofficial tooling
          2. Swagger 2.0 with official tooling
          3. Enable Cross-Origin Resource Sharing (CORS)
        3. Verifying and publishing Swagger server
    3. Summary
  14. Design Authentication and Authorization
    1. Wrapping up mock-ups
    2. Design authentication and authorization workflow
      1. Add auth service
        1. Implement a basic authentication service
        2. Implementing the login component
      2. Conditional navigation
      3. Common validations
    3. UI service
      1. Caching with cookie and localStorage
      2. JSON Web Token life cycle
      3. HTTP interceptor
      4. Side navigation
      5. Log out
    4. Role-based routing after login
      1. Router Guards
      2. Auth Guard
    5. Auth Service Fake and Common Testing Providers
    6. Summary
  15. Angular App Design and Recipes
    1. User class and object-oriented programming
    2. Reusing components
    3. User service with caching, GET and POST
    4. User profile with multi-step auth-enabled responsive forms
      1. Form groups
      2. Stepper and responsive layout
      3. Calculated properties and DatePicker
      4. Type ahead support
      5. Dynamic form arrays
      6. ViewUser component
      7. Review component and Save form
    5. Resolve guard
    6. Reusable component with binding and route data
    7. Master/detail view auxiliary routes
    8. Data table with pagination
    9. Updating Unit Tests
    10. Summary
  16. Highly-Available Cloud Infrastructure on AWS
    1. Creating a secure AWS account
      1. Securing secrets
    2. Right-sizing infrastructure
      1. Optimizing instance
      2. Simple load testing
    3. Deploy to AWS ECS Fargate
      1. Configuring ECS Fargate
        1. Creating a Fargate Cluster
        2. Creating container repository
        3. Creating task definition
        4. Creating elastic load balancer
        5. Creating cluster service
        6. Configuring the DNS
          1. Getting the DNS Name
      2. Prep Angular app
      3. Adding npm Scripts for AWS
      4. Publish
    4. AWS Billing
    5. Summary
  17. Google Analytics and Advanced Cloud Ops
    1. Collecting Analytics
      1. Adding Google Tag Manager to Angular App
        1. Set up Google Tag Manager
        2. Setting up Google Analytics
        3. Configuring Google Analytics Tag in Tag Manager
    2. Budgeting and scaling
      1. Calculating per user cost
    3. Advanced load testing
    4. Reliable Cloud Scaling
      1. Cost per user in a scalable environment
        1. Calculating target server utilization
          1. Pre-scheduled provisioning
          2. Blue-Green deployments
      2. Revising estimates with metrics
    5. Measuring actual use
      1. Creating a custom event
      2. Adding custom events in Angular
      3. Advanced Analytics events
    6. Summary
  18. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think

Product information

  • Title: Angular 6 for Enterprise-Ready Web Applications
  • Author(s): Doguhan Uluca
  • Release date: May 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781786462909