angular jsを始めよう！
TRANSCRIPT
Angular JS を始めよう！ウイングアーク１ｓｔ株式会社
岸 悟志
自己紹介• 岸悟志 ( キシ サトシ )• 略歴• 2010 年 4 月：家電メーカーに就職
• エネルギーソリューション関連機器の UI 開発 / 企画に従事
• 在職中にデジタルハリウッド大学院修了
• 2015 年 4 月：ウイングアーク１ｓｔ株式会社に転職
• エンジニアとしてクラウドサービスの UI 開発に従事
• ジーズアカデミーにチューターとして関わる
• 興味のある分野• Web プログラミング (JavaScript 、 HTML 、 CSS)• UI/UX （人間中心設計、 UI デザイン、ユーザビリティ）
• IoT （機械学習、デジタル信号処理、情報の可視化）
• SNS• Facebook ： satoshi.kishi• Twitter ： @kefi3104
本日のお話
はじめに• Angular JS とは？• Google 社が開発している JavaScript のフレームワーク• 他に Backbone.js, Ember.js, Knockout.js, Spine.js, etc...
• Angular JS の特徴• フルスタック
• Web アプリケーション開発に必要な機能が大体揃っている
• HTML 拡張
• HTML のような記述を採用
お話の内容•すぐに始められる Angular JS の機能を紹介
1. データバインディング
2. フィルター
3. バリデーション
4. テンプレート
• Angular JS の勉強方法• 私が行った勉強方法について
では、さっそく始めてみましょう！
Angular JS で Hello World!!<html ng-app> <head> <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script></head> <body> <p>{{"Hello World!!"}}</p> </body></html>
Angular JS の機能①：データバインディング<html ng-app> <head> <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script> </head> <body> <input type="text" ng-model="mytext"> <p>{{mytext}}</p> </body></html>
Angular JS の機能②：フィルター<html ng-app> <head> <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script> </head> <body> <input type="text" ng-model="mytext"> <p>{{mytext | currency }}</p> </body></html>
Angular JS の機能③：バリデーション<html ng-app> <head> <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script> </head> <body> <form name="myForm"> <input type="text" required> <input type="submit" ng-disabled="!myForm.$valid"> </form> </body></html>
ところで・・・まだ JS 全く書いてない！？
<html ng-app> <head> <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script> </head> <body ng-controller="myCtrl"> <input type="text" ng-model="mytext"> <input type="button" ng-click="message()" value=" ボタン "> <p>{{mytext}}</p> </body></html>
コントローラについて
function myCtrl($scope) { $scope.message = function() { $scope.mytext = " いつ Angular を始めるんですか？今でしょ！！ "; } }
Angular JS の機能④：テンプレートfunction myCtrl($scope) { $scope.textList = [“ いつ” , “Angular を” , “ 始めるんですか？” , “ 今でしょ！！ "];}
<html ng-app> <head> <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script> </head> <body ng-controller="myCtrl"> <ul ng-repeat="mytext in textList"> <li>{{mytext}}</li> </ul> </body></html>
Angular JS の勉強方法1. ドットインストール（ http://dotinstall.com/）• とにかく概略を頭に入れる。
2. jsdo.it （ http://jsdo.it/）• 他人のソースを直してみる。アレンジする。
3. Angular JS 日本語リファレンス（ http://js.studio-kingdom.com/angularjs）
• 他人のソースで書いてあることを理解する。
4. あとはとにかくググる• 英語だと情報が多いです。
終わりに
みんなで Angular JS を楽しみましょう！！
ご清聴ありがとうございました