3分でわかるangular js

729
-1

Published on

社内LTで自分の番だったので、チュートリアルしかやってないのにAngularJSの解説を書いた。

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
729
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

3分でわかるangular js

  1. 1. 3分でわかる
 Angular JS
  2. 2. Angular JSって?? Googleが主体になって開 発しているMVW(ModelView-なんとか) Framework 2009年リリース v1.2.13 @ 2014-02-14
  3. 3. 今北産業 コードの分割がし易い Model <-> Viewの連携がし易い テストがし易い
  4. 4. AngularJSの特徴 変なHTML Two-way Data Binding Dependency Injection
  5. 5. 変なHTMLマークアップ jQuery的なCSS Selector地獄から開放 する 外部Templateが使える(HTMLを分割で きる)
  6. 6. Two-Way Data Binding Modelを変えたら、Viewが変わる Viewを変えたら、Modelが変わる
  7. 7. ng-app" この中身がAngularJSによって管 理される。 <html ng-app="helloApp"> <head> <meta charset="utf-8"> </head> ! ! ng-controller このViewがMyControllerと紐付 けられる。 ng-click クリックされたらchangeFoo()が 呼ばれる。 <body ng-controller="MyController"> <input ng-model="foo" value="bar"> <button ng-click="changeFoo()">{{buttonText}}</button> <div>{{ foo }}</div> <script src="bower_components/angular/angular.js"></script> <script> var helloApp = angular.module('helloApp', []); {{ }} buttonText変数に入ったデータが helloApp.controller('MyController', ['$scope', function($scope) { 表示される。 $scope.buttonText = 'buttonだよ'; ! $scope.foo = 'bar'; $scope.changeFoo = function() { $scope.buttonText = ‘押されちまった悲しみに’; $scope.foo = ‘押された-!’; }; }]); </script> </body> </html>
  8. 8. Dependency Injection (コンポーネント間の)依存関係を外から注 入する コンポーネント内で使われる依存性 は全て外部から変更可能 例えばPythonなどの”import”はソースコー ド間の依存性を表している。
  9. 9. someModule.controller('MyController',  ['$scope',  'dep1',  'dep2',  function($scope,  dep1,  dep2)  {  ...  $scope.aMethod  =  function()  {      ...  }  ... }]); MyControllerは、$scope, dep1, dep2に依存するよ! MyController作成時にangularjsが名 前から引っ張ってくる つまり AngularJSはDIの徹底のためにJSのグローバル変数も全て、再定義している → http://docs.angularjs.org/api/ng/service 何が良いか * プロジェクトが分割しやすい * Mockをつかってテストが書きやすい

×