Angularjsを使ってみる初歩

2016.3.22 (火)

https://angularjs.org/
上記公式サイトからダウンロードする。2017年現在1.5.xぐらいが安定版になるかと思われます。2.x.xを試したい人は是非是非というところ。
HTMLのmetaタグのところで普通のJSを同様に読み込む。

<script src="/assets/js/angular.min.js"></script>

これで一応準備は整っているのだけど、勿論実際はいろんなライブラリーを使わないとかなりつらい。
GoogleのCDNから直接ひっぱり込むこともできます。バージョンとかは適当に書き直して接続します。

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

とりあえず動かしてみる

HTMLタグの先頭でAngularjsを使うことを宣言しておきます。ルールというかおまじないみたいなものです。これないとAnularが動きません。

<html lang="ja" ng-app>

次にinputでフィールドを1つ作って、入力した文字をリアルタイムで表示します。

<input type="text" ng-model="name">
<p>{{name}}</p>

demo これだけでOKです。jQueryだとkeyなんとかいうイベントを拾っていろいろやらないといけないので面倒だけどAngularだとこれだけで終わりです。結構いいです。

初心者の資料

Document

https://docs.angularjs.org/guide
英語ですが、結構きっちりとしたドキュメントになっています。公式なのでここは一読しないとダメです。

日本語ドキュメント

http://js.studio-kingdom.com/angularjs
ここは英語が苦手な人も使えるところです。きちんと目次になっているので、ここから学んでもよいかと思います。
また昨今の動向やニュースなどもチェックしておくとよいかと思います。http://angularjsninja.com/
いわゆるライブラリーやプラグイン的なものは
http://ngmodules.org/
http://gruntjs.com/
結構探すとたくさんあります。

開発環境

とはいっても好きなテキストエディタで好きに書けばよいという話ではありますが、SublimeTextがやはりおすすめです。(ですが慣れてくると、普通のviとかで書くと「うわー面倒くさー」ってことになのでご注意。
http://tech-blog.tsukaby.com/archives/493
AngularJS Sublime Text Packageなるものがあります。

  1. Sublime Textを開いてPreferences > Package Control
  2. ここで開いたウィンドウにinstallと入力すると、installできるパッケージを検索してくれます。
  3. 検索フィールドに「AngularJS」と入力すると、「AngularJS」というのが出てくるので選択してEnter

これでインストールが終わります。
以下のようなメッセージがSublimeText上に出てきたら成功。

Package Control Messages
========================

AngularJS
---------

  AngularJS 1.0.0
  --------------------

  This version of AngularJS is now a merge of the following two packages:
  AngularJS - http://deansofer.com/projects/view/74/AngularJs_tmbundle
  AngularJS Attributes Completion - http://subhaze.github.io/angularjs-attributes

  This new package provides similar functionality of the two but with added features and options.

  Some of the added features are:
  - Quick Panel search of directives/controllers/filters/etc...
  - GoTo definition for directives
  - GoToDocs for core AngularJS directives
  - Directive completions for your custom defined directives

  To find out more checkout the readme at https://github.com/angular-ui/AngularJS-sublime-package

  Report issues at https://github.com/angular-ui/AngularJS-sublime-package/issues

詳しい使い方はまた明日。