Recommended
More Related Content
Similar to Angular JSを始めよう！
Similar to Angular JSを始めよう！ (20)
Angular JSを始めよう！
- 2. 自己紹介 • 岸悟志(キシ サトシ) • 略歴 • 2010年4月：家電メーカーに就職 • エネルギーソリューション関連機器のUI開発/企画に従事 • 在職中にデジタルハリウッド大学院修了 • 2015年4月：ウイングアーク１ｓｔ株式会社に転職 • エンジニアとしてクラウドサービスのUI開発に従事 • ジーズアカデミーにチューターとして関わる • 興味のある分野 • Webプログラミング(JavaScript、HTML、CSS) • UI/UX（人間中心設計、UIデザイン、ユーザビリティ） • IoT（機械学習、デジタル信号処理、情報の可視化） • SNS • Facebook：satoshi.kishi • Twitter：@kefi3104
- 3. 本日のお話
- 4. はじめに • Angular JSとは？ • Google社が開発しているJavaScriptのフレームワーク • 他にBackbone.js, Ember.js, Knockout.js, Spine.js, etc... • Angular JSの特徴 • フルスタック • Webアプリケーション開発に必要な機能が大体揃っている • HTML拡張 • HTMLのような記述を採用
- 5. お話の内容 • すぐに始められるAngular JSの機能を紹介 1. データバインディング 2. フィルター 3. バリデーション 4. テンプレート • Angular JSの勉強方法 • 私が行った勉強方法について
- 7. Angular JSでHelloWorld!! <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>
- 8. 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>
- 9. 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>
- 10. 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>
- 12. <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を始めるんですか？今でしょ！！"; } }
- 13. 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>
- 14. Angular JSの勉強方法 1. ドットインストール（http://dotinstall.com/） • とにかく概略を頭に入れる。 2. jsdo.it（http://jsdo.it/） • 他人のソースを直してみる。アレンジする。 3. Angular JS日本語リファレンス（http://js.studio-kingdom.com/angularjs） • 他人のソースで書いてあることを理解する。 4. あとはとにかくググる • 英語だと情報が多いです。
- 16. ご清聴ありがとうございました