以 React 和 Vue 开发人员身份学习 Angular 5 入门 最终项目部署 后续步骤

2025-06-08

作为 React 和 Vue 开发人员学习 Angular 5

入门

最终项目

部署

后续步骤

我尽量避免卷入某些编程文章中那种“框架之战”的论调。不过，我承认我对 AngularJS（也就是 Angular 1）确实颇有微词。它的语法和结构在我看来常常显得笨重，而且错误信息也让人抓狂！随着 React 的兴起，我也更倾向于越来越流行的基于组件的架构。但迁移到 Angular 2 却遇到了坎坷，而且不向后兼容，这让我很失望，之后就不再关注 Angular 了。

最近，我听到了更多关于 Angular 5 的讨论，我想尝试一下，并将我的经验与使用 Vue 和 React 的经验进行比较，因为我经常使用它们。

入门

我先从 Angular 网站上的教程开始学习，它看起来非常直观，概念上也和其他框架类似。TypeScript 可能是它和 Angular 最大的区别，我非常喜欢它！看完他们的示例项目后，我感觉构建项目很轻松，尤其是它这么大！我花了几个小时才把它全部看完！

超级英雄主题非常可爱，我喜欢它包含路由、API 请求、CLI 和服务的功能。它对框架的介绍非常详尽！

最终项目

上周我用 Go 语言构建了一个显示代码资源的 API，所以这周我想为这个应用构建一个前端！目前我几乎只专注于“微服务”风格的应用：我更倾向于分别构建前端和后端。这个应用也不例外——本周的项目完全是静态的，托管在 GitHub 页面上。

我一开始设计了一个组件来存放我的代码资源，然后为这些资源定义了 TypeScript 模式，最后又设计了一个服务来连接 API。我始终保持着这种架构。由于这是一个非常简单的应用程序，所以当时我觉得没有必要再添加子组件之类的东西了。

该服务看起来是这样的：

@Injectable()
export class ResourcesService {
  private resourcesUrl = 'https://helpful-coding-resources.herokuapp.com/resources';

  constructor (
    private http: HttpClient,
  ) {}

  getResources (): Observable<Resource[]>{
    return this.http.get<Resource[]>(this.resourcesUrl)
               .pipe(
                  tap(resources => console.log('done! 😀'));
               )
  }
Enter fullscreen mode Exit fullscreen mode

我觉得 Angular 有自己的 AJAX 服务，而不是你用你喜欢的，这挺有意思的。我通常用 Axios，用它应该没问题，但能把它包含在库里就更好了。

附注：我不习惯在 JavaScript 中使用分号，但我在这个项目中使用了它们，主要是因为 VSCode 会自动将它们插入到 TypeScript 文件中，而我懒得更改设置！

然后，我对组件本身进行了处理，最终结果如下：

export class ResourcesComponent implements OnInit {
  resources: Resource[];
  initialResources: Resource[];
  showSearch: boolean;

  constructor(private resourceService: ResourcesService) { }

  ngOnInit() {
    this.getResources();
  }

  getResources(): void {
    this.resourceService.getResources()
        .subscribe(resources => {
          this.resources = resources;
          this.initialResources = resources;
        });
  }

  toggleSearch(): void {
    this.showSearch = !this.showSearch;
  }

  search(val): void {
    this.resources = this.initialResources.filter(resource => {
      return resource.Tags.some(tag => {
        return tag.toLowerCase().startsWith(val.toLowerCase());
      });
    });
  }
}
Enter fullscreen mode Exit fullscreen mode

我也很喜欢它的模板语言，感觉和 Vue 非常相似。此外，我发现 Angular 仍然保持了对 HTML 和 JS 代码的关注点分离，这一点很有意思，尤其是与 React 架构相比。

<div *ngIf="resources">
  <div class="search-div">
    <i
      class="material-icons"
      (click)="toggleSearch()"
    >
      search
    </i>
    <input
      #searchInput
      [ngClass]="{'shown': showSearch}"
      class="search-box"
      (keyup)="search(searchInput.value)"
      type="text"
      placeholder="Filter Resources"
    />
  </div>
  <div class="list">
    <div class="resource" *ngFor="let resource of resources">
        <a href="{{ resource.Link }}"><h3>{{ resource.Name }} <span class="author">{{ resource.Author }}</span></h3></a>
        <p>{{ resource.Description }}</p>
    </div>
  </div>
</div>
<div *ngIf="!resources">
  <div class="loader"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

我有两个数组，一个包含当前显示的资源，另一个包含从 API 获取的资源。这样我就可以轻松实现基于标签的过滤功能。我还设置了一个开关，可以在不使用搜索栏时隐藏它。最后，我还有一个搜索方法，可以过滤附加到资源的标签。

全部文章显示

全部文章显示

搜索文章

带有搜索功能的页面

我还很轻松地添加了动画。有一些文档教我如何直接在 Angular 中实现动画，但我选择在 CSS 中实现。我更习惯用 CSS 来实现，而且 CSS 也经过了优化。

部署

我找到了一个npm可以将 Angular 5 应用部署到 GitHub 页面的包，我所有的静态托管服务都用这个包。它相对简单，我很容易就部署好了页面。

后续步骤

我很高兴看到 Angular 生态系统自 AngularJS 以来取得了长足的进步！我喜欢它的组件架构，语法似乎也得到了改进。我认为所有功能都集成得很好，而且 CLI 也很棒。

话虽如此，我个人并不觉得 Angular 5 有什么用处。这个包太庞大了，对我来说，找到问题支持比 React 或 Vue 难得多（可能是因为版本更新太快）。如果我想要静态类型，我可能会在 React 中使用 Flow，或者在 Vue 中集成 TypeScript。我认为 Angular 正在努力成为重视稳定性的企业级应用的首选框架。拥有 Google 的品牌支持至关重要，而且它覆盖的庞大领域可能也起了作用。我仍然更喜欢 React 和 Vue 代码的结构——我更喜欢它们提供的更高灵活性。

简而言之，我喜欢使用 Angular 5，如果有人邀请我使用它，我会毫不犹豫地使用它来开发另一个应用程序，但与其他框架相比，我自己不会选择使用它。Vue 非常容易学习，它的生态系统非常一致，而 React 的架构对整个行业来说具有变革性的意义。我并不讨厌 Angular 5 的任何地方，只是它不像其他工具那样吸引我。

完整代码
应用程序

我的“学习新事物”系列的一部分

鏂囩珷鏉ユ簮锛�https://dev.to/aspittel/learning-angular-5-as-a-react-and-vue-developer-5dp3
Devto 翻译
PREV
2018年的回顾
NEXT
关注星期五：您会推荐关注哪位 DEV 成员？