starting state

.gitignore

@@ -0,0 +1,11 @@
+node_modules
+
+
+/build
+/.settings
+/.classpath
+/.project
+
+/.idea
+*.iml
+*.log

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

data/db.json

@@ -0,0 +1,19 @@
+{
+  "posts": [
+    {
+      "title": "Post 1",
+      "text": "text 1",
+      "_id": 1
+    },
+    {
+      "title": "Post 2",
+      "text": "text 2",
+      "_id": 2
+    },
+    {
+      "title": "a",
+      "text": "b",
+      "_id": 3
+    }
+  ]
+}

data/routes.json

@@ -0,0 +1,3 @@
+{
+  "/api/": "/"
+}

index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+
+<script src="node_modules/angular/angular.min.js"></script>
+<script src="node_modules/angular-route/angular-route.min.js"></script>
+
+<script src="build/bundle.js"></script>
+
+<body>
+
+    <a href="#/list">Kõik postitused</a> | <a href="#/new">Lisa uus</a>
+
+    <br /><br /><br />
+
+    <div ng-view></div>
+
+</body>
+</html>

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "ng1ts",
+  "version": "1.0.0",
+  "scripts": {
+    "serve": "webpack-dev-server --port 3001",
+    "build-sample": "webpack --config webpack.sample.config.js",
+    "build": "webpack",
+    "back-end": "json-server ./data/db.json --static ./ --id _id --port 3000 --routes ./data/routes.json"
+  },
+  "devDependencies": {
+    "@types/angular": "^1.6.15",
+    "@types/angular-route": "^1.3.3",
+    "@types/es6-promise": "0.0.32",
+    "angular": "^1.6.4",
+    "angular-route": "^1.6.4",
+    "awesome-typescript-loader": "^3.1.2",
+    "json-server": "^0.8.22",
+    "typescript": "^2.2.2",
+    "webpack": "^2.5.1",
+    "webpack-dev-server": "^2.4.5"
+  }
+}

post.ts

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

sample.ts

@@ -0,0 +1,23 @@
+import { Post } from './post';
+
+class Dao {
+    getPost() {
+        let dataFromServer = '{ "title": "Post 1", "text": "text 1" }';
+
+        return JSON.parse(dataFromServer);
+    }
+
+    getRealPost() {
+        return new Post('Title 1', 'text 1');
+    }
+
+    getPostTyped(): Post {
+        let dataFromServer = '{ "title": "Post 1", "text": "text 1" }';
+
+        return <Post> JSON.parse(dataFromServer);
+    }
+}
+
+let dao = new Dao();
+
+console.log(dao.getRealPost());

tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "types" : ["angular", "angular-route", "es6-promise"],
+    "target": "es5",
+    "moduleResolution": "node",
+    "sourceMap": false,
+    "removeComments": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "noImplicitAny": true,
+    "allowJs": true,
+    "suppressImplicitAnyIndexErrors": true
+  }
+}

webpack.config.js

@@ -0,0 +1,29 @@
+var path = require('path');
+
+module.exports = {
+
+    entry: {
+        app: './app/app.ts'
+    },
+
+    output: {
+        path: path.resolve(__dirname, 'build'),
+        publicPath: '/build/',
+        filename: 'bundle.js'
+    },
+
+    module: {
+        loaders: [
+            {
+                test: /\.ts$/,
+                loader: 'awesome-typescript-loader'
+            }
+        ],
+        exprContextCritical: false
+    },
+
+    resolve: {
+        extensions: ['.js', '.ts']
+    }
+
+};

webpack.sample.config.js

@@ -0,0 +1,5 @@
+var conf = require('./webpack.config.js');
+
+conf.entry.app = './sample.ts';
+
+module.exports = conf;