Cover image for Mastering Angular 2 Components

Mastering Angular 2 Components

Author Gion Kunz
Release Date: 2016/06/01
ISBN: 9781785884641
Topic:
0%
83
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

Learn to build component-based user interfaces of the future using Angular 2

About This Book

  • Developers will be able to make better websites right away by building the example components in the book
  • You'll learn new ways of conceptualizing how to design your web applications, which will prepare you to keep making more sophisticated projects
  • Learning these concepts and building these apps will put developers ahead of the curve in preparing for "tomorrow's Internet," as component-based development and component-centric thinking are increasingly in demand

Who This Book Is For

This book is for Angular developers who already have a good understanding of basic frontend web technologies such as JavaScript, HTML, and CSS. You will learn about the new component-based architecture in Angular 2 and how to use it to build modern and clean user interfaces.

What You Will Learn

  • Understand the concept of a component-based UI architecture
  • Grasp Angular 2 core concepts
  • See the technologies used to work with Angular 2 (mainly ES6)
  • Perform basic and advanced tasks using Angular 2 components
  • Use dependency injection within Angular 2 components
  • Test Angular 2 components with testing frameworks
  • Structure an application using Angular 2
  • Build an entire application from A to Z using Angular 2

In Detail

Through this book, you will learn how to use Angular 2 and its component-based architecture in order to develop modern user interfaces. A new holistic way of thinking about UI development will be established throughout this book, and you will discover the power of Angular 2 components through many examples. This book is based on Release Candidate 1(RC1) of Angular 2.

On this journey, you'll discover the benefits of component-based user interfaces over the classical MVC design. Also, you will get a chance to compare a classical MVC with a component-based approach and understand the challenges of modern user interfaces. You will learn the very basics of the required core technologies and the setup needed to get going with Angular 2, and progressively enhance your understanding of Angular 2 components by working on the example application.

After reading the book and following the example application, you will have built a small-to-mid-sized application with Angular 2 using a component-based UI architecture.

Style and approach

The new component-style directives in Angular 2 will change developers' workflows and their way of thinking about shared and reusable blocks of custom HTML in the shadow DOM. This is the first book to guide developers along this path. It provides a practical way of learning concepts, giving you the chance to build components of your own. With this book, you will get ahead of the curve in a new wave of web development by tightly focusing on one area, which is the key to unlocking the powers of Angular development.

Table of Contents

  1. Mastering Angular 2 Components
    1. Table of Contents
    2. Mastering Angular 2 Components
    3. Credits
    4. About the Author
    5. About the Reviewer
    6. www.PacktPub.com
      1. eBooks, discount offers, and more
        1. Why subscribe?
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Downloading the color images of this book
        3. Errata
        4. Piracy
        5. Questions
    8. 1. Component-Based User Interfaces
      1. Thinking of organisms
      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. JavaScript of the future
          1. I speak JavaScript, translate, please!
          2. Classes
          3. Modules
          4. Template strings
          5. ECMAScript or TypeScript?
          6. Decorators
      5. Tools
        1. Node.js and NPM
        2. SystemJS and JSPM
          1. JSPM
          2. Getting started with JSPM
      6. Summary
    9. 2. Ready, Set, Go!
      1. Managing tasks
        1. Vision
      2. Starting from scratch
        1. Bootstrapping
        2. Running the application
        3. Recap
      3. Creating a task list
        1. Recap
      4. The right level of encapsulation
        1. Recap
      5. Input generates output
        1. Recap
      6. Custom UI elements
        1. Recap
      7. Filtering tasks
      8. Summary
    10. 3. Composing with Components
      1. Data – Fake to real
      2. Reactive programming with observable data structures
      3. Immutability
      4. Pure components
        1. Purifying our task list
        2. Recap
      5. Composition using content projection
      6. Creating a tabbed interface component
        1. Recap
      7. Mixing projected with generated content
      8. Summary
    11. 4. No Comments, Please!
      1. One editor to rule them all
        1. Creating an editor component
        2. Recap
      2. Building a commenting system
        1. Building the comment component
        2. Building the comments component
        3. Recap
      3. Summary
    12. 5. Component-Based Routing
      1. An introduction to the Angular router
      2. Composition by routing
        1. Router versus template composition
        2. Understanding the route tree
      3. Back to the routes
        1. Routable tabs
      4. Refactoring navigation
      5. Summary
    13. 6. 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
    14. 7. Components for User Experience
      1. Tag management
        1. Tag data entity
        2. Generating tags
        3. Creating a tags service
        4. Rendering tags
        5. Integrating the task service
        6. Completion of the tags service
      2. Supporting tag input
        1. Creating a tag input manager
        2. Creating a tags select component
        3. Integrating tag input within the editor component
        4. Finishing up our tagging system
      3. Drag and drop
        1. Implementing the draggable directive
        2. Implementing a drop target directive
        3. Integrating drag and drop in task list component
        4. Recapitulate on drag and drop
      4. To infinity and beyond!
        1. The asterisk syntax and templates
        2. Creating an infinite scroll directive
        3. Detecting change within our template directive
        4. Adding and removing embedded views
        5. Finishing our infinite scroll directive
      5. Summary
    15. 8. Time Will Tell
      1. Task details
      2. Enabling tags for tasks
      3. Managing efforts
        1. The time duration input
        2. Components to manage efforts
        3. The visual efforts timeline
        4. Recapitulating on efforts management
      4. Setting milestones
        1. Creating an autocomplete component
      5. Summary
    16. 9. Spaceship Dashboard
      1. Introduction to Chartist
      2. Projects dashboard
        1. Creating the projects dashboard component
        2. Project summary component
      3. Creating your first chart
      4. Visualizing open tasks
        1. Creating an open tasks chart
        2. Creating a chart legend
        3. Making tasks chart interactive
      5. Summary
    17. 10. Making Things Pluggable
      1. Plugin architecture
      2. Pluggable UI components
      3. Implementing the plugin API
        1. Instantiating plugin components
        2. Finalizing our plugin architecture
      4. Building an Agile plugin
        1. Agile task info component
        2. Agile task details component
        3. Recapitulating on our first plugin
      5. Managing plugins
        1. Loading new plugins at runtime
      6. Summary
    18. 11. Putting Things to the Test
      1. An introduction to Jasmine
      2. Writing our first test
      3. Spying on component outputs
      4. Utilities to test components
        1. Injecting in tests
        2. Test component builder
      5. Testing components in action
      6. Testing component interaction
      7. Testing our plugin system
      8. Summary
    19. A. Task Management Application Source Code
      1. Download
      2. Prerequisites
      3. Usage
      4. Troubleshooting
        1. Cleaning IndexDB to reset data
        2. Enabling web components in Firefox
    20. Index