Angular 是由谷歌公司开源的一款前端 Web 开发框架，它可以帮助开发者构建高度模块化且易于维护的单页应用（SPA）。本文将教您如何使用 Angular 6 开发单页应用，并提供丰富的示例代码，让您轻松入门。
安装和创建项目
首先，您需要在本地安装 Node.js 和 npm（node 包管理器）。安装完毕后，请执行以下命令在命令行中安装 Angular CLI 工具：
npm install -g @angular/cli
安装完成后，您可以通过以下命令创建新的 Angular 项目：
ng new my-app
这将创建一个名为 "my-app" 的新项目，并安装所有必要的依赖项。接下来，请切换到该项目的目录中，并启动开发服务器：
cd my-app ng serve --open
在浏览器中打开 http://localhost:4200/，您将看到一个 Angular 的欢迎页面，表示您的应用已经成功启动了。
组件和模板
Angular 中的组件是应用程序的基本构建块，负责管理和呈现 UI 的不同部分。每个组件都有自己的模板（HTML 文件），用于定义和呈现组件的 UI。
要创建新的组件，请在项目根目录中使用以下命令：
ng generate component my-component
这将在 "src/app" 目录下创建一个名为 "my-component" 的新组件。打开该组件的 ".html" 文件，您可以看到一个简单的 HTML 模板，其中包含了一些示例文本。
服务和依赖注入
在 Angular 中，服务是具有独立功能的可重用代码块，负责处理应用程序的各种任务，如 HTTP 请求、数据存储等。服务可以通过依赖注入的方式注入到组件中，并在组件中使用。
要创建新的服务，请使用以下命令：
ng generate service my-service
这将在 "src/app" 目录下创建一个名为 "my-service" 的新服务。
现在让我们来看一下如何在组件中使用服务。打开您刚才创建的组件，找到其中的 ".ts" 文件。在组件类的 constructor 中添加一个参数 "private myService: MyService"：
// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { MyService } from '../my-service.service';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
constructor(private myService: MyService) { }
}现在，您可以在组件中使用 "myService" 实例调用服务的方法了：
this.myService.getSomeData().subscribe(data => console.log(data));
路由和导航
在 Angular 中，路由器可以帮助您轻松构建具有多个页面的单页应用。它可以根据当前 URL 显示相应的组件，并允许您通过链接进行导航。
要添加路由，请在项目根目录中使用以下命令：
ng generate module app-routing --flat --module=app
这将创建一个名为 "app-routing" 的新模块，并将其添加到 "app.module.ts" 中。
接下来，在 app-routing.module.ts 文件中定义路由：
// javascriptcn.com 代码示例
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }上面的代码定义了两个路由：一个用于根路径（即初始页面），另一个用于 "/about" 路径。
接下来，在 "app.component.html" 文件中添加一个 <router-outlet> 标签。这个标签将用于显示路由器中当前选择的组件：
// javascriptcn.com 代码示例
<header>
<nav>
<a routerLink="/" routerLinkActive="active">Home</a>
<a routerLink="/about" routerLinkActive="active">About</a>
</nav>
</header>
<main>
<router-outlet></router-outlet>
</main>现在，您可以在浏览器中通过点击链接进行导航了！当您点击链接时，路由器会根据 URL 加载相应的组件，并将其显示在 <router-outlet> 中。
总结
在本文中，我们介绍了 Angular 的组件、服务、路由器等基本概念，并提供了示例代码来帮助您更好地理解。希望本文对您的前端开发学习和实践有所帮助！如果您还有任何疑问，可以查看 Angular 的官方文档，或在社区中寻求帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653dc3487d4982a6eb775ed5