Angular5中文手册：基于AngularCLI的项目创建与分析

"这篇文档是关于使用Angular5进行项目创建和基本操作的教程，由http://www.itying.com 整理。主要内容包括Angular CLI的安装、项目创建、目录结构分析、组件创建与使用、服务创建、数据请求、路由设置、父子组件通信以及DOM操作等。" 在Angular5中，首先你需要确保已经安装了最新版本的Node.js，因为Angular CLI（命令行接口）需要Node.js环境。你可以通过运行`node -v`和`npm -v`来检查当前的版本。如果版本过旧，可能会影响Angular CLI的正常工作，此时建议升级到6.9.x以上版本的Node.js和3.x.x以上的npm。 接下来，为了能够使用Angular CLI，你需要全局安装它。这可以通过运行`npm install -g @angular/cli`或使用cnpm（国内镜像）的`cnpm install -g @angular/cli`来完成。安装完成后，你可以通过`ng --version`命令检查Angular CLI是否成功安装。 创建一个新的Angular项目，可以在命令行中输入`ng new 项目名称`，例如`ng new my-app`。这将生成一个包含基础结构的新项目。然后，进入项目目录`cd my-app`，安装所有必要的依赖包，运行`cnpm install`。最后，启动开发服务器，使用`ng serve --open`，浏览器会自动打开项目。 项目的目录结构包括`app.module.ts`，它是应用的根模块，定义了应用的组件、指令和服务。`AppComponent`是默认的主组件，位于`src/app/app.component.ts`，它代表了应用的顶层组件。 在Angular中，组件是构建UI的基本单元。你可以通过`ng generate component 组件名`命令快速创建组件。组件间的数据传递可以使用属性绑定、事件绑定、双向数据绑定等方式。例如，`[property]`用于单向数据绑定，`(event)`用于事件监听，`[(ngModel)]`用于双向数据绑定。 服务在`@Injectable()`装饰器下定义，并通过`ng generate service 服务名`命令创建。服务可以用来封装数据访问逻辑，如HTTP请求。Angular5中，可以使用`HttpClient`模块进行GET、POST等网络请求，以及JSONP请求。 路由是应用导航的关键。在`app-routing.module.ts`中配置路由，用`RouterModule.forRoot()`来创建路由模块。`routerLinkActive`可以用来设置当前选中的路由样式。路由还可以实现动态路由、默认路由、子路由等功能，增强应用的导航体验。 父子组件间的通信可以通过属性注入、事件发射或服务共享数据。获取DOM节点并操作它们通常需要用到`@ViewChild`装饰器或者`Renderer2`服务。 这篇教程详细介绍了Angular5的基础操作，从项目的初始化到功能实现，为开发者提供了一条清晰的学习路径。