中文: 从零开始学Angular，一个月内能够构建自己的服务。第一步：安装

2 年 ago
清, 宇
2 minutes

首先

为了确保易懂性，在本入门课程中，我们将始终附带可运行的代码进行讲解。我们将介绍从安装开始，实际进行包括登录在内的API通信以完成前端代码，并完成基础设施建设的过程。

你可以在本文中找到可以使用的代码。

所有的文章将按照分支进行管理。

Angular 是什么

Angular是由Google开发的一个单页面应用程序（SPA）的JavaScript框架。
尽管最近React、Vue等框架越来越受欢迎，但Angular的最大特点是只需要学习Angular就足够了（所以它是世界上最易懂的）。
作为一种全栈框架，几乎可以使用Angular完成所有任务。
尽管React和Vue被认为简洁好用，但实际上开发中不会只使用React或Vue。
肯定需要开始使用API通信，并进行周边技术的选择和取舍。这需要一定的知识和智慧。
只要掌握Angular，基本上可以完成所有的事情。

此外，在创业企业中，我认为在最重要的“开发速度”方面，Vue.js绝对超越了其他SPA框架（可能言之过甚）。

Angular的版本

这篇文章所讨论的Angular版本是6。（如果有新版本，我们会随时更新）

這篇是為了寫給誰的？

    • Angularに興味はあるけど書いたことないという方

 

    • SPA書いたことないという方

 

    • React, Vue しか触ったことないという方

 

    • AngularJS(1) は触ったことあるけど、2以降は触ったことないという方

 

    今現在Angularを使っているけど、より深くAngularを勉強したいという方

我希望能够传达给广大读者Angular的优点。

安装Node

首先，我们应该安装Node，这是最重要的。即使对于那些对此一无所知的人来说，也应该先安装这个。
由于本文是关于Angular入门的，所以我们只进行了简单介绍。

不想读英语的人

如果你不想看英文，可以在Qiita上搜索一下有关Node安装的文章！
https://qiita.com/search?utf8=%E2%9C%93&sort=&q=node+%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB+stocks%3A%3E100

推荐使用nvm。

如果您正在使用Mac，建议您使用一个叫做nvm的node版本管理器。
请按照这里的指示进行安装。
GitHub链接：https://github.com/creationix/nvm

希望从官方页面进行安装的用户

您可以从以下页面下载并安装。在Angular6中，需要Node版本8或更高才能正常运行。
https://nodejs.org/

安装yarn

接下来，让我们安装Node的包管理器yarn。由于这不是主要内容，所以将任务交给另一篇文章处理。

不想读英语的人

以下是在Qiita上搜索已被存档100多次的文章的链接↓
https://qiita.com/search?utf8=%E2%9C%93&sort=&q=yarn+%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB+stocks%3A%3E100
https://yarnpkg.com/lang/en/

(Note: Chinese translation is provided in Simplified Chinese)

想要从官方页面安装的用户

安装 Angular CLI

在准备好Node和yarn之后，让我们安装Angular CLI。 Angular CLI 是Angular的命令行界面。换句话说，它提供了通过命令简单地创建和构建Angular项目的功能。我喜欢Angular这方面的友好性。（虽然也有Vue这个选项）

安装步骤

打开终端，然后在命令行上执行以下命令。

yarn global add @angular/cli

yarn global v1.3.2
[1/4] ?  Resolving packages...
[2/4] ?  Fetching packages...
[3/4] ?  Linking dependencies...
[4/4] ?  Building fresh packages...
success Installed "@angular/cli@6.0.8" with binaries:
      - ng
✨  Done in 5.66s.

创建一个项目

用下面的命令来创建项目。

ng new angular-sample

ng new命令后面的字符串将成为项目名称。以下是预期输出并创建文件夹的示例。

CREATE angular-sample/README.md (1023 bytes)
CREATE angular-sample/angular.json (3548 bytes)
CREATE angular-sample/package.json (1310 bytes)
CREATE angular-sample/tsconfig.json (384 bytes)
CREATE angular-sample/tslint.json (2805 bytes)
CREATE angular-sample/.editorconfig (245 bytes)
CREATE angular-sample/.gitignore (503 bytes)
CREATE angular-sample/src/environments/environment.prod.ts (51 bytes)
CREATE angular-sample/src/environments/environment.ts (631 bytes)
CREATE angular-sample/src/favicon.ico (5430 bytes)
CREATE angular-sample/src/index.html (293 bytes)
CREATE angular-sample/src/main.ts (370 bytes)
CREATE angular-sample/src/polyfills.ts (3194 bytes)
CREATE angular-sample/src/test.ts (642 bytes)
CREATE angular-sample/src/assets/.gitkeep (0 bytes)
CREATE angular-sample/src/styles.css (80 bytes)
CREATE angular-sample/src/browserslist (375 bytes)
CREATE angular-sample/src/karma.conf.js (964 bytes)
CREATE angular-sample/src/tsconfig.app.json (194 bytes)
CREATE angular-sample/src/tsconfig.spec.json (282 bytes)
CREATE angular-sample/src/tslint.json (314 bytes)
CREATE angular-sample/src/app/app.module.ts (314 bytes)
CREATE angular-sample/src/app/app.component.css (0 bytes)
CREATE angular-sample/src/app/app.component.html (1141 bytes)
CREATE angular-sample/src/app/app.component.spec.ts (989 bytes)
CREATE angular-sample/src/app/app.component.ts (207 bytes)
CREATE angular-sample/e2e/protractor.conf.js (752 bytes)
CREATE angular-sample/e2e/src/app.e2e-spec.ts (302 bytes)
CREATE angular-sample/e2e/src/app.po.ts (208 bytes)
    Directory is already under version control. Skipping initialization of git.

试试启动

我会进入创建好的文件夹并尝试启动。

cd angular-sample
ng serve —-open

浏览器打开后，应该会弹出以下类似的画面。

スクリーンショット 2018-07-07 23.45.29.png

顺便提一句，”open” 的意思是在启动时通过浏览器打开该页面，
Angular 默认在端口号为 4200 的情况下启动。

ng serve

您可以只需启动，并直接访问 http://localhost:4200 来打开。

额外福利。安装WebStorm插件。

我推荐在开发Angular时使用WebStorm作为开发环境。RubyMine或者其他类似的工具也可以。

提供了一些非常有用的插件，如增强了补全功能的插件，在开发Angular时非常实用。

安装步骤

选择“设置→插件→浏览存储库…”。

スクリーンショット 2018-07-07 23.48.07.png

然后，在Angular中搜索并安装以下插件。

スクリーンショット 2018-07-07 23.48.43.png

由于非常方便，如果您已经拥有Web Storm或RubyMine等软件，那么请务必安装尝试。

下一次

下次，我们将解释目录结构和组件基础！

Angular入門，從無經驗到可以在一個月內創建服務。第二部分：目錄結構和組件的基礎。

首頁文章目錄

「Angular入門」是一篇非常熱門的文章，我們正在製作一份摘要來整理它的內容。從零基礎到一個月內能夠開發出服務的能力。您可以在以下連結找到文章：
https://qiita.com/seteen/items/43908e33e08a39612a07

bannerAds