Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

AngularJS1.x その0001 バインディングしてみる

参考にさせて頂いたページ

公式ドキュメント(英語)

AngularJS — Superheroic JavaScript MVW Framework

とりあえず一通り勉強するのに良さそう

AngularJS TIPS - Build Insider

js STUDIO のAngular1.2日本語ドキュメント

AngularJS 1.2 日本語リファレンス | js STUDIO

AngularJS 1.2 日本語マニュアル (非公式)

AngularJS 日本語マニュアル -AngularJS マニュアル-

AngularJSの便利なツール20選

AngularJSの便利なツール20選 | プロダクト・サービス | POSTD

AngularJSモダンプラクティス

JavaScript - AngularJSモダンプラクティス - Qiita

angular.min.jsを読み込む

Contents Delivery Networkで読み込むと簡単。

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

html要素にng-app属性を付ける

例として以下の通り

<html ng-app>

ng-model属性と任意の場所に出力

ng-model="yourName"なので、{{yourName}}のところに出力される。

<input type="text" ng-model="yourName">
<h1>{{yourName}}</h1>

ブラウザで動かしてみる

input要素にテキストを入力してみると、入力した内容がそのまま{{yourName}}に反映される。