Help us understand the problem. What is going on with this article?

超初心者のAngular学習〜2日目〜

More than 1 year has passed since last update.

前回のおさらい

1日目を参照してください(爆)
では今回の二日目ではAngularをインストールして公式サイトのはじめにをやっていきましょう。

構築環境

手持ちのメインPCのUbuntuで実行します。nodeとnpmのバージョンはこんな感じです。

test@test-ThinkStation-E30:~$ node -v
v10.12.0
test@test-ThinkStation-E30:~$ npm -v
6.4.1

では、Angularをインストールしていきます。

test@test-ThinkStation-E30:~$ npm install -g @angular/cli

Angular CLIインストールはこれでOK
※開発環境がUbuntuでインストールの際にエラーが発生する場合はこの手順を実施するとエラーが解消されます。自分は対策1の手順でエラーが解消されました。書かれてる内容でエラーが改善されない場合はエラー内容をググって検索してください(爆)
一応、公式サイトにも改善方法がありますので参考にしてください。

プロジェクト作成

公式に書かれてるとおりに実行

test@test-ThinkStation-E30:~$ ng new my-app

アプリケーションのサーブ

要はサーバーを起動するということです。この場合は当然ローカルホストでデフォルトのlocalhost:4200になります。openコマンドを追加することで起動後にブラウザで表示することができます。

test@test-ThinkStation-E30:~$ ls  //一応ディレクトリ(さっき作ったプロジェクト)があるかの確認
test@test-ThinkStation-E30:~$ cd my-app
test@test-ThinkStation-E30:~/my-app$ ng serve --open

これでWelcome to app !!と表示されればオッケー

表示されてる文章を書き換える

これはコンポーネント(component)を書き換えます。
書き換えるに僕はVSCodeを使用しました。VSCodeのインストールの仕方はかなりありますが、僕は公式からパッケージをダウンロードしてインストールしました。各々のやりかたはググってください(爆)また、VSCodeをインストールした際は多様なアドオンが使えるのでインストールしておくと便利かもしれません。
僕がインストールしたアドオンは、

  • Angular 6 Snippets
  • Japanese Language Pack for Visual Studio Code
  • GitLens

gitと日本語パッケージについては好みと用途なんでインストールは不要だと思います。(そもそもVSCodeよりもATOMの方が好きな人は多いかも)
書き換える内容は、~/src/app/app.component.tsの、title = 'my-app';のmy-appの部分です。
ここを公式サイトのように書き換えるとあれなので"あんぎゃらちゃん"とかにでもしちゃいましょう。
こんなかんじで。

export class AppComponent {
  //title = 'my-app';
  title = 'あんぎゃらちゃん';
}

では動かして確認しましょう。my-appあんぎゃらちゃんになってれば成功

では、次にCSSの編集を始めましょう。~src/app/app.component.cssを

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

にすれば完成と、ここまでははじめに書いてることですね!!
では、三日目はチュートリアルと各種Angularの機能を分解していこうかなと思います。

RYO-HIRA63
駆けだし転職プログラマー (仮) 猛勉強中。最近使ってる言語は、JavaScript(TypeScript)、フレームワークはAngular6やVue.JS、今はフロントエンド、バックエンドを勉強中(開発中)です。 他に学んだ言語はJavaとJavaEEのみです。(DBはMySQLやSQLlite) あとはkotlinに興味があったりなかったり
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした