因为有人推荐我使用Angular而不是Angular.js，所以我立刻开始学习它

2 年 ago

1 minute

我得到了推荐优先学习Angular而不是Angular.js，所以立刻开始了学习。

试了一下之后，实际花费的时间大概是30分钟左右吧。相较于Angular.js，安装和执行示例程序的时间感觉更短！

确保已安装npm
确保已安装Node.js版本为8.x或10.x

由于我已经安装了昨天的文章，所以我会跳过它。

参考：我正在开始学习使用ANGULAR.JS官方教程中的PhoneCat Tutorial应用程序。
链接：https://qiita.com/ryuutamaehara/items/4f095b264f5e688ef1c1#comment-54fb8b28131e1bbf3996

有人在昨天的文章中向我留下了评论。

“AngularJS已经过时了”

哎呀（´･ω･｀）

网站开发这一行业的发展速度确实很快，这是事实。

我之前一直只在顧Shi擔任或者主機的運營等類似的現場工作，所以對這件事感到非常激動。真是太棒了。接下來我想要一點一點地努力(‘ω’)ノ

我想从今天开始实际学习被推荐的“Angular”。

首先从官方网站开始！你会吃惊的！看啊，它是用日语写的！(‘ω’)ワーイ

请参考以下链接：https://angular.jp/

在首页上看到“移动和桌面，一个框架”这样时尚的口号，我们可以看出，Angular能够通过一个框架构建现有主要设备的系统，这是它的优势。

听说你也会使用Node.js和npm，这和Angular.js类似。在这篇文章的开头已经提到过这两个，现在我们不再重复安装了。

我会按照文章所说的进行。看起来Angular主要是通过CLI（命令行界面）来操作的呢。
我不喜欢CUI，所以我用的是Windows系统。

说话不能有文句，对吧。是的。

从命令提示符上执行以下指令。

npm install -g @angular/cli

请在创建工作区和初始化应用程序之前，先进入您希望创建的目录中。

ng new my-app

根据ng new命令，似乎可以创建一个应用程序的模板。
my-app将是被创建的应用程序名称。

创建的模板项目似乎包含以下组成部分：
– 一个名为my-app的根文件夹，用于存放新的工作空间
– 名为my-app的初始骨架应用项目（位于src子文件夹内）
– 端到端的测试项目（位于e2e子文件夹内）
– 相关的配置文件

这个应用程序里似乎集成了一些可以立即运行的应用。

我們的範本中似乎包含了伺服器！我們馬上啟動並確認應用程式能否運作。

cd my-app
ng serve --open

不是server，而是serve哦，哈哈。
如果成功的话，会自动在浏览器中打开http://localhost:4200/。

如果屏幕上显示着带有Angular图标的文字「欢迎来到我的程序！」，那就表示成功了。

据说”./src/app/app.component.ts”文件是Angular的配置管理文件。它似乎包含了显示屏上的数据显示以及基于用户输入的操作等内容。

因为这个位置有一个名为”my-app”的说明，所以尝试将其更改为”我的第一个Angular应用”。
在这个状态下更新了之前启动的应用程序界面，可以确认”Welcome to my-app!”的文字被更改为”Welcome to 我的第一个Angular应用!”。

接下来，我会尝试进行CSS的设置。

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

当你回到原来的浏览器，你可以确认 CSS 已经被应用了。

今天的教程到此结束了。

根据官方网站下一步的说明如下所示。

・在“英雄之旅”教程中，提供了实践性的附加学习。它逐步说明了如何构建一个能够帮助人力资源公司管理超级英雄员工团队的应用程序。

有一种听起来有印象但又没有印象的感觉…
虎与兔？是什么？记忆有点模糊了…哈哈

在架构指南中，我们将解释模块、组件、服务和依赖注入（DI）等重要概念。为特定的Angular概念和功能提供详细指南的基础。

今天就到这里吧！！好困！(:3 」∠)