JavaScript chobi

AngularJSを学ぶ

はじめに

AngularJSを業務で使うことになったのでざっくりですが学びました。

参考：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>

 

コメントを残す

RECOMMENDこちらの記事も人気です。