Introduction
License
Why Angular?
The Architect's Guide to Angular
- Creating Functional Forms
EcmaScript 6 and TypeScript Features
- ES6
- TypeScript
The JavaScript Toolchain
- Source Control: git
- The Command Line
- Command Line JavaScript: NodeJS
- Back-End Code Sharing and Distribution: npm
- Module Loading, Bundling and Build Tasks: Webpack
- Chrome
Bootstrapping an Angular Application
- Understanding the File Structure
- Bootstrapping Providers
Components in Angular
- Creating Components
- Application Structure with Components
- Projection
- Structuring Applications with Components
- Using Other Components
Directives
- Attribute Directives
  - NgStyle Directive
  - NgClass Directive
- Structural Directives
Advanced Components
- Component Lifecycle
- Accessing Other Components
- View Encapsulation
- ElementRef
Observables
- Using Observables
- Error Handling
- Disposing Subscriptions and Releasing Resources
- Observables vs Promises
- Using Observables From Other Sources
- Observables Array Operations
- Cold vs Hot Observables
- Summary
Angular Dependency Injection
- What is DI?
- DI Framework
- Angular's DI
Http
- Making Requests
- Catching Rejections
- Search with flatMap
- Enhancing Search with switchMap
- Requests as Promises
Change Detection
- Change Detection Strategies in Angular 1 vs Angular 2
- How Change Detection Works
- Change Detector Classes
- Change Detection Strategy: OnPush
- Enforcing Immutability
- Additional Resources
Zone.js
Advanced Angular
- Directives
  - Creating an Attribute Directive
    - Listening to an Element Host
    - Setting Properties in a Directive
  - Creating a Structural Directive
    - View Containers and Embedded Views
    - Providing Context Variables to Directives
- AoT
  - AoT limitations
  - AoT Configuration
Immutable.js
- What is Immutability?
- The Case for Immutability
- JavaScript Solutions
  - Object.assign
  - Object.freeze
- Immutable.js Basics
Pipes
- Using Pipes
- Custom Pipes
- Stateful Pipes
Forms
- Getting Started
- Template-Driven Forms
- Reactive/Model-Driven Forms
- Visual Cues for Users
Modules
- What is an Angular Module?
- Adding Components, Pipes and Services to a Module
- Creating a Feature Module
- Directive Duplications
- Lazy Loading a Module
- Lazy Loading and the Dependency Injection Tree
- Shared Modules and Dependency Injection
- Sharing the Same Dependency Injection Tree
Routing
- Why Routing?
- Configuring Routes
- Redirecting the Router to Another Route
- Defining Links Between Routes
- Dynamically Adding Route Components
- Using Route Parameters
- Defining Child Routes
- Controlling Access to or from a Route
- Passing Optional Parameters to a Route
- Using Auxiliary Routes
State Management
- Redux and @ngrx
TDD Testing
- The Testing Toolchain
- Test Setup
- Simple Test
- Using Chai
- Testing Components
- Testing Services
- Testing Redux
Migrating Angular 1.x Projects to Angular 2
- Migration Prep
- Choosing an Upgrade Path
- Avoiding Total Conversion
- Using ng-metadata (Angular 1.x Using 2 Style)
  - Bootstrapping ng-metadata
  - Components and Services
- Using ng-upgrade (Angular 1.x Coexisting With Angular 2)
Project Setup
- Webpack
- NPM Scripts Integration
Angular CLI
- Setup
- Creating a New App
- Serving the App
- Creating Components
- Creating Routes
- Creating Other Things
- Testing
- Linting
- CLI Command Overview
- Adding Third Party Libraries
- Integrating an Existing App
Accessibility in Angular
- Why Make my Application Accessible?
- Key Concerns of Accessible Web Applications
- Testing for Accessibility
- Additional Resources
Internationalization in Angular
- What is the process like and how is involved?
- Marking text in our templates
- Extracting translation text using the Angular CLI
- How to import the completed translation files
  - Using the AoT Compiler
  - Using the JiT Compiler
Glossary
Further Reading And Reference

Structuring Applications with Components

浏览 65 分享 2020-03-28 15:22:48

Structuring Applications with Components

Structuring Applications with Components

As the complexity and size of our application grows, we want to divide responsibilities among our components further.

Smart / Container components are application-specific, higher-level, container components, with access to the application's domain model.
Dumb / Presentational components are components responsible for UI rendering and/or behavior of specific entities passed in via components API (i.e component properties and events). Those components are more in-line with the upcoming Web Component standards.

原文: https://angular-2-training-book.rangle.io/handout/components/structuring_applications_with_components.html

评论列表正在加载评论...