AngularJS

AngularJS はGoogleからJavaScriptのフレームワークです。Model-View-Controllerというdesign patternのアプリケーション用に使います。色んな機能を持ってますが、主にカスタムHTMLオブジェクトを作ることが出来るようにします。

基本

AngularJSのHTMLオブジェクトは皆ng-directiveというものです。基本的なng-directivesはng-app, ng-model,ng-bindとng-controllerです。これらだけを使えば、面白いアプリケーションを作ることが出来ます。

ng-app

Rootの要素(ようそ)です。一般的に、他のng-directivesはこのオブジェクトの中にあります。Auto-bootstrapの機能が持ってます。

ng-modelとng-bind

ng-modelとng-bindは皆HTMLオブジェクトとAngularを結合(けつごう)します、が方向は違います。
ng-modelはHTML→Angularで、
ng-bindはHTML←Angularです。
つまり、ng-modelのinputのバリューが変わると、スコープのバリューも変わるし、スコープのvarNameという変数が変わると、ng-bindでvaNnameにbindされたHTML要素が更新されます。

例

example1.html

<div ng-app="">
    <input type="text" ng-model="varName"/>
    → ng-model → scope → ng-bind →
    <text ng-bind="varName"/>
</div>

結果

ng-controller

Model-View-ControllerのControllerです。Javascriptのコードは特にそこで書きます。

例

example2.html

<div ng-app="" ng-controller="exampleController">
    <button type="text" ng-click="onButtonClicked()">ng-click button</button>
    <br/>
    Button clicked {{clickedTimes}} time(s).
</div>

example2.js

function exampleController($scope) {
    $scope.clickedTimes = 0;
    
    $scope.onButtonClicked = function() {
        $scope.clickedTimes++;
    }
}

結果
{{clickedTimes}}はexpressionです。ng-bindの省略(しょうりゃく)です。

カスタムng-directive

自分のng-directiveを作ることも出来ます。

例

example3.html

<div ng-app="SprocketApp">
    <sprocket-directive>
        Directive contents
    </sprocket-directive>
</div>

example3.js

angular.module("SprocketApp", [])
    .directive("sprocketDirective", function() {
        return {
            restrict: 'E',
            replace: false,
            link: function($scope, element, attrs) {
                element.append("<div>Text added by the directive</div>")
            }
        };
    });

結果