自己紹介• 岸悟志 ( キシ サトシ )• 略歴• 2010 年 4 月:家電メーカーに就職
• エネルギーソリューション関連機器の UI 開発 / 企画に従事
• 在職中にデジタルハリウッド大学院修了
• 2015 年 4 月:ウイングアーク1st株式会社に転職
• エンジニアとしてクラウドサービスの 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>
<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. あとはとにかくググる• 英語だと情報が多いです。