Download to read offline
![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>](https://image.slidesharecdn.com/angularjs-150824145402-lva1-app6891/85/Angular-JS-13-320.jpg)
Angular JSを始めよう！
- 1.
- 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の勉強方法 • 私が行った勉強方法について
- 6.
- 7. Angular JSでHelloWorld!! <html ng-app> <head> <scriptsrc="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> <scriptsrc="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> <scriptsrc="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> <scriptsrc="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>
- 11.
- 12. <html ng-app> <head> <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script> </head> <bodyng-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. あとはとにかくググる • 英語だと情報が多いです。
- 15.
- 16.