はじめに
AngularJSを業務で使うことになったのでざっくりですが学びました。
事前知識
✅AngularJSとは
Google中心に開発されているフルスタックのフレームワーク。
※ReactはFacebookせいでMVCのView相当の機能を提供。
✅MVCについて
Model(ビジネスロジック)-View(ユーザーインターフェース)-Controller(Model/Viewの制御)
✅双方向データバインディング
そもそも、データバインディングとはJavaScriptのオブジェクト(モデル)をHTMLのテンプレート(ビュー)に紐づけるための仕組み(=従来の形がこれであり、片方向データバインディング)。
AngularJSでは双方向データバインディングで、ビュー/モデル双方の同期をFWが保証してくれる。
✅ディレクティブ
FWは提供する独自の要素/属性を追加することでページに機能を付与する。そのカスタム要素/属性のこと。
✅サービス
アプリ開発に役立つ機能をサービスとして提供。利用には依存性注入の仕組みを利用する(サービスをインスタンス化→注入)。
例)$httpサービス,$scope
注入方法
appController.$inject = ["$scope","$http"]
function appController($scope,$http){
$scope.books = BookList();
}
使い方
✅ビューの連携※AngularJSの有効化
htmlを編集
<html ng-app>
head内でライブラリの読み込み
//CDN版 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script> //インストール版 <script src="lib/angular.min.js"></script> // ディレクトリ下に保存要
jsを編集
モジュールの定義※(オブジェクト/関数を束ね名前の衝突を防ぐ)
module(name, [,requires [,config]])
コントローラの定義
controller(name, constructor)
※モジュールもコントローラも戻り値は自分自身。
スコープオブジェクト($scope)を定義。※HTMLとJSによるモデルの橋渡しをするオブジェクト。
$scope.name = value
作成したモジュール/コントローラはそれぞれng-app/ng-controller属性を使って、テンプレートに明示的に紐づけ
🙄モジュールがng-app属性と紐づくんですね～～！！
HelloWorldのソースコード
html
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8" /> <title>AngularJS HelloWorld</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script> <script src="scripts/myedit/helloworld.js"></script> </head> <body ng-controller="MyController"> <h1>{{title}}</h1> <p>{{msg}}</p> </body> </html>
js
angular.module("myApp", [])
.controller("MyController", function($scope) {
$scope.title = "AngularJS";
$scope.msg = "Hello World";
});
各種ディレクティブ
ng-model属性：フォーム要素をモデルに紐づける
※Vue.jsのv-modelにそっくりですね！！
HTML
<html ng-app="myApp">
<body ng-controller="MyController">
<input id="name" name="name" type="text" ng-model="myName" />
<div>Hello,Mr.{{myName}}!!</div>
</body>
</html>
JS
angular.module('myApp', [])
.controller('MyController', ['$scope', function($scope) {
$scope.myName = 'Sato'; // デフォルト値の設定も可能。
}]);
Dateクラス
フィルターと掛け合わせることで簡単に整形することができる。
<td>{{book.published | date: 'yyyy年MM月dd日 H時m分'}}</td>
コメントを残す