= AngularJS =
HTML enhanced for web apps! https://angularjs.org/
== Examples ==
=== example.html ===
{{{#!highlight html
<!doctype html>
<html ng-app="todoApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="todo.js"></script>
</head>
<body>
<h2>Todo</h2>
<div ng-controller="TodoListController as todoList">
<h1>{{testx()}}</h1>
<h1>{{todoList.valuesX}}</h1>
<h1>{{selectedOption}}</h1>
<select ng-disabled="todoList.listDisabled" ng-model="selectedOption" ng-change="todoList.change()">
<option ng-repeat="val in todoList.valuesX" value="{{val}}"> {{val}}</option>
</select>
</div>
</body>
</html>
}}}
=== todo.js ===
{{{#!highlight javascript
var app = angular.module('todoApp', []);
app.controller('TodoListController', TodoListController );
function TodoListController($scope,$timeout,$interval,$http) {
console.log('Called TodoListController');
this.valuesX=[];
this.listDisabled=true;
this.scope = $scope;
this.scope.selectedOption='';
this.scope.testx = this.testx;
$timeout(this.fillValues.bind(this),5000);
$interval(function () { console.log('$interval kkkk llll ' + new Date() );},10000);
$http.get('todo.js').then(function(response) {
console.log( response.data );
});
}
TodoListController.prototype.testx=function(){
return "ASDF";
};
TodoListController.prototype.fillValues=function(){
console.log('called fill values');
this.valuesX=['aa','bb','cc'];
this.listDisabled=false;
this.scope.selectedOption='bb'; //select default value
// when calling with $timeout $apply is not needed
//this.scope.$apply();
};
TodoListController.prototype.change=function(){
console.log('change');
console.log( JSON.stringify(this.valuesX) );
console.log( this.scope.selectedOption );
}
}}}
== Quickstart Angular2 ==
Uses TypeScript which is a superset of JavaScript
{{{
cd ~
mkdir angular-quickstart
cd angular-quickstart
touch package.json # identifies npm package dependencies for the project.
touch tsconfig.json # defines how the TypeScript compiler generates JavaScript from the project's files.
touch typings.json # provides additional definition files for libraries that the TypeScript compiler doesn't natively recognize.
touch systemjs.config.js
npm update
npm install
}}}