Cover image for Learning Angular 2

Learning Angular 2

Author Pablo Deeleman
Release Date: 2016/05/01
ISBN: 9781785882074
Topic:
0%
80
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

Your quick, no-nonsense guide to building real-world apps with Angular 2

About This Book

  • The first and best overview of Angular 2 on the market - this guide gathers together everything there is to know about Angular 2 and groups it into intuitive sections.
  • This book is your detailed map of every feature and its use cases.
  • The author has done all the hard work of fitting everything Angular 2 means for developers together for you, making this book the quickest way to learn Angular 2 from scratch.

Who This Book Is For

This book is targeted at web developers who want to build the next generation of state-of-the-art mobile and desktop web applications with Angular 2. This book does not require you to have prior exposure to either Angular 1.x or 2, although comprehensive knowledge of JavaScript is assumed. It's great for newcomers to Angular who learn best through clear explanations and definitions of concepts.

What You Will Learn

  • Set up your working environment in order to have all the tools you need to start building Angular 2 components with minimum effort
  • Get up to speed with TypeScript, a powerful typed superset of JavaScript that compiles to plain JavaScript
  • Take full control of how your data is rendered and updated upon data changes
  • Build powerful web applications based on structured component hierarchies that emit and listen to events and data changes throughout the elements tree
  • Explore how to consume external APIs and data services and allow data editing by harnessing the power of web forms made with Angular 2
  • Deliver seamless web navigation experiences with application routing and state handling common features with ease
  • Discover how to bulletproof your applications by introducing smart unit testing techniques and debugging tools

In Detail

Angular 2 was conceived as a complete rewrite in order to fulfill the expectations of modern developers who demand blazing fast performance and responsiveness from their web applications.

This book will help you learn the basics of how to design and build Angular 2 components right from the beginning, providing full coverage of the TypeScript syntax required to follow the examples included. From that point on, we will build upon our first components, interconnect them, and give shape to larger web applications. We will then move to implementing routing in Angular 2, analyzing how to handle application states, and navigating from one component to another in depth. After this, the book features full coverage of web forms and user input validation, later leveraging all of this information to go through the basics of implementing user authentication in Angular 2 and providing a bird's eye view of the different strategies at hand to secure pages and areas of your website. Animating components and DOM elements with Angular 2 is also covered in this book. The final part of this book provides broad insights into how to unit test components and other modules such as services, directives, routes or pipes.

Style and approach

This book covers everything there is to know about getting well-acquainted with Angular without bogging you down. Everything is neatly laid out under clear headings for quick consultation, offering you the information required to understand a concept immediately, with short relevant examples of each feature.

Table of Contents

  1. Learning Angular 2
    1. Table of Contents
    2. Learning Angular 2
    3. Credits
    4. About the Author
    5. Acknowledgments
    6. About the Reviewer
    7. www.PacktPub.com
      1. eBooks, discount offers, and more
        1. Why subscribe?
    8. 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. Errata
        3. Piracy
        4. Questions
    9. 1. Creating Our Very First Component in Angular 2
      1. A fresh start
        1. Web components
        2. Why TypeScript over other syntaxes?
      2. Setting up our workspace
        1. Installing dependencies
        2. Installing TypeScript
        3. Installing TypeScript typings
      3. Hello, Angular 2!
        1. TypeScript classes
        2. Introducing metadata decorators
        3. Compiling TypeScript into browser-friendly JavaScript
        4. The HTML container
        5. Serving the examples of this book
        6. Putting everything together
      4. Enhancing our IDE
        1. Sublime Text 3
        2. Atom
        3. Visual Studio Code
        4. WebStorm
        5. Leveraging Gulp with other IDEs
      5. Diving deeper into Angular 2 components
        1. Improving productivity
        2. Component methods and data updates
        3. Adding interactivity to the component
        4. Improving the data output in the view and polishing the UI
      6. Summary
    10. 2. Introducing TypeScript
      1. Understanding the case for TypeScript
        1. The benefits of TypeScript
        2. Introducing TypeScript resources in the wild
          1. The TypeScript official site
          2. The TypeScript Wiki
      2. Types in TypeScript
        1. String
          1. Declaring our variables the ECMAScript 6 way
        2. Number
          1. Boolean
          2. Array
        3. Dynamic typing with the any type
          1. Enum
        4. Void
        5. Type inference
      3. Functions, lambdas, and execution flow
        1. Annotating types in our functions
        2. Function parameters in TypeScript
          1. Optional parameters
          2. Default parameters
          3. Rest parameters
          4. Overloading the function signature
        3. Better function syntax and scope handling with lambdas
      4. Classes, interfaces, and class inheritance
        1. Anatomy of a class – constructors, properties, methods, getters, and setters
        2. Interfaces in TypeScript
        3. Extending classes with class inheritance
      5. Decorators in TypeScript
        1. Class decorators
          1. Extending the class decorator function signature
        2. Property decorators
        3. Method decorators
        4. Parameter decorators
      6. Organizing our applications with modules
        1. Internal modules
        2. External modules
      7. The road ahead
      8. Summary
    11. 3. Implementing Properties and Events in Our Components
      1. A better template syntax
        1. Data bindings with input properties
        2. Some extra syntactic sugar when binding expressions
        3. Event binding with output properties
        4. Input and output properties in action
          1. Setting up custom values declaratively
          2. Communicating between components through custom events
        5. Emitting data through custom events
        6. Local references in templates
        7. Alternative syntax for input and output properties
      2. Configuring our template from our component class
        1. Internal and external templates
        2. Encapsulating CSS styling
          1. The styles property
          2. The styleUrls property
          3. Inline style sheets
        3. Managing view encapsulation
      3. Summary
    12. 4. Enhancing Our Components with Pipes and Directives
      1. Directives in Angular 2
        1. Core directives
          1. NgIf
          2. NgFor
          3. NgStyle
          4. NgClass
          5. NgSwitch, NgSwitchWhen, and NgSwitchDefault
      2. Manipulating template bindings with Pipes
        1. The uppercase/lowercase pipe
        2. The number, percent, and currency pipes
          1. The number pipe
          2. The percent pipe
          3. The currency pipe
        3. The slice pipe
        4. The date pipe
        5. The JSON pipe
        6. The replace pipe
        7. The i18n pipes
          1. The i18nPlural pipe
          2. The i18nSelect pipe
        8. The async pipe
      3. Putting it all together in the Pomodoro task list
        1. Setting up our main HTML container
        2. Building our task list table with Angular directives
        3. Toggling tasks in our task list
        4. Displaying state changes in our templates
        5. Embedding child components
      4. Building our own custom pipes
        1. Anatomy of a custom pipe
        2. A custom pipe to better format time output
        3. Filtering out data with custom filters
      5. Building our own custom directives
        1. Anatomy of a custom directive
        2. Building a task tooltip custom directive
      6. A word about naming conventions for custom directives and pipes
      7. Summary
    13. 5. Building an Application with Angular 2 Components
      1. Introducing the component tree
      2. Common conventions for scalable applications
        1. File and module naming conventions
        2. Ensuring seamless scalability with facades or barrels
      3. How dependency injection works in Angular 2
        1. Injecting dependencies across the component tree
          1. Restricting dependency injection down the component tree
          2. Restricting provider lookup
        2. Overriding providers in the injector hierarchy
        3. Extending injector support to custom entities
        4. Initializing applications with bootstrap()
          1. Switching between development and production modes
          2. Enabling Angular 2's built-in change detection profiler
      4. Introducing the Pomodoro App directory structure
      5. Refactoring our application the Angular 2 way
        1. The shared context
          1. Services in the shared context
          2. Configuring application settings from a central service
        2. Creating a facade module including a custom providers barrel
        3. Creating our components
          1. The timer context
          2. The tasks context
          3. Defining the top root component
        4. Bootstrapping the application
      6. Summary
    14. 6. Asynchronous Data Services with Angular 2
      1. Strategies for handling asynchronous information
        1. Observables in a nutshell
      2. Reactive functional programming in Angular 2
        1. The RxJS library
      3. Introducing the HTTP API
        1. When to use the Request and RequestOptionsArgs classes
        2. The Response object
        3. Handling errors when performing Http requests
        4. Injecting the Http class and the HTTP_PROVIDERS modules symbol
      4. A real case study – serving Observable data through HTTP
        1. Adding tasks to our tasks service
      5. Summary
    15. 7. Routing in Angular 2
      1. Adding support for the Angular 2 router
      2. Setting up the router service
        1. Building a new component for demonstration purposes
        2. Configuring the RouteConfig decorator with the RouteDefinition instances
        3. The router directives – RouterOutlet and RouterLink
        4. Triggering routes imperatively
        5. CSS hooks for active routes
      3. Handling route parameters
        1. Passing dynamic parameters in our routes
        2. Parsing route parameters with the RouteParams service
      4. Defining child routers
        1. Linking to child routes
      5. The Router lifecycle hooks
        1. The CanActivate hook
        2. The OnActivate Hook
        3. The CanDeactivate and OnDeactivate hooks
        4. The CanReuse and OnReuse hooks
          1. Advanced tips and tricks
        5. Redirecting to other routes
        6. Tweaking the base path
        7. Finetuning our generated URLs with location strategies
        8. Loading components asynchronously with AsyncRoutes
      6. Summary
    16. 8. Forms and Authentication Handling in Angular 2
      1. Two-way data binding in Angular 2
        1. The NgModel directive
        2. Binding a type to a form with NgModel
          1. Bypassing the CanDeactivate router hook upon submitting forms
      2. Tracking control interaction and validating input
        1. Tracking changes with local references
      3. Controls, ControlGroups, and the FormBuilder class
        1. Introducing Controls and Validators
        2. Controls in the DOM – the ngControl directive
        3. Grouping controls in the DOM with NgControlGroup
        4. Defining control groups imperatively with ControlGroup
        5. Connecting the DOM and the controller with ngFormModel
      4. A real example – our login component
        1. The login feature context
        2. The login form template
        3. The login component
        4. Applying custom validation to our controls
        5. Watching state changes in our controls
      5. Mocking a client authentication service
        1. Exposing our new service to other components
        2. Blocking unauthorized access
        3. Making the UI reactive to the user authentication status
      6. Running the extra mile on access management
        1. Building our own secure RouterOutlet directive
      7. Summary
    17. 9. Animating Components with Angular 2
      1. Creating animations with plain vanilla CSS
        1. Handling animation with CSS class hooks
          1. Class hooks available
      2. Animating components with the AnimationBuilder
        1. The CssAnimationBuilder API
        2. Tracking animation state with the Animation class
      3. Developing custom animation directives
        1. Interacting with our directive from the template
      4. Looking into the future with ngAnimate 2.0
      5. Summary
    18. 10. Unit testing in Angular 2
      1. Why do we need tests?
      2. Parts of a unit test in Angular 2
        1. Dependency injection in unit tests
      3. Setting up our test environment
        1. Implementing our test runner
        2. Setting up NPM commands
      4. Angular 2 custom matcher functions
      5. Testing pipes
      6. Testing components
        1. Testing components with dependencies
        2. Overriding component dependencies for refined testing
      7. Testing routes
        1. Testing routes by URL
        2. Testing redirections
      8. Testing services
        1. Testing asynchronous services
        2. Mocking Http responses with MockBackend
      9. Testing directives
      10. The road ahead
        1. Using Jasmine in combination with Karma
        2. Introducing code coverage reports in your test stack
        3. Implementing E2E tests
      11. Summary
    19. Index
3.145.101.192