bmkmanoj
3/20/2019 - 12:09 PM

My simple AngularJS Cheatsheet

My simple AngularJS Cheatsheet

README.md
content_copyfile_download
  • Rendered
  • Source

Using AngularJS

Website: https://angularjs.org/

Docs: https://docs.angularjs.org/guide

Init with Module

See main-module.js

<html ng-app="app">

Manual bootstrap with Module

See bootstrap.js and main-module.js

<div id="loading">Loading...</div>

Controller

See controller.js and after that controller-module.js

<div ng-controller="ctrl">
  <h1>{{ headline }}</h1>
</div>

Controller with Scope

See controller-module.js

<div ng-controller="Controller">
  <p ng-bind="sayHello"></p>
</div>

Controller with Scope and method binding

See controller-module.js

<div ng-controller="Controller">
  <p ng-bind="getHelloExpression()"></p>
  <button ng-click="click()">Make Click</button>
</div>

Root Scope

See main-module.js

  <p>{{ version }}</p>

Filter

See default filters

  <p>{{ prodct.price | currency }}</p>
  <p>{{ prodct.pubdate | date }}</p>

Controller Hierarchy

See controller-module.js

<div ng-controller="Controller">
  <p ng-bind="getHelloExpression()"></p>
  <button ng-click="click()" ng-controller="ButtonController">{{ label }}</button>
</div>

List / Repeat

See controller.js

<ul class="unstyled">
  <li ng-repeat="item in items">{{ item.name }}</li>
</ul>

Inline styles

See controller.js

Using style="font-size:{{ item.val }}px" will only work for IE <= 11; ng-style is supported down to IE8.

<ul class="unstyled">
 <li ng-repeat="item in items" ng-style="{'fontSize':(item.val+'px')}">{{ item.name }}</li>
</ul>

Bidirectional binding

See controller.js

<form class="form-horizontal">
  <input type="text" ng-model="input"/>
</form>
<p>Your input: {{ input }}</p>

Click event

See controller.js

<button class="btn" ng-click="add()">Add</button>

Method binding

See controller.js

<p>Available items: {{ getItemsLenght() }}</p>
bootstrap.js
content_copyfile_download
var intID;
intID = setInterval( function() {
    if ( /loaded|complete/i.test(document.readyState) ) {
        angular.bootstrap( document, ['app'] );
        clearInterval( intID );
    }
}, 10 );
controller-module.js
content_copyfile_download
function Controller( $scope, $log, Model ) {
    $log.log( 'Controller instance for view.' );
    $scope.sayHello = 'Hello world!';
    $scope.label = 'Default label';

    /*
    // Default within $scope
    $scope.click = function () {
        Model.setVariable( Model.getVariable() + 1 );
    };
    */

    // Prepare to leave $scope
    this.model = Model;
    var that = this;
    $scope.click = function () {
        that.onClick();
    };

    $scope.getHelloExpression = function () {
      return $scope.sayHello + ' #' + Model.getVariable();
    };

    this.scope = $scope;

}

var ctrl = Controller.prototype;

ctrl.onClick = function () {
    // Call setUp() from root scope
    this.scope.$root.setUp();
};

function ButtonController( $scope, $log, Model ) {
    // Overwrite parent label
    $scope.label = 'Custom label';

    // Overwrite parent click()
    this.scope = $scope;
    var that = this;
    $scope.click = function() {
        that.onClick();
    }

}

var btnctrl = ButtonController.prototype;

btnctrl.onClick = function () {
    console.log('Clicked.');
    // Call parent click()
    this.scope.$parent.click();
};

var controller = angular.module('app.controller', ['app.model'])
    .controller( 'Controller', Controller )
    .controller( 'ButtonController', ButtonController )
    ;
controller.js
content_copyfile_download
function ctrl( $scope ) {

    $scope.headline = 'Headline';

    $scope.items = [
        { name: 'Item 1', val: 10 },
        { name: 'Item 2', val: 12 },
        { name: 'Item 3', val: 14 },
        { name: 'Item 4', val: 16 }
    ];
    
    $scope.product = {
  	    price: 19,
        pubdate: new Date('2015', '08', '01')
    }

    $scope.getItemsLenght = function () {
        return $scope.items.length;
    };

    $scope.input = 'Username';

    $scope.add = function () {
        $scope.items.push( { name:$scope.input, val:10 } );
    };

}
main-module.js
content_copyfile_download
var app = angular.module('app', ['app.model', 'app.controller'])
        .run(function ( $rootScope, $log, Model ) {

            $log.log('App started.');
            // Model.setVariable('Variable updated.');

            $rootScope.version = Model.getVersion();
            $rootScope.setUp = function () {
                Model.setVariable( Model.getVariable() + 1 );
            };

            document.getElementById('loading').innerHTML = Model.getMyData();
            document.getElementById('headline').innerHTML = Model.getVariable() + ' ' + Model.getConstant();
        })
    ;
model-module.js
content_copyfile_download
var Model = function( $log, myVariable, myConstant, version ) {
    $log.log('New singleton instance of model.');
    return {
        getMyData : function() {
            return 'Ready.';
        },
        getVariable : function() {
            return myVariable;
        },
        setVariable : function( val ) {
            myVariable = val;
        },
        getConstant : function() {
            return myConstant;
        },
        getVersion : function() {
            return version;
        }
    }
};

var model = angular.module('app.model', [])
        .value('myVariable', 1)
        .constant('myConstant', 'My constant.')
        .constant('version', '1.0.0')

        .factory('Model', Model) // also via .service()
    ;