starting state

app/add.ctrl.ts

@@ -0,0 +1,24 @@
+import { Post } from './post.cls';
+import { DataService } from './data.srv.i';
+import { ILocationService } from 'angular';
+
+function AddCtrl($location: any, dataService: any) {
+
+    var vm = this;
+    vm.title = '';
+    vm.text = '';
+    vm.addNew = addNew;
+
+    function addNew() {
+        var post = { title: vm.title, text: vm.text }; // use new Post(.. instead
+
+        dataService.addPost(post)
+            .then(function () {
+                $location.path('/list');
+            });
+    }
+}
+
+AddCtrl.$inject = ['$location', 'dataService'];
+
+angular.module('app').controller('AddCtrl', AddCtrl);

app/add.html

@@ -0,0 +1,5 @@
+Pealkiri: <input ng-model="vm.title"> <br>
+
+Text: <input ng-model="vm.text"><br>
+
+<button ng-click="vm.addNew()">Saada</button>

app/angular.d.ts

@@ -0,0 +1,4 @@
+declare global {
+  const angular: ng.IAngularStatic;
+}
+export {};

app/app.ts

@@ -0,0 +1,13 @@
+/// <reference path="angular.d.ts" />
+
+var app = angular.module('app', ['ngRoute']);
+
+import './mem.data.srv';
+import './add.ctrl';
+import './list.ctrl';
+import './route.conf';
+
+angular.element(document)
+    .ready(function () {
+        angular.bootstrap(document, ['app']);
+    });

app/data.srv.i.ts

@@ -0,0 +1,8 @@
+import { Post } from './post.cls';
+
+export interface DataService {
+
+    addPost(post: Post): Promise<void>;
+
+    getPosts(): Promise<Post[]>;
+}

app/list.ctrl.ts

@@ -0,0 +1,21 @@
+import { Post } from './post.cls';
+import { DataService } from "./data.srv.i";
+
+function ListCtrl(dataService: any) {
+
+    var vm = this;
+    vm.posts = [];
+
+    init();
+
+    function init() {
+        dataService.getPosts()
+            .then(function (result : any) {
+                vm.posts = result;
+            });
+    }
+}
+
+ListCtrl.$inject = ['dataService'];
+
+angular.module('app').controller('ListCtrl', ListCtrl);

app/list.html

@@ -0,0 +1,3 @@
+<div ng-repeat="post in vm.posts">
+    {{ post.title }}
+</div>

app/mem.data.srv.ts

@@ -0,0 +1,29 @@
+import { Post } from './post.cls';
+import { DataService } from './data.srv.i';
+import { IQService } from 'angular';
+
+function MemDataService($q: any) {
+
+    var vm = this;
+    vm.addPost = addPost;
+    vm.getPosts = getPosts;
+
+    vm.posts = [
+        new Post('Post 1', 'text 1'),
+        new Post('Post 2', 'text 2')
+    ];
+
+    function addPost(post: Post) {
+        vm.posts.push(post);
+
+        return $q.resolve();
+    }
+
+    function getPosts() {
+        return $q.resolve(vm.posts);
+    }
+}
+
+MemDataService.$inject = ['$q'];
+
+angular.module('app').service('dataService', MemDataService);

app/post.cls.ts

@@ -0,0 +1,3 @@
+export class Post {
+    constructor(private title: string, private text: string) {}
+}

app/rest.data.srv.ts

@@ -0,0 +1,22 @@
+import { Post } from './post.cls';
+import { DataService } from './data.srv.i';
+import { IHttpService } from 'angular';
+
+export class RestDataService implements DataService {
+
+    constructor(private $http: IHttpService) {}
+
+    addPost(post: Post) {
+        return this.$http.post('api/posts', post)
+            .then(() => <void> null);
+    }
+
+    getPosts() {
+        return this.$http.get('api/posts')
+            .then(result => result.data);
+    }
+}
+
+RestDataService.$inject = ['$http'];
+
+angular.module('app').service('dataService', RestDataService);

app/route.conf.ts

@@ -0,0 +1,21 @@
+import { ILocationProvider } from 'angular';
+
+routeConf.$inject = ['$routeProvider', '$locationProvider'];
+
+function routeConf($routeProvider: any,
+                   $locationProvider: any) {
+
+    $routeProvider.when('/list', {
+        templateUrl : 'app/list.html',
+        controller : 'ListCtrl',
+        controllerAs : 'vm'
+    }).when('/new', {
+        templateUrl : 'app/add.html',
+        controller : 'AddCtrl',
+        controllerAs : 'vm'
+    }).otherwise('/list');
+
+    $locationProvider.hashPrefix('');
+}
+
+angular.module('app').config(routeConf);