Mastering Angular Components

Mastering Angular Components

by Gion Kunz
Released July 2018
Publisher(s): Packt Publishing
ISBN: 9781788293532

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

Develop modern user interfaces using Angular 6 and its component-based architecture.

Key Features

  • Build better web applications with highly scalable concepts using Angular
  • Learn new ways to design your web applications
  • Build a fully functional web application that lets you tackle real-world user interface problems using Angular components

Book Description

Angular framework embraces a mature user interface (UI) component architecture, a powerful tool when developing scalable application interfaces. The simple and deterministic design of Angular components supports you in building large and scalable component-based applications.

Mastering Angular Components covers a new holistic way of thinking about UI development, and helps you discover the power of Angular 6 components through various examples. The book starts with an introduction to component-based user interfaces and how Angular 6 manages this concept. Following a step-by-step approach, you will build a fully functional task-management application using Angular. You'll start with basic layout components, adding some core task-management components before completing the first draft of your application. You will then move on to working through a refactoring exercise in order to learn how to enhance the way you deal with states and data. Once you have got to grips with all this, you will study how to make use of the Angular router within your application.

By the end of this book, you will be able to constantly refine the functionality of your application and create components that render SVG graphics, add a time-tracking feature, visualize data using third-party library Chartist, and even create a plugin architecture using Angular components.

What you will learn

  • Use TypeScript to create Angular 6 components
  • Leverage component composition to solve complex UI requirements
  • Build an architecture using pure components and container components
  • Explore the basics of RxJS observable streams and use them to build your application reactively
  • Communicate between components using child queries
  • Implement the Angular router to make your application navigable
  • Build reusable and dynamic graphical content using Angular components and SVG
  • Integrate third-party libraries such as Moment.js and Chartist into your existing Angular application

Who this book is for

Mastering Angular Components is for you if you are an Angular developer who already has a good understanding of basic frontend web technologies such as JavaScript, HTML, and CSS.

Table of contents

  1. Title Page
  2. Copyright and Credits
    1. Mastering Angular Components Second Edition
  3. Dedication
  4. Packt Upsell
    1. Why subscribe?
    2. PacktPub.com
  5. Contributors
    1. About the author
    2. About the reviewer
    3. Packt is searching for authors like you
  6. 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
  7. Component-Based User Interfaces
    1. Thinking in components
    2. Components – the organs of user interfaces
      1. Encapsulation
      2. Composability
      3. Components, invented by nature
        1. My UI framework wishlist
      4. Time for new standards
        1. Template elements
        2. Shadow DOM
    3. Angular's component architecture
      1. Everything is a component
    4. Your first component
      1. Angular NgModule
    5. JavaScript of the future
      1. I speak JavaScript, translate, please!
      2. Classes
      3. Modules
      4. Template strings
      5. TypeScript
      6. History with TypeScript in Angular
      7. Decorators
    6. Tools
      1. Node.js and npm
      2. Angular CLI
    7. Summary
  8. Ready, Set, Go!
    1. Managing tasks
      1. Vision
    2. Starting from scratch
      1. Main application component
      2. Resource download
      3. Main application NgModule
      4. Bootstrapping
      5. Running the application
      6. Recap
    3. Creating a task list
      1. Recap
    4. The right size of components
      1. Recap
    5. Adding tasks
      1. Recap
    6. Custom UI elements
      1. Recap
    7. Task data service
      1. Recap
    8. Filtering tasks
      1. Recap
    9. Summary
  9. Dealing with Data and State
    1. Reactive programming with RxJS
    2. HTTP client and in-memory web APIs
      1. Using behaviour subjects
      2. Loading data in the task service
      3. Subscribing in the view using the async pipe
      4. Recap
    3. Immutability
      1. Immutability with TypeScript
    4. Pure components
    5. Introducing container components
    6. Purifying our task list
    7. Summary
  10. Thinking in Projects
    1. Moving into projects
      1. Project service
      2. Project component
      3. Updating the task list container
      4. Integrating the project component
      5. Recap
    2. Creating a tabbed interface component
    3. Building the main navigation
      1. Composition using content projection
      2. Creating navigation components
      3. Providing a project navigation
      4. Recap
    4. One editor to rule them all
      1. Creating an editor component
      2. Integrating the editor component
      3. Recap
    5. Dealing with users
      1. User service
      2. User area component
      3. Integrating the user area component
    6. Building a commenting system
      1. Introducing a model for comments
      2. Building the comment component
      3. Building the comments component
      4. Integrating the commenting system into projects
      5. Recap
    7. Summary
  11. Component-Based Routing
    1. An introduction to the Angular router
    2. Composition using the router
      1. Routing with container components
      2. Router configuration
    3. Back to the routes
      1. Composing projects using the router
      2. Child routes for project details
    4. Guarding our projects
    5. Summary
  12. Keeping up with Activities
    1. Creating a service for logging activities
      1. Logging activities
    2. Leveraging the power of SVG
      1. Styling SVG
      2. Building SVG components
    3. Building an interactive activity slider component
      1. Projection of time
      2. Rendering activity indicators
      3. Bringing it to life
      4. Recap
    4. Building the activity timeline
    5. Summary
  13. Components for User Experience
    1. Tag management
      1. A model for our tags
      2. Creating a tags service
      3. Rendering tags
      4. Integrating tags using a pipe
    2. Supporting tag input
      1. Creating a tag input directive
      2. Creating a tags select component
      3. Integrating tag selection within the editor component
      4. Integrating tag selection in project comments
      5. Finishing up our tagging system
    3. Drag and drop
      1. Updating our model for ordering tasks
      2. Implementing the draggable directive
      3. Implementing a drop target directive
      4. Integrating drag and drop
      5. Recapitulate on drag and drop
    4. Summary
  14. Time Will Tell
    1. Task details
      1. Navigating to task details
      2. Enabling tags for tasks
    2. Managing efforts
      1. No-UI time duration input
      2. Components to manage efforts
      3. The visual efforts timeline
      4. Recapitulating on efforts management
    3. Summary
  15. Spaceship Dashboard
    1. Introduction to Chartist
    2. Projects dashboard
      1. Creating the projects dashboard component
      2. Project summary component
      3. Integrating the projects dashboard
    3. Creating your first chart
      1. Processing activity data
      2. Creating an activity chart
    4. Visualizing open tasks
      1. Preparing task data
      2. Modeling the problem
      3. Creating an open tasks chart
      4. Creating a chart legend
      5. Making the tasks chart interactive
    5. Summary
  16. Putting Things to the Test
    1. An introduction to Jasmine and Karma
      1. Karma and integration to Angular CLI
    2. Writing our first test
    3. Spying on component output
    4. Utilities to test components
      1. Injecting in tests
    5. Using TestBed for running Angular tests
      1. Component fixture
      2. Mocking child components
      3. Mocking services
    6. Testing components in action
    7. Testing component interaction
    8. Summary
  17. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think

Product information

  • Title: Mastering Angular Components
  • Author(s): Gion Kunz
  • Release date: July 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781788293532