Next steps: tools and techniques

在了解了基本的 Angular 构建块之后,你可以进一步了解可以帮助你开发和交付 Angular 应用的特性和工具。

After you understand the basic Angular building blocks, you can learn more about the features and tools that can help you develop and deliver Angular applications.

  • 参考“英雄之旅”教程,了解如何将这些基本构建块放在一起,来创建设计精良的应用。

    Work through the Tour of Heroes tutorial to get a feel for how to fit the basic building blocks together to create a well-designed application.

  • 查看词汇表,了解 Angular 特有的术语和用法。

    Check out the Glossary to understand Angular-specific terms and usage.

  • 根据你的开发阶段和感兴趣的领域,使用该文档更深入地学习某些关键特性。

    Use the documentation to learn about key features in more depth, according to your stage of development and areas of interest.


Application architecture

  • 目录中的主要概念部分包含一系列主题,用于解释如何把组件中的应用数据与页面显示模板联系起来,以创建一个完整的交互式应用。

    The Main Concepts section located in the table of contents contains several topics that explain how to connect the application data in your components to your page-display templates, to create a complete interactive application.

  • NgModules一章中提供了关于 Angular 应用模块化结构的深度信息。

    The NgModules guide provides in-depth information on the modular structure of an Angular application.

  • 路由与导航一章中提供了一些深度信息,教你如何构造出一个允许用户导航到单页面应用中不同视图 的应用。

    The Routing and navigation guide provides in-depth information on how to construct applications that allow a user to navigate to different views within your single-page app.

  • 依赖注入一章提供了一些深度信息,教你如何让每个组件类都可以获取实现其功能所需的服务和对象。

    The Dependency injection guide provides in-depth information on how to construct an application such that each component class can acquire the services and objects it needs to perform its function.


Responsive programming


The template syntax and related topics contain details about how to display your component data when and where you want it within a view, and how to collect input from users that you can respond to.

其它页面和章节则描述了 Angular 应用的一些基本编程技巧。

Additional pages and sections describe some basic programming techniques for Angular apps.

  • 生命周期钩子:通过实现生命周期钩子接口,可以窃听组件生命周期中的一些关键时刻 —— 从创建到销毁。

    Lifecycle hooks: Tap into key moments in the lifetime of a component, from its creation to its destruction, by implementing the lifecycle hook interfaces.

  • 可观察对象(Observable)和事件处理:如何在组件和服务中使用可观察对象来发布和订阅任意类型的消息,比如用户交互事件和异步操作结果。

    Observables and event processing: How to use observables with components and services to publish and subscribe to messages of any type, such as user-interaction events and asynchronous operation results.

  • Angular 自定义元素:如何使用 Web Components 把组件打包成自定义元素,Web Components 是一种以框架无关的方式定义新 HTML 元素的 Web 标准。

    Angular elements: How to package components as custom elements using Web Components, a web standard for defining new HTML elements in a framework-agnostic way.

  • 表单:通过基于 HTML 的输入验证,来支持复杂的数据录入场景。

    Forms: Support complex data entry scenarios with HTML-based input validation.

  • 动画:使用 Angular 的动画库,你可以让组件支持动画行为,而不用深入了解动画技术或 CSS。

    Animations: Use Angular's animation library to animate component behavior without deep knowledge of animation techniques or CSS.


Client-server interaction

Angular 为单页面应用提供了一个框架,其中的大多数逻辑和数据都留在客户端。大多数应用仍然需要使用 HttpClient 来访问服务器,以访问和保存数据。对于某些平台和应用,你可能还希望使用 PWA(渐进式 Web 应用)模型来改善用户体验。

Angular provides a framework for single-page apps, where most of the logic and data resides on the client. Most apps still need to access a server using the HttpClient to access and save data. For some platforms and applications, you might also want to use the PWA (Progressive Web App) model to improve the user experience.

  • HTTP:与服务器通信,通过 HTTP 客户端来获取数据、保存数据,并调用服务端的动作。

    HTTP: Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client.

  • 服务器端渲染:Angular Universal 通过服务器端渲染(SSR)在服务器上生成静态应用页面。这允许你在服务器上运行 Angular 应用,以提高性能,并在移动设备和低功耗设备上快速显示首屏,同时也方便了网页抓取工具。

    Server-side rendering: Angular Universal generates static application pages on the server through server-side rendering (SSR). This allows you to run your Angular app on the server in order to improve performance and show the first page quickly on mobile and low-powered devices, and also facilitate web crawlers.

  • Service Worker 和 PWA:使用 Service Worker 来减少对网络的依赖,并显著改善用户体验。

    Service workers and PWA: Use a service worker to reduce dependency on the network and significantly improve the user experience.

  • Web worker:学习如何在后台线程中运行 CPU 密集型的计算。

    Web workers: Learn how to run CPU-intensive computations in a background thread.


Support for the development cycle

  • CLI 命令参考手册:Angular CLI 是一个命令行工具,可用于创建项目、生成应用和库代码,以及执行各种持续开发任务,如测试、打包和部署。

    CLI Command Reference: The Angular CLI is a command-line tool that you use to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

  • 编译:Angular 为开发环境提供了 JIT(即时)编译方式,为生产环境提供了 AOT(预先)编译方式。

    Compilation: Angular provides just-in-time (JIT) compilation for the development environment, and ahead-of-time (AOT) compilation for the production environment.

  • 测试平台:对应用的各个部件运行单元测试,让它们好像在和 Angular 框架交互一样。

    Testing platform: Run unit tests on your application parts as they interact with the Angular framework.

  • 部署:学习如何把 Angular 应用部署到远端服务器上。

    Deployment: Learn techniques for deploying your Angular application to a remote server.

  • 安全指南:学习 Angular 对常见 Web 应用的弱点和工具(比如跨站脚本攻击)提供的内置防护措施。

    Security guidelines: Learn about Angular's built-in protections against common web-app vulnerabilities and attacks such as cross-site scripting attacks.

  • 国际化 :借助 Angular 的国际化(i18n)工具,可以让你的应用支持多本地环境。

    Internationalization: Make your app available in multiple languages with Angular's internationalization (i18n) tools.

  • 无障碍性:让所有用户都能访问你的应用。

    Accessibility: Make your app accessible to all users.


File structure, configuration, and dependencies

  • 工作区与文件结构:理解 Angular 工作区与项目文件夹的结构。

    Workspace and file structure: Understand the structure of Angular workspace and project folders.

  • 构建与运行:学习为项目定义不同的构建和代理服务器设置的配置方式,比如开发、预生产和生产。

    Building and serving: Learn to define different build and proxy server configurations for your project, such as development, staging, and production.

  • npm 包:Angular 框架、Angular CLI 和 Angular 应用中用到的组件都是用 npm 打包的,并通过 npm 注册服务器进行发布。Angular CLI 会创建一个默认的 package.json 文件,它会指定一组初始的包,它们可以一起使用,共同支持很多常见的应用场景。

    npm packages: The Angular Framework, Angular CLI, and components used by Angular applications are packaged as npm packages and distributed via the npm registry. The Angular CLI creates a default package.json file, which specifies a starter set of packages that work well together and jointly support many common application scenarios.

  • TypeScript 配置:TypeScript 是 Angular 应用开发的主要语言。

    TypeScript configuration: TypeScript is the primary language for Angular application development.

  • 浏览器支持:让你的应用能和各种浏览器兼容。

    Browser support: Make your apps compatible across a wide range of browsers.

扩展 Angular

Extending Angular

  • Angular 库:学习如何使用和创建可复用的库。

    Angular libraries: Learn about using and creating re-usable libraries.

  • 学习原理图 :学习如何自定义和扩展 CLI 的生成(generate)能力。

    Schematics: Learn about customizing and extending the CLI's generation capabilities.

  • CLI 构建器:学习如何自定义和扩展 CLI 的能力,让它使用工具来执行复杂任务,比如构建和测试应用。

    CLI builders: Learn about customizing and extending the CLI's ability to apply tools to perform complex tasks, such as building and testing applications.