如何上手Angular，先从 8 个开源项目开始！-猿码集

在当今的前端开发领域，Angular 是一个非常受欢迎的 JavaScript 框架，它可以帮助开发者构建快速、高效和可维护的 Web 应用程序。相较于 React 或 Vue，Angular 在企业级应用和大型团队开发中更为实用，可谓是一款十分强大的前端框架。然而，对于初学者来说，如何上手 Angular 来构建漂亮、可靠的应用程序似乎并不是一件容易的事情。本篇文章将介绍 8 个开源项目，帮助您更轻松地入门 Angular。

1. 完整的登录注册应用程序

首先推荐一款实现了完整的登录和注册功能的应用程序，它是入门 Angular 的绝佳范例。通过阅读它的代码，您可以学习到 Angular 的组件、服务、模块等概念，以及如何使用路由等基本技术。

模块

模块是一个基本的组织单元，Angular 应用是由一个或多个模块组成的。每个模块都可用来封装应用程序中实现特定功能的一组相关功能。通常情况下，每个 Angular 应用程序都有一个或多个根模块。除了根模块外，其他模块都是由需要它们的模块进行引入的。以下是定义一个简单 Angular 模块的代码：


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports: [BrowserModule],
  declarations: [WelcomeComponent, RegisterComponent, LoginComponent],
  bootstrap: [WelcomeComponent]
})
export class AppModule { }

上面的代码定义了一个名为 AppModule 的模块，其中包含了三个组件：WelcomeComponent、RegisterComponent 和 LoginComponent。它还引入了名为 BrowserModule 的模块，当然，也可以引入其他的模块。

组件

组件是 Angular 应用程序中的基本构建块，可以将它们看作是页面上部分区域的代码、样式和 HTML。每个 Angular 应用都至少需要一个组件作为根组件，这个组件会把其他组件组装起来，形成整个应用。以下是定义一个组件的代码：


import { Component } from '@angular/core';
@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent { }

上面的代码定义了一个名为 WelcomeComponent 的组件，它有一个选择器 'app-welcome'，对应的 HTML 是 './welcome.component.html'，对应的样式是 './welcome.component.css'。

服务

服务是 Angular 应用程序中的一个单例对象，它可以在整个应用程序中被注入到各个组件中。服务可以封装用于某些操作的代码，例如从 REST API 中获取数据。以下是定义一个服务的代码：


import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class AuthService { }

上面的代码定义了一个名为 AuthService 的服务，使用 Injectable 装饰器来标记它。它被配置为以根级注入的方式进行使用。

2. 博客应用程序

在学习完上述基本概念之后，接下来我们可以尝试使用 Angular 来构建一款更加完整的应用程序，例如一款博客应用程序。该应用程序中可以实现用户的登录、发表博客以及查看和管理博客等功能。这个项目将帮助您深入理解 Angular 技术栈的应用。

表单

表单是任何 Web 应用程序中最常用的一项功能，它具有许多复杂的功能，例如数据验证、表单重置等等。以下是一个简单的表单的代码：


import { Component } from '@angular/core';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  private username: string = '';
  private password: string = '';
  login() { }
  reset() { }
}

上面的代码定义了一个包含了用户名和密码两个输入框以及两个按钮的登录组件。该组件包含了 login 方法和 reset 方法，分别用于登录和重置表单。其中 login 方法需要从 AuthService 服务中获取用户的登录信息。

路由

路由是 Angular 应用程序中的另一个重要特性，它可以帮助应用程序进行导航和组件的加载。以下是一个简单的路由配置的代码：


import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
  { path: '', redirectTo: '/welcome', pathMatch: 'full' },
  { path: 'welcome', component: WelcomeComponent },
  { path: 'blog', loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule) },
  { path: '**', component: PageNotFoundComponent }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

上面的代码定义了一个名为 AppRoutingModule 的模块，该模块包含了一个路由配置数组 routes。当请求根路径时，会自动重定向到欢迎页面。当请求 '/welcome' 路径时，会加载 WelcomeComponent 组件。当请求 '/blog' 路径时，会动态加载 BlogModule 模块。

3. Angular Material 应用程序

Angular Material 是一套使用 Material Design 设计语言的 UI 组件库，它的目的是让 Angular 应用程序更美观、直观和易于使用。使用 Angular Material 设计的应用程序具有良好的用户体验，同时也符合现代 Web 设计的发展趋势。学习如何使用 Angular Material 可以让您更好地理解 Angular 应用程序的开发方式。

组件库

Angular Material 应用程序可以使用 Angular Material 组件库中提供的许多组件，例如按钮、卡片、对话框、菜单等。以下是一个使用 Angular Material 组件的代码：


import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
@Component({
  selector: 'app-blog-list',
  templateUrl: './blog-list.component.html',
  styleUrls: ['./blog-list.component.css']
})
export class BlogListComponent {
  constructor(public dialog: MatDialog) { }
  openDialog() {
    const dialogRef = this.dialog.open(NewBlogDialog);
    dialogRef.afterClosed().subscribe(result => { });
  }
}
@Component({
  selector: 'new-blog-dialog',
  templateUrl: 'new-blog-dialog.html',
})
export class NewBlogDialog { }

上面的代码定义了一个名为 BlogListComponent 的组件，该组件使用了 MatDialog 组件来实现一个新博客的对话框。当用户点击按钮时，会弹出一个对话框，用户可以输入新博客的名称和内容。

4. 图表应用程序

图表应用程序是一款基于 Angular 的数据可视化应用程序，它可以实现数据以图表的形式展示，帮助用户更好地理解和分析数据。该应用程序使用了许多成熟的第三方图表库，例如echarts、highcharts等，通过该项目可以学习到如何在 Angular 应用程序中使用第三方库。

组件通信

在 Angular 应用程序中，组件之间的通信是非常重要的，组件可以通过输入、输出、服务等方式实现相互之间的数据传递。以下是一个组件通信的代码：


import { Component, Input, EventEmitter, Output } from '@angular/core';
@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent {
  @Input() username: string = '';
  @Output() userChange = new EventEmitter<string>();
  updateUser() {
    this.userChange.emit(this.username);
  }
}

上面的代码定义了一个名为 UserComponent 的组件，该组件有一个 username 数据输入和一个 userChange 事件输出。当用户名发生变化时，该组件会触发 userChange 事件，通知父组件进行响应。

5. 后台管理系统

后台管理系统是一款基于 Angular 的管理界面应用程序，它可以实现数据的增删改查操作，并具有良好的用户交互效果。使用 Angular 构建后台管理系统可以帮助您更好地了解如何实现 CRUD 操作以及如何使用组件和路由等技术。

模板驱动表单

Angular 提供了两种表单驱动方式，即模板驱动表单和响应式表单。以下是一个模板驱动表单的代码：


import { Component } from '@angular/core';
@Component({
  selector: 'app-user-add',
  templateUrl: './user-add.component.html',
  styleUrls: ['./user-add.component.css']
})
export class UserAddComponent {
  user = { name: '', age: 0, address: '' };
  onSubmit() {
    console.log(this.user);
  }
}

上面的代码定义了一个名为 UserAddComponent 的组件，该组件使用了模板驱动表单来增加一个新用户。当用户提交表单时，会触发 onSubmit 方法，将用户信息输出到控制台中。

6. 电商应用程序

电商应用程序是一款基于 Angular 的在线商城应用，它可以实现商品的展示、购买以及订单管理等功能，具有良好的用户体验和稳定的性能。使用 Angular 构建电商应用程序可以帮助您更好地了解如何实现复杂的 Web 应用程序。

响应式表单

响应式表单是 Angular 表单的另一种驱动方式，它具有更好的数据验证和错误处理能力。以下是一个响应式表单的代码：


import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-checkout',
  templateUrl: './checkout.component.html',
  styleUrls: ['./checkout.component.css']
})
export class CheckoutComponent implements OnInit {
  checkoutForm: FormGroup;
  constructor(private fb: FormBuilder) { }
  ngOnInit() {
    this.checkoutForm = this.fb.group({
      name: ['', Validators.required],
      address: '',
      cardNumber: ['', Validators.required],
      expiration: ['', Validators.required],
      cvv: ['', Validators.required]
    });
  }
  onSubmit() {
    console.log('Your order has been submitted', this.checkoutForm.value);
    this.checkoutForm.reset();
  }
}

上面的代码定义了一个名为 CheckoutComponent 的组件，该组件使用了响应式表单来提交用户的订单信息。当用户提交表单时，会触发 onSubmit 方法，并将表单数据输出到控制台。

7. 地图应用程序

地图应用程序是一款基于 Angular 的地图展示应用，它可以实现地图的加载、标记、搜索以及路线规划等功能。使用 Angular 构建地图应用程序可以帮助您更好地了解如何使用第三方地图 API 和插件。

第三方库

地图应用程序需要使用第三方地图 API 或插件来实现地图功能。以下是一个使用第三方库的代码：


import { Component } from '@angular/core';
import { Loader } from '@googlemaps/js-api-loader';
@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent {
  map: google.maps.Map;
  loader = new Loader({
    apiKey: 'YOUR_API_KEY',
    version: 'weekly'
  });
  ngOnInit() {
    this.loader.load().then(() => {
      this.map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8
      });
    });
  }
}

上面的代码定义了一个名为 MapComponent 的组件，该组件使用了 Google Maps API 来加载地图。当地图加载完成后，该组件会在页面上显示地图。

8. 电影应用程序

电影应用程序是一款基于 Angular 的电影信息展示应用，它可以实现电影信息的搜索、展示以及影评等功能。构建电影应用程序可以帮助您更好地了解如何使用 REST API 和第三方应用程序。

HTTP 请求

电影应用程序需要使用 REST API 来获取电影信息。以下是一个 HTTP 请求的代码：


import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-movie-list',
  templateUrl: './movie-list.component.html',
  styleUrls: ['./movie-list.component.css']
})
export class MovieListComponent implements OnInit {
  movies = [];
  constructor(private http: HttpClient) { }
  ngOnInit() {
    this.http.get('https://api.themoviedb.org/3/movie/popular?api_key=YOUR_API_KEY').subscribe(data => {
      this.movies = data.results;
    });
  }
}

上面的代码定义了一个名为 MovieListComponent 的组件，该组件使用了 HttpClient 组件来向电影 API 发出 HTTP 请求，并将获取到的电影数据渲染到页面中。

结语

Angular 是一款十分强大的前端框架，它具有良好的性能、可维护性和可扩

如何上手Angular，先从 8 个开源项目开始！