白骑士的JavaScript教学生态系统篇之前端框架与库 5.2.4 Angular的基础与依赖注入

        Angular是一个全面的前端框架，旨在帮助开发者构建复杂的、可维护的Web应用。由Google维护，Angular不仅提供了强大的功能，还具备清晰的设计理念和开发工具。本文将介绍Angular的基础知识及其依赖注入（DI）机制，这是Angular框架中的核心概念之一。

Angular概述

        Angular是一个开源的前端框架，用于构建动态的单页面应用（SPA）。Angular框架基于TypeScript语言，具备模块化、组件化、依赖注入等功能。它旨在提高开发效率并提供结构化的代码组织方式。

主要特点

• 模块化：应用分成多个模块，每个模块负责不同的功能。
• 组件化：UI组件化，复用和维护更简单。
• 依赖注入：解耦组件之间的依赖，提高代码的可测试性和可维护性。
• 双向数据绑定：简化数据和视图之间的同步。

官方网站：Angular官网

Angular环境配置

安装Angular CLI

        Angular CLI是Angular的官方命令行工具，用于创建和管理Angular项目。通过CLI可以轻松地生成组件、服务、模块等。

npm install -g @angular/cli

创建新项目

        使用Angular CLI创建新项目：

ng new my-angular-app
cd my-angular-app
ng serve

        ‘ng serve‘命令将启动一个开发服务器，并在浏览器中自动打开应用。默认情况下，应用将在‘http://localhost:4200‘运行。

项目结构

        Angular CLI创建的项目结构如下：

my-angular-app/
├── e2e/
├── node_modules/
├── src/
│   ├── app/
│   │   ├── app.component.css
│   │   ├── app.compo