初学者向けセミナー資料

AngularJS のきほんのきほん

PASONA TECH AnguarJS セミナー 2014/06/18

{{ About me }}

AngularJS Japan User Group 管理人 html5j Web先端技術味見部部長

金井　健一フリーランスフロントエンド方面のお仕事

can_i_do_web ( きゃない ) facebook/can.i.do.web

{{ Agenda }} • Basic • Validation • with jQuery • Learn more ... • Conclusion ( links )

https://angularjs.org/

{{ Why it’s called AngularJS ? }}

Because HTML has Angular brackets

{{ Why it’s called AngularJS ? }}

<html>

{{ MVW? }}

Model View Whatever

{{ MVW? }}

MVC とか MVVM とかどうでもいいから

とにかくコード書こうぜ！

http://www.google.co.jp/trends

{{ Basic }}

• Unobtrusive data binding • HTML as the template. • Reusable components -- in HTML! • Views and Routes. • Tests and Testability.

{{ Basic }}

• 控えめなデータバインディング • テンプレートとしてのHTML • 再利用可能なコンポーネント • Views とルーティング • テストとその可用性

{{ Basic }}

• Two Way Binding ( ng-model ) • ng-bind = {{ }} • ng-init • ng-show/hide • ng-repeat • filter

{{ Basic }} Filter

• date • limitTo • orderBy この３つが特に便利でオススメ！

{{ Validation }} • Form名.input名.$valid • Form名.input名.$invalid • Form名.input名.$error

• この中に個別のvalidationのチェック状況 ex）　 xxx.yyy.$error = { minlength: true }

• Form名.$valid • Form名.$invalid

{{ Validation }}

全く意味がわかりませんよね？（またDemoします）

{{ Validation }}

便利ですので積極的に使っていきましょう

Demo 2

{{ with jQuery }}

jQuery を利用したライブラリやプラグインとは相性が悪そう…

{{ with jQuery }}

極力つかわない方がトラブルに巻き込まれにくい！

{{ Learn more ... }}

http://dotinstall.com/lessons/basic_angularjs


https://egghead.io/


http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro

{{ Conclusion }}

参考サイト紹介

{{ Conclusion }}

AngularJS Batarang Chrome ウェブストアからダウンロード

{{ Conclusion }}

AngularJS Ninja http://angularjsninja.com/

{{ Conclusion }}

js STUDIO http://js.studio-kingdom.com/angularjs

{{ Conclusion }}

Qiita http://qiita.com/tags/angularjs

{{ Conclusion }}

Onsen UI http://onsenui.io/

{{ Conclusion }}

ionic http://ionicframework.com/

{{ Conclusion }}

AngularJS Japan User Group #ng_jp https://groups.google.com/forum/#!forum/angularjs-jp

Thank you.

補足

{{ ハンズオンで使用したコード }} <!DOCTYPE html> <html lang="ja" ng-app> <head> <meta charset="UTF-8"> <script src="./angular.min.js"></script> </head> <body> {{ 1 + 2 }} </body> </html>

AngularJS の利用宣言

AngularJS の読み込み

ちゃんと読み込めているか確認

{{ ハンズオンで使用したコード }} <body> <form name="demoForm" novalidate> <input type="text" ng-model="demoId” name="demoId"> <input type="text" ng-model="demoPassword” name="demoPassword” > <input type="submit" value="login"> <p>{{ demoId }}</p> </form> </body>

ブラウザのvalidationを OFF

ng-modelの定義

データバインディングを確認

{{ ハンズオンで使用したコード }} <style> input.ng-invalid.ng-dirty{ border-color: red; } </style> <form name="demoForm" novalidate> <input type="text" ng-model="id" name="demoId" required ng-minlength=“4” ng-maxlength=“8”> <input type="text" ng-model="Password" name="demoPassword” ng-parttern="/^[0-9]{5,10}$/"> <input type="submit" value="login"> </form>

バリデーションの定義

{{ ハンズオンで使用したコード }} <form name="demoForm" novalidate> <input type="text" ng-model="demoId"

name="demoId" required ng-minlength="4" ng-maxlength="8"> <input type="text" ng-model="demoPassword"

name="demoPassword" ng-pattern="/^[0-9]{5,10}$/"> <input type="submit" value="login"> <p ng-show="demoForm.demoId.$error.required && demoForm.demoId.$dirty">demoId の required がエラー時</p> <p ng-show="demoForm.demoId.$error.minlength">demoId の min-length(4文字)のエラー時</p> <p ng-show="demoForm.demoId.$error.maxlength">demoId の max-length(8文字)のエラー時</p> </form>

エラーメッセージの出し分け

{{ ハンズオンで使用したコード }} <form name="demoForm" novalidate> <input type="text" ng-model="demoId" name="demoId" required ng-minlength="4" ng-maxlength="8"> <input type="text" ng-model="demoPassword" name="demoPassword" ng-pattern="/^[0-9]{5,10}$/"> <input type="submit" value="login"> <p ng-show="demoForm.$invalid">form のどこかに１つでもエラーがある時</p> </form> エラーメッセージの出し分け

{{ ハンズオンで使用したコード }} <form name="demoForm" novalidate> <input type="text" ng-model="demoId" name="demoId" required ng-minlength="4" ng-maxlength="8"> <input type="text" ng-model="demoPassword" name="demoPassword" ng-pattern="/^[0-9]{5,10}$/"> <input type="submit" value="login" ng-disabled="demoForm.$invalid"> </form>

全てのバリデーションチェックが OKになるまで押せない

{{ ハンズオンで使用したコード }} <body> <div ng-init="demoData=[ 'abcde123', 'defg234', 'hijk456', 'jklm246' ]"></div> <ul> <li ng-repeat="data in demoData">{{ data }}</li> </ul> </body>

初期値の定義

繰り返し処理

{{ ハンズオンで使用したコード }} <body> <div ng-init="demoData=[ 'abcde123', 'defg234', 'hijk456', 'jklm246' ]"></div> <input type="text" ng-model="search"> <ul> <li ng-repeat="data in demoData | filter:search">{{ data }}</li> </ul> </body>

検索ワード

絞り込み機能

{{ ハンズオンで使用したコード }} <body> <div ng-init="demoData=[ 'abcde123', 'defg234', 'hijk456', 'jklm246' ]"></div> <input type="text" ng-model="search"> <ul> <li ng-repeat="data in demoData | limitTo:2 | filter:search">{{ data }}</li> </ul> </body>

２件のみ表示

{{ ハンズオンで使用したコード }} <body> <div ng-init="demoData=[ { name: 'abcde123', age : 30}, { name: 'defg234', age : 31}, { name: 'hijk456', age : 31}, { name: 'jklm246', age : 32} ]"></div> <input type="text" ng-model="search"> <ul> <li ng-repeat="data in demoData | filter:search">{{ data.name }} - {{ data.age }}</li> </ul> </body>

{{ ハンズオンで使用したコード }} <body> <div ng-init="demoData=[ { name: 'abcde123', age : 30}, { name: 'defg234', age : 31}, { name: 'hijk456', age : 31}, { name: 'jklm246', age : 32} ]"></div> <input type="text" ng-model="search.name"> <ul> <li ng-repeat="data in demoData | filter:search">{{ data.name }} - {{ data.age }}</li> </ul> </body>

Nameのみ検索可能

初学者向けセミナー資料

Internet

Transcript of 初学者向けセミナー資料