Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

3分でわかるangular js

1,082 views

Published on

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

Published in: Technology
  • Be the first to comment

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をつかってテストが書きやすい

×