mamrehn/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Short introduction to AngularJS 1.x

Get AngularJS at https://angularjs.org/.
See a demo of this code @plunker.
Model

Services hold the business logic for an app.
In order to increase readability and to enable reuse in another front-end framework
the actual business logic is located in custom classes written in pure JavaScript.
Services provide data (a Model) for the Controllers (View-Model).
View-Model

Controllers connect the View (HTML Website) with the business logic
in the Services (Model). Linking data or functions to the $scope object yields
visibility for portions of the Controller's logic in the View.
Model Back-End

JavaScript is an object oriented programming language.
Object are defined by their Protoypes and can be instanciated with
var a = new ClassName(constructor_param0, constructor_param1, ...);.

  
## app.js
var app = angular.module('name_of_the_app', []);

// ------------- Model -------------
/*
Services hold the business logic for an app.
In order to increase readability and to enable reuse in another front-end framework
the actual business logic is located in custom classes written in pure JavaScript.
Services provide data (a Model) for the Controllers (View-Model).
*/
app.service('someService', function() {
  const list_length = 4,
        storage = new MyCustomClassHoldingBusinessLogic(list_length);

  return {
    get_dict: function(){
      return storage.get_stored_dict();
    },
    get_list: function(){
      return storage.get_stored_list();
    }
  };
});

// ------------- View-Model -------------
/*
Controllers connect the View (HTML Website) with the business logic
in the Services (Model). Linking data or functions to the $scope object yields
visibility for portions of the Controller's logic in the View.
*/
app.controller('MainCtrl', ['$scope', function($scope) {
  $scope.name = 'World';
  //var an_unsused_vaiable = 5;
}]);

app.controller('SomeCtrl', ['$scope', 'someService', function($scope, someService) {
  $scope.some_dict_data = someService.get_dict();
  $scope.some_list_data = someService.get_list();
}]);

// ------------- Model Back-End -------------
/*
JavaScript is an object oriented programming language.
Object are defined by their Protoypes and can be instanciated with
var a = new ClassName(constructor_param0, constructor_param1, ...);
*/
var MyCustomClassHoldingBusinessLogic = function (list_length) {
    this.stored_list = this._init_list(list_length);
    this.stored_dict = {'a': 1, 'b': 2, 'c': 3, 'd': 4};
};

MyCustomClassHoldingBusinessLogic.prototype._init_list = function(list_length) {
  res = [];
  for(var i=0; i<list_length; ++i)
    res.push(i);
  return res;
};

MyCustomClassHoldingBusinessLogic.prototype.get_stored_list = function() {
  return this.stored_list;
};

MyCustomClassHoldingBusinessLogic.prototype.get_stored_dict = function() {
  return this.stored_dict;
};

## index.html
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js" data-require="angular.js@1.4.x"></script>
    <script src="app.js"></script>
  </head>

  <body ng-app="name_of_the_app">
    <div ng-controller="MainCtrl">
      <p>Hello {{name}}!</p>
      <div ng-controller="SomeCtrl">
        <p>
          <span class="green_bg" ng-repeat="i in some_list_data">
            <span class="red_text" ng-bind="i"></span>
          </span>
        </p>
        <p>
        <span ng-repeat="(key, val) in some_dict_data">
          <span class="pad_right" ng-bind-template="{{val}} from key {{key}}"></span>
        </span>
        </p>
      </div>
    </div>
  </body>

</html>

## style.css
/* Put your css in here */

.red_text{
  color: red;
}

.green_bg{
  background: lightgreen;
}

.pad_right{
  padding-right: 2em;
}
	var app = angular.module('name_of_the_app', []);

	// ------------- Model -------------
	/*
	Services hold the business logic for an app.
	In order to increase readability and to enable reuse in another front-end framework
	the actual business logic is located in custom classes written in pure JavaScript.
	Services provide data (a Model) for the Controllers (View-Model).
	*/
	app.service('someService', function() {
	const list_length = 4,
	storage = new MyCustomClassHoldingBusinessLogic(list_length);

	return {
	get_dict: function(){
	return storage.get_stored_dict();
	},
	get_list: function(){
	return storage.get_stored_list();
	}
	};
	});

	// ------------- View-Model -------------
	/*
	Controllers connect the View (HTML Website) with the business logic
	in the Services (Model). Linking data or functions to the $scope object yields
	visibility for portions of the Controller's logic in the View.
	*/
	app.controller('MainCtrl', ['$scope', function($scope) {
	$scope.name = 'World';
	//var an_unsused_vaiable = 5;
	}]);

	app.controller('SomeCtrl', ['$scope', 'someService', function($scope, someService) {
	$scope.some_dict_data = someService.get_dict();
	$scope.some_list_data = someService.get_list();
	}]);

	// ------------- Model Back-End -------------
	/*
	JavaScript is an object oriented programming language.
	Object are defined by their Protoypes and can be instanciated with
	var a = new ClassName(constructor_param0, constructor_param1, ...);
	*/
	var MyCustomClassHoldingBusinessLogic = function (list_length) {
	this.stored_list = this._init_list(list_length);
	this.stored_dict = {'a': 1, 'b': 2, 'c': 3, 'd': 4};
	};

	MyCustomClassHoldingBusinessLogic.prototype._init_list = function(list_length) {
	res = [];
	for(var i=0; i<list_length; ++i)
	res.push(i);
	return res;
	};

	MyCustomClassHoldingBusinessLogic.prototype.get_stored_list = function() {
	return this.stored_list;
	};

	MyCustomClassHoldingBusinessLogic.prototype.get_stored_dict = function() {
	return this.stored_dict;
	};
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8" />
	<title>AngularJS Plunker</title>
	<script>document.write('<base href="' + document.location + '" />');</script>
	<link href="style.css" rel="stylesheet" />
	<script data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js" data-require="angular.js@1.4.x"></script>
	<script src="app.js"></script>
	</head>

	<body ng-app="name_of_the_app">
	<div ng-controller="MainCtrl">
	<p>Hello {{name}}!</p>
	<div ng-controller="SomeCtrl">
	<p>
	<span class="green_bg" ng-repeat="i in some_list_data">
	<span class="red_text" ng-bind="i"></span>
	</span>
	</p>
	<p>
	<span ng-repeat="(key, val) in some_dict_data">
	<span class="pad_right" ng-bind-template="{{val}} from key {{key}}"></span>
	</span>
	</p>
	</div>
	</div>
	</body>

	</html>
	/* Put your css in here */

	.red_text{
	color: red;
	}

	.green_bg{
	background: lightgreen;
	}

	.pad_right{
	padding-right: 2em;
	}