后续步骤

后续步骤：工具与技巧

Next steps: tools and techniques

理解了这些 Angular 的基本构造块之后，就可以开始学习更多能帮你开发和交付 Angular 应用的特性和工具了。 这里会讲一些关键特性。

After you understand the basic Angular building blocks, you can begin to learn more about the features and tools that are available to help you develop and deliver Angular applications. Here are some key features.

响应式编程工具

Responsive programming

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

    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.

客户端与服务器的交互工具

Client-server interaction

  • 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 应用，以提升性能并在手机或低功耗设备上快速显示首屏，并为 Web 爬虫提供帮助（SEO）。

    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：借助 Service Worker 来减轻对网络的依赖，你可以显著提升用户体验。

    Service Workers: Use a service worker to reduce dependency on the network significantly improving the user experience.

特定领域的库

Domain-specific libraries

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

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

  • Forms：通过基于 HTML 的验证和脏数据检查，来支持复杂的数据输入场景。

    Forms: Support complex data entry scenarios with HTML-based validation and dirty checking.

为开发周期提供支持

Support for the development cycle

  • 编译：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 的国际化工具可以帮助你让应用可用于多种语言中。

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

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

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

环境搭建、构建与开发配置

Setup, build, and deployment configuration

  • 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 工作空间与项目文件夹的结构。

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

  • 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.

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

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

  • 部署：学习把你的 Angular 应用发布到远端服务器的技巧。

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