AngularJSでこんにちは世界

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

Summary

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

Environment

$ 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

### 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

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

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

vim plugins

### 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

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

# create application
$ ng new HelloWorld
$ cd HelloWorld

HTMLファイルに記入

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

サーバーを起動

$ ng serve

Hello World 02 ( with service )

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

# create application
$ ng new HelloWorld2
$ cd HelloWorld2

コンポーネントを作成

$ ng g component hello

サービスを作成

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

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

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

サービスをappに登録

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

providers: [
  CommonService
],

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

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

HTMLファイルに記入

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


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

サーバーを起動

$ ng serve

Hello World 03 ( with forms )

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

# create application
$ ng new HelloWorld3
$ cd HelloWorld3

formsモジュールを追加

# 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

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

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

HTMLファイルに記入

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

サーバーを起動

$ ng serve

Others

ポートをあける

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

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

Reference

Angular CLI 環境作成方法（Mac環境）
Angular CLI によるサービスの生成
How to Create an Angular Hello World