AngularJS
HTML enhanced for web apps! https://angularjs.org/
https://docs.angularjs.org/guide/concepts
- Model - the data shown to the user in the view and with which the user interacts
- View - what the user sees (the DOM)
- Controller - the business logic behind views
- Dependency Injection - Creates and wires objects and functions
AngularJS is a Javascript framework. It can be added to an HTML page with a “script” tag. AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.
Examples
example.html
1 <!doctype html>
2 <html ng-app="todoApp">
3 <head>
4 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
5 <script src="todo.js"></script>
6 </head>
7 <body>
8 <h2>Todo</h2>
9 <div ng-controller="TodoListController as todoList">
10 <h1>{{testx()}}</h1>
11 <h1>{{todoList.valuesX}}</h1>
12 <h1>{{selectedOption}}</h1>
13 <select ng-disabled="todoList.listDisabled" ng-model="selectedOption" ng-change="todoList.change()">
14 <option ng-repeat="val in todoList.valuesX" value="{{val}}"> {{val}}</option>
15 </select>
16 </div>
17 </body>
18 </html>
todo.js
1 var app = angular.module('todoApp', []);
2
3 app.controller('TodoListController', TodoListController );
4
5 function TodoListController($scope,$timeout,$interval,$http) {
6 console.log('Called TodoListController');
7 this.valuesX=[];
8 this.listDisabled=true;
9
10 this.scope = $scope;
11 this.scope.selectedOption='';
12 this.scope.testx = this.testx;
13
14 $timeout(this.fillValues.bind(this),5000);
15 $interval(function () { console.log('$interval kkkk llll ' + new Date() );},10000);
16 $http.get('todo.js').then(function(response) {
17 console.log( response.data );
18 });
19 }
20
21 TodoListController.prototype.testx=function(){
22 return "ASDF";
23 };
24
25 TodoListController.prototype.fillValues=function(){
26 console.log('called fill values');
27 this.valuesX=['aa','bb','cc'];
28 this.listDisabled=false;
29 this.scope.selectedOption='bb'; //select default value
30 // when calling with $timeout $apply is not needed
31 //this.scope.$apply();
32 };
33
34 TodoListController.prototype.change=function(){
35 console.log('change');
36 console.log( JSON.stringify(this.valuesX) );
37 console.log( this.scope.selectedOption );
38 }
Quickstart Angular2
Uses typescript which is a superset of Javascript
1 cd ~
2 mkdir angular-quickstart
3 cd angular-quickstart
4 touch package.json # identifies npm package dependencies for the project.
5 touch tsconfig.json # defines how the TypeScript compiler generates JavaScript from the project's files.
6 touch typings.json # provides additional definition files for libraries that the TypeScript compiler doesn't natively recognize.
7 touch systemjs.config.js
8
9 npm update
10 npm install