構築環境
今回構築した環境は、以下の通りです。
- OS: Ubuntu 16.04
- Angular: 8.2.14
- Angular CLI: 8.3.19
- Node.js: 12.13.0
NodeJSのインストール
Node.jsはバージョン管理したいので、n packageを導入します。
n packageをインストールするために、nodejs, npmをインストールします。
$ sudo apt install -y nodejs npm
npmでn packageをインストールします。
$ sudo npm install n -g
n packageでNode.jsをインストールします。
$ sudo n stable
最初に入れた古いnodejs, npmはアンインストールし、再ログイン
$ sudo apt purge -y nodejs npm $ exec $SHELL -l
Node.jsのstableの最新版がインストールされていることを確認
$ node -v v12.13.0
ちなみに、任意のNode.jsのバージョンを使いたい場合は、以下のように実行
$ sudo n 9.11.1 $ node -v v9.11.1
Angular CLIのインストール
Angular CLIは、プロジェクト作成やコンポーネント作成など、様々な便利コマンドが詰まっているCLIツールです。
npmで一発インストールできます。
$ sudo npm install -g @angular/cli
バージョン確認
$ ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 8.3.19
Node: 12.13.0
OS: linux x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.803.19
@schematics/update 0.803.19
.
.(略)
2019/11/18時点では、8.2.14がインストールされました。
参考: 公式ドキュメントはこちら
プロジェクト作成
プロジェクトを作成し、プロジェクトホームフォルダへ移動します。
gitをインストールしていない場合はインストールしておくこと。
$ sudo apt install -y git
プロジェクトを作成します。Portfolioは好きな名前で大丈夫です。
$ ng new Portfolio $ cd Portfolio
最初の選択肢で出てくるng-routeは、のちのち使いたいので”y”を選択
Would you like to add Angular routing? Yes
正しく環境構築されているか実際にサイトを動かして確認します。
$ ng serve --host 0.0.0.0
–hostオプションは、外部からアクセスする際に必要になります。
ローカル環境で開発、アクセスする場合は必要ありません。
以下のような画面が表示されていれば、正しく環境構築できています。
ここまでで、開発の準備が整いました。
次は、ポートフォリオでおなじみに、bootstrap4の適用です。
Bootstrapの適用
Bootstrapの適用にはng-bootstrapを使います。
ng-bootstrapの導入
モジュールのインストール
$ npm install --save @ng-bootstrap/ng-bootstrap
Bootstrap本体のインストール
$ npm install --save bootstrap
スタイルの適用
$ vi angular.json
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],モジュールの適用
$ vi src/app/app.module.ts
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; ★
@NgModule({
...
imports: [ NgbModule, ... ], ★
...
})
export class AppModule { }これでng-bootstrapの導入は完了。
ng-bootstrapの動作確認
Bootstrap公式ページを参考に、starter画面ぽいものを作ってみます。
まずは、全体のレイアウトをちょっと修正。
bodyにpadding-topを設定します。
$ vi src/index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Site Name</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
<style>
body {
padding-top: 5rem;
}
</style>navibarをページ全体に表示するので、app.component.htmlに設定します。
ここでは、Bootstrap公式のサンプルを参考にします。
$ vi src/app/app.component.html
<style>
.starter-template {
padding: 3rem 1.5rem;
text-align: center;
}
</style>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">ポートフォリオ</a>
</nav>
<main role="main" class="container">
<div class="starter-template">
<h1>ポートフォリオチュートリアル</h1>
<p class="lead">AngularJSとbootstrap4でポートフォリオサイトのひな型を作る</p>
<div class="form1" style="margin-bottom: 2rem">
<div class="form-group">
<input
type="text"
class="form-control"
placeholder="Input From"/>
</div>
<button class="btn btn-primary">Search</button>
</div>
</div>
<router-outlet></router-outlet>
</main>mainの内側のコンテンツは、ページごとに表示する内容を変えたいので、テンプレート化してルーティングを設定します。
トップページ用テンプレートの生成
$ ng g component top-pageテンプレートを編集
$ vi src/app/top-page/top-page.component.html<div class="starter-template">
<h1>ポートフォリオチュートリアル</h1>
<p class="lead">AngularJSとbootstrap4でポートフォリオサイトのひな型を作る</p>
<div class="form1" style="margin-bottom: 2rem">
<div class="form-group">
<input
type="text"
class="form-control"
placeholder="Input From"/>
</div>
<button class="btn btn-primary">Search</button>
</div>
</div>app.component.htmlから、コンテンツの箇所を削除
$ vi src/app/app.component.html<style>
.starter-template {
padding: 3rem 1.5rem;
text-align: center;
}
</style>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">ポートフォリオ</a>
</nav>
<main role="main" class="container">
<div class="starter-template">
<router-outlet></router-outlet>
</div>
</main>ルーティングを編集
$ vi src/app/app-routing.module.ts//...
import { TopPageComponent } from './top-page/top-page.component'
const routes: Routes = [
{ path: '', redirectTo: '/top-page', pathMatch: 'full' },
{ path: 'top-page', component: TopPageComponent }
];
//...画面を表示して、以下のようにBootstrapな画面が表示されていれば完成です。
まとめ
今回は、Ubuntuを使って、Angularのインストールから、Bootstrap適用までの手順を説明しました。
次回は、大体のサイトで必要になるログイン機能を実装してみたいと思います。
Firebaseを使ってGoogleアカウントの認証を使う予定です。
コメント