読者です 読者をやめる 読者になる 読者になる

Develop and Design Note

フロントエンドなデザイナーの覚書

AngularJSを使ってタイムキーパーを作ってみよう #1-1【AngularJSの導入】

AngularJS

AngularJSを使って、簡単なタイムキーパーWebアプリを作ってみたいと思います。
まずは、AngularJSを使える環境を作りましょう!

AngularJSの導入

  1. まず、公式サイトから「angular.min.js」をダウンロードして、scriptタグで読み込みます(ここではファイル名をangular-1.3.0.min.jsに変更しています)。
  2. 次に、1つのアプリとして機能させたい範囲のタグ(ここではdivタグ)の属性としてng−appを記述し、AngularJSを使ったWebアプリケーションであることを宣言します。

これだけでAngularJSが使える状態になります。かんたん!

コントローラー用のscriptファイル

ビューをコントロールするJSは外部スクリプトで書くことにします。ここまでで、以下のようなindex.htmlとディレクトリ構成が完成しました。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <script src="js_angular/angular-1.3.0.min.js"></script>
  <script src="js/script.js"></script>
</head>
<body>
  <div ng-app>
    Hallo,World.
  </div>
</body>
</html>

ディレクトリ構成

index.html
js_angular/
  angular-1.3.0.min.js
  angular.min.js.map ※
js/
  script.js

※「angular.min.js.map」は「angular.min.js」で呼び出されるデバッグ用のファイルらしく、これを同じ階層のフォルダに入れないと、Chromeなどのコンソールで404エラーになります。こちらからダウンロードできるので、「angular.min.js」と同じフォルダに入れましょう。

ここから、AngularJSのコードを書いていきます。→AngularJSを使ってタイムキーパーを作ってみよう #1-2【フォーム送信処理の実装】 - Web Design Note

が、ちょっと脱線して(というか行く行く実装予定なので)、Bootstrapが使える環境を構築する場合の手順も、一応備忘録として残しておきました。→AngularJSを使ってタイムキーパーを作ってみよう #番外編【UI Bootstrapの導入】 - Web Design Note