LoginSignup
0

More than 5 years have passed since last update.

Angular2 雛形 ver.0.0.2

Last updated at Posted at 2017-03-08

Angular2 ひな型 ver.0.0.2

概要

Angular2 ひな型 ver.0.0.1 を元に以下の変更を加える。
- Bootstrap パッケージの導入
- Angular2 ルーティング機能の追加
- Home 画面の追加

手順1

Bootstrap パッケージの導入

npm install --save bootstrap

上記のコマンドを実行する

手順2

index.html の修正

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Angular2 Template</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <base href="/">

    <!-- Bootstrap -->
    <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app><p>Loading ...</p></my-app>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  </body>
</html>

Bootstrap サイトのベースを参考に index.html を修正する。
※ node_modukes 配下を指定するように修正

手順3

Angular2 ルーティングの導入

app.module.ts の修正

  • AppRoutingModule の読込(この後で作成)
  • PageNotFoundComponent の読込(この後で作成)
app.module.ts
import { NgModule }               from '@angular/core';
import { BrowserModule }          from '@angular/platform-browser';
import { Router }                 from '@angular/router';

import { AppComponent }           from './app.component';
import { AppRoutingModule }       from './app-routing.module';
import { PageNotFoundComponent }  from './not-found.component';

@NgModule({
  imports:      [ BrowserModule, AppRoutingModule ],
  declarations: [ AppComponent, PageNotFoundComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule {
  constructor(router: Router) {
    console.log('Routes: ', JSON.stringify(router.config, undefined, 2));
  }
}

app-routing.module.ts の新規作成

  • ルートルーティングの指定 -- ルートが指定されたら /home へリダイレクト -- それ以外なら PageNotFoundComponent を表示
app-routing.module.ts
import { NgModule }                 from '@angular/core';
import { RouterModule, Routes }     from '@angular/router';

import { PageNotFoundComponent }    from './not-found.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

app.component.ts の修正

  • VIEWを外だしに修正
app.compoment.ts
import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent  { }

app.component.html 作成

  • Bootstrap の Navbar を使って作成
app.component.html
<nav class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" routerLink="/home" routerLinkActive="active">Angular2</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            <span class="glyphicon glyphicon-user" aria-hidden="true"></span> 〇〇 〇〇 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="#" routerLink="/user/info">
                <span class="glyphicon glyphicon-user" aria-hidden="true"></span> プロフィール
              </a>
            </li>
            <li>
              <a href="#" routerLink="/user/password">
                <span class="glyphicon glyphicon-lock" aria-hidden="true"></span> パスワード変更
              </a>
            </li>
            <li role="separator" class="divider"></li>
            <li>
              <a href="#" (click)="authService.logout()">
                <span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> ログアウト
              </a>
            </li>
          </ul>
        </li>
      </ul>      
    </div><!-- /.nav-collapse -->
  </div><!-- /.container -->
</nav><!-- /.navbar -->

<div class="container">
  <router-outlet></router-outlet>
  <footer class="navbar-fixed-bottom">
    <div class="container">
      <p>&copy; 2017 Japan Computer Service, Inc.</p>
    </div>
  </footer>
</div><!--/.container-->

styles.css の修正

  • navbar 上部固定を使用する場合この定義が必要
styles.css
body { 
  padding-top: 70px;
}

not-found.component.ts の作成

not-found.component.ts
import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  templateUrl: './not-found.component.html',
  styleUrls: [ '' ]
})
export class PageNotFoundComponent {}

not-found.component.html の作成

not-found.component.html
<div class="jumbotron">
  <h2>Page not found</h2>
</div>

手順4

Home 画面追加

app/home フォルダの作成

  • app 配下に home フォルダを作成する

app/home/home.module.ts の作成

home.module.ts
import { NgModule }           from '@angular/core';
import { HomeComponent }      from './home.component';
import { HomeRoutingModule }  from './home-routing.module';

@NgModule({
  imports: [
    HomeRoutingModule
  ],
  declarations: [
    HomeComponent,
  ]
})
export class HomeModule {}

home-routing.module.ts の作成

  • home 画面用のルーティングの定義を行う
home-routing.module.ts
import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent }        from './home.component';

const routes: Routes = [
  { 
    path: 'home',
    component: HomeComponent,
  },
];

@NgModule({
  imports: [ RouterModule.forChild(routes) ],
  exports: [ RouterModule ]
})
export class HomeRoutingModule { }

home.component.ts の作成

home.component.ts
import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  templateUrl: 'home.component.html'
})
export class HomeComponent  { }

home.component.html の作成

home.component.html
<div class="jumbotron">
  <h2>Home</h2>
</div>

app.module.ts の修正

  • app.module.ts に home.module.ts の読込を追加する。
app.module.ts
import { NgModule }               from '@angular/core';
import { BrowserModule }          from '@angular/platform-browser';
import { Router }                 from '@angular/router';

import { AppComponent }           from './app.component';
import { AppRoutingModule }       from './app-routing.module';
import { PageNotFoundComponent }  from './not-found.component';
import { HomeModule }             from './home/home.module';

@NgModule({
  imports:      [ BrowserModule, HomeModule, AppRoutingModule ],
  declarations: [ AppComponent, PageNotFoundComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule {
  constructor(router: Router) {
    console.log('Routes: ', JSON.stringify(router.config, undefined, 2));
  }
}

※imports に HomeModule を追加する。ポイントとして AppRoutingModule よりも先に追加する。

最後に

Home画面、PageNotFound 画面共にページが表示されればOK。

参考

ver.0.0.2 ソース
Angular2 ひな型 ver.0.0.1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0