AngularJSでこんにちは世界

![IMG_0772.jpeg](https://qiita-image-store.s3.amazonaws.com/0/149269/0be922dc-613e-acb6-30e2-4200916229ad.jpeg)

入門するワンっ
入門するワンっ

## Summary

とりあへず
とりあへず
こんにちは世界してみましたっ
ご指摘ウエルカムウエルカムですっ (^_^)/


## Environment

```bash
$ sw_vers 
ProductName:	Mac OS X
ProductVersion:	10.14.3
BuildVersion:	18D109

$ uname -a
Darwin callmekoheis-MacBook-Air.local 18.2.0 Darwin Kernel Version 18.2.0: Thu Dec 20 20:46:53 PST 2018; root:xnu-4903.241.1~1/RELEASE_X86_64 x86_64
```

## Prepare

AngularJS

```bash
### nodebrewのインストール
$ brew install nodebrew
### パスを通す（ここは環境で違うかも・・・）
$ export PATH=$HOME/.nodebrew/current/bin:$PATH 
$ nodebrew --version
nodebrew 1.0.1

### node.jsのインストール
$ nodebrew install-binary stable
### versionの確認
$ nodebrew ls
v10.15.1
current: none
### versionの指定
$ nodebrew use 10.15.1
### versionの確認
$ nodebrew ls
v10.15.1
current: v10.15.1

### Angular CLI のインストール
$ npm install -g @angular/cli
$ ng --version
Angular CLI: 7.3.3
Node: 10.15.1
OS: darwin x64
```


## Prepare2( 任意 )

typescript

```bash
### install typescript from node
$npm -g install typescript

### typescript version
$ tsc --version
Version 3.3.3333
```

vim plugins

```sh
### Autocomplete( based on deoplete )
git clone https://github.com/Shougo/deoplete.nvim
git clone https://github.com/roxma/nvim-yarp
git clone https://github.com/roxma/vim-hug-neovim-rpc
git clone https://github.com/Quramy/tsuquyomi
git clone https://github.com/rudism/deoplete-tsuquyomi

### syntax color ( typescript )
git clone https://github.com/leafgarland/typescript-vim
```



### Hello world 01

プロジェクトフォルダを作成

```sh
# create application
$ ng new HelloWorld
$ cd HelloWorld
```

HTMLファイルに記入

```html
<!-- app.component.html -->
<p>
  Hello World!
</p>
<router-outlet></router-outlet>
```

![Screen Shot 2019-03-03 at 14.41.42.png](https://qiita-image-store.s3.amazonaws.com/0/149269/e5606c69-af26-8fae-13df-227504eb3b0c.png)


サーバーを起動

```sh
$ ng serve
```

![Screen Shot 2019-03-03 at 14.40.07.png](https://qiita-image-store.s3.amazonaws.com/0/149269/d1d4ddcb-9d18-e38a-82b9-3f5f54b2a003.png)


### Hello World 02 ( with service )

プロジェクトフォルダを作成

```bash
# create application
$ ng new HelloWorld2
$ cd HelloWorld2
```

コンポーネントを作成

```bash
$ ng g component hello
```

サービスを作成

```bash
$ ng g service service/common
CREATE src/app/service/common.service.spec.ts (333 bytes)
CREATE src/app/service/common.service.ts (135 bytes)
```

サービスのコンストラクタを作成

```javascript
// service.ts
export class CommonService {
  public commonProc: String;
  constructor() {
    this.commonProc = 'Hello World!'
  }
}
```

![Screen Shot 2019-03-03 at 14.18.49.png](https://qiita-image-store.s3.amazonaws.com/0/149269/e573af32-ab78-1006-735c-4046946c49e5.png)


サービスを`app`に登録

```ts
// app.module.ts
import { CommonService } from './service/common.service';

providers: [
  CommonService
],
```

![Screen Shot 2019-03-03 at 14.26.32.png](https://qiita-image-store.s3.amazonaws.com/0/149269/83c2b128-1aac-826d-e0d8-f0219e3edfbd.png)

コンポーネント `hello` でサービス使用

```ts
// hello.component.ts
export class HelloComponent implements OnInit {
  public serviceProp: String;
  constructor(private cs: CommonService) { }
  ngOnInit() {
    this.serviceProp = this.cs.commonProc;
  }
}
```


![Screen Shot 2019-03-03 at 14.27.31.png](https://qiita-image-store.s3.amazonaws.com/0/149269/cb6de99c-8d51-6caa-b6a7-383842fdaa0d.png)



HTMLファイルに記入

```html
<!-- app.component.html -->
<router-outlet></router-outlet>
<app-hello></app-hello>


<!-- app.component.html -->
<p>
  {{this.serviceProp}}
</p>
```

サーバーを起動

```sh
$ ng serve
```

![Screen Shot 2019-03-03 at 14.40.07.png](https://qiita-image-store.s3.amazonaws.com/0/149269/96e4b106-079a-b684-d87d-4202306d872e.png)


### Hello World 03 ( with forms )

プロジェクトフォルダを作成

```bash
# create application
$ ng new HelloWorld3
$ cd HelloWorld3
```

formsモジュールを追加

```bash
# add modules
$ npm i --save @angular/forms
+ @angular/forms@7.2.7
updated 1 package and audited 42607 packages in 7.105s
found 0 vulnerabilities
```

```ts
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    FormsModule
  ],
})
```

![Screen Shot 2019-03-03 at 15.15.00.png](https://qiita-image-store.s3.amazonaws.com/0/149269/b485ca66-627a-9186-142e-429cd3fc5ee2.png)

HTMLファイルに記入

```html
<input type='text' [(ngModel)]="name">
<p>{{name}}</p>
```

![Screen Shot 2019-03-03 at 15.26.01.png](https://qiita-image-store.s3.amazonaws.com/0/149269/d591c287-fbe7-d482-1092-88d9bf72c8ce.png)


サーバーを起動

```sh
$ ng serve
```

![Untitled.gif](https://qiita-image-store.s3.amazonaws.com/0/149269/7b7516dc-9125-25d2-b8e3-b861c2ef969a.gif)




## Others

ポートをあける

```bash
# つかんでるプロセスをみる
$ lsof -i -P | grep 4200

# プロセスをけす
$ kill -9 1234...
```

## Reference

[Angular CLI 環境作成方法（Mac環境）](https://qiita.com/koronpo/items/cc7d3a1aabb7900e1e8e)
[Angular CLI によるサービスの生成](https://qiita.com/ksh-fthr/items/900baee52b80e6ed1b66)
[How to Create an Angular Hello World](https://codeburst.io/angularjs-4-101-6675076784aa)