bmkmanoj/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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
var intID;
intID = setInterval( function() {
    if ( /loaded|complete/i.test(document.readyState) ) {
        angular.bootstrap( document, ['app'] );
        clearInterval( intID );
    }
}, 10 );

## controller-module.js
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
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
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
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()
    ;
	var intID;
	intID = setInterval( function() {
	if ( /loaded\|complete/i.test(document.readyState) ) {
	angular.bootstrap( document, ['app'] );
	clearInterval( intID );
	}
	}, 10 );
	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 )
	;
	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 } );
	};

	}
	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();
	})
	;
	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()
	;