AngularJS

AngularJSでこんにちは世界

IMG_0772.jpeg

入門するワンっ

入門するワンっ


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>

Screen Shot 2019-03-03 at 14.41.42.png

サーバーを起動

$ ng serve

Screen Shot 2019-03-03 at 14.40.07.png


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!'
}
}

Screen Shot 2019-03-03 at 14.18.49.png

サービスをappに登録

// app.module.ts

import { CommonService } from './service/common.service';

providers: [
CommonService
],

Screen Shot 2019-03-03 at 14.26.32.png

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

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

HTMLファイルに記入

<!-- app.component.html -->

<router-outlet></router-outlet>
<app-hello></app-hello>

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

サーバーを起動

$ ng serve

Screen Shot 2019-03-03 at 14.40.07.png


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
],
})

Screen Shot 2019-03-03 at 15.15.00.png

HTMLファイルに記入

<input type='text' [(ngModel)]="name">

<p>{{name}}</p>

Screen Shot 2019-03-03 at 15.26.01.png

サーバーを起動

$ ng serve

Untitled.gif


Others

ポートをあける

# つかんでるプロセスをみる

$ lsof -i -P | grep 4200

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


Reference

Angular CLI 環境作成方法(Mac環境)

Angular CLI によるサービスの生成

How to Create an Angular Hello World