创建一个Angular项目

2 年 ago
雅, 悟
1 minute

在上一次中我们讨论了关于在开始第一个Angular项目之前需要做的准备工作！

在这个项目中，我希望能够解释Angular的基础技术，以便初学者也能理解，并一起创建简单的网页。

Angular教程

我想立即开始创建Angular项目！

安装Angular CLI

有一个命令行接口能够用一个命令完成创建Angular项目的各种操作，先安装这个接口吧！

$npm install -g @angular/cli

順便提一下，”g” 代表着全球（Global）的意思。让我们确认一下是否已安装成功！

$ng version
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/



Angular CLI: 8.0.1
Node: 10.16.0
OS: darwin x64
Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.800.1
@angular-devkit/core         8.0.1
@angular-devkit/schematics   8.0.1
@schematics/angular          8.0.1
@schematics/update           0.800.1
rxjs                         6.4.0

如果能出现这样的可爱版本一览就成功了！顺便说一下，版本将升级至8（大约每半年左右上升一次）。

创建Angular项目

$ng new example-angular    ← 新しいアンギュラープロジェクトを作成(new の後には作りたいAppの名前)
//ここからオプションを聞かれる
//⬇︎はAngular上でrouting機能を実装するか聞かれる(仮にyにしてもいつでも無くしたりできるのでとりまy)
? Would you like to add Angular routing? (y/N)
// 次にスタイルシートのテンプレートエンジンを聞かれるが、僕は基本的にscssでいいと思います！
❯ CSS 
  SCSS   [ http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax ] 
  Sass   [ http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html       ] 
  Less   [ http://lesscss.org                                                 ] 
  Stylus [ http://stylus-lang.com                                             ]  
// 好きなスタイルシートのテンプレートエンジンを決めたら今後コンポーネントを
//自動生成する時にそのテンプレートエンジンで作成してくれる(これもあとで変更可)

~~~色々頑張ってくれてる〜〜〜〜

让我们看一下是否做完了！

$ls
example-angular

$cd example-angular
$ls -l
angular.json
browserslist
e2e/
karma.conf.js
node_modules/
package-lock.json
package.json
src/
tsconfig.app.json
tsconfig.json
tsconfig.spec.json
tslint.json

应该是这种结构！

让我们启动项目吧！

$ng serve　　　　　//プロジェクトのルートディレクトリ(一番上の階層)で

这将启动服务器。默认端口号为4200。

飛往

スクリーンショット 2019-06-02 18.42.02.png

当以这种方式显示为成功！

关于编辑器

一些人对编辑器非常执着，在美剧《硅谷》中，有些人甚至因为选择使用Vim还是Emacs而分手，真是太可怕了。

嗯，在日本好像没有这种情况，所以我认为基本上用 Visual Studio Code 就可以了。
有各种编程语言、模板引擎、颜色方案、Git 操作。只需要点击一下按钮，就可以安装各种插件，而且插件数量非常丰富，非常适合初学者。

噢，通过VScode可以打开终端，所以即使不想在GUI中操作Linux命令，屏幕的移动等也不会麻烦。请安装Visual Studio Code。

顺便说一下，我现在正在使用vim，所以我希望在这个项目中继续使用vim。关于vim的自动补全功能等等，如果你想要搭建一个最强的vim环境，可以参考我的博客文章《2. 如何安装插件》。请点击这里！

下面是我想介绍一下Angular项目的大致结构！

与本文相关的链接：
https://code.visualstudio.com/
https://qiita.com/KaoruIto76/items/002d9658b890fb6392f9
https://angular.jp/tutorial

bannerAds