TypeScript class with angularjs

Question

I have a few issues with my typescript/angular-code. I'm new to typescript and angular (but I finished a few tutorials etc.) so i would like to know some "Best Practices".

The thing I want to know is how to pass the '$http' from angular to the class so I can use it there. I know how to write angular code and I know how to handle TypeScript ... but both combined, man, awful. Biggest struggle for me.

Please give me some good advices.

Here is my code (app.ts):

/// <reference path="../Scripts/typings/_references.d.ts" />

var theapp= angular.module('myapp', []);

class Aktion {
input: string;
private httpService: any;
constructor(message: string, $http: any) {
    this.input = message;
    this.httpService = $http;
}

act() {
    console.log("act: " + this.input);
    this.httpService.get('http://localhost:8080/Service/rest/webservice/GetActions/' + this.input + '').
    success(function (data, status, headers, config) {
    console.log(data);
    }).error(function (data, status, headers, config) {
    console.log(data);
    });
    }

connect() {
    this.httpService.get('http://localhost:8080/Service/rest/webservice/GetConnections/' +  + '').
    success(function (data, status, headers, config) {
    console.log(data);
    }).error(function (data, status, headers, config) {
    console.log(data);
    });
}}}

theapp.controller('AktionsController', ['$http', Aktion]);

UPDATE 1:

<!DOCTYPE HTML>
<html lang="de" ng-app="myapp">
<head>
<meta charset="utf-8" />
<title>TEST</title>

<link rel="stylesheet" href="css/app.css" type="text/css" />
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Abel' type='text/css' />

<script type="text/javascript" src="Scripts/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="Scripts/angular.js"></script>
<script src="ts/app.js"></script>
</head>
<body>
<content>
    <div id="eingabe-container" ng-controller="AktionsController as aktionCtrl">
        <h1>Test</h1>
        <input id="eingabe" />
        <button ng-click="aktionCtrl.act()">Abschicken</button>
    </div>

</content>
</body>
</html>

I'm calling the act()-function via ng-click. Thought this is ok to do. Saw it very often in other code snippets. Any other suggestion?

This is just a test-app. I have to write a programm for my Bachelor-thesis and wanted to understand angular and typescript before writing the programm. So I made this Test-App.

Thanks to all your answeres. :)

Your code looks fine to me. If you use Visual Studio to develop, have a look at SideWaffle to get templates of controllers, services, and directives written in TyepScript. I also have a MEAN stack app on GitHub, if you want to check it out. Get in touch if you want some more details on why and how I do things — Hugues Stefanski
– Hugues Stefanski, Commented May 23, 2015 at 15:07
BTW: When I'm calling the function act() from my HTML im getting the Error, that "this.httpService is not defined". Any suggestions? — Nico
– Nico, Commented May 23, 2015 at 16:45
@Nico Why are you calling a function from your HTML ? Some design issue I guess. — Omri Aharon
– Omri Aharon, Commented May 23, 2015 at 20:09
Ouh yeah sorry, I did not notice. your $http service will be injected as your first parameter in the Aktion constructor. This means that $http is actually in this.input, and this.httpService is undefined. I would suggest to remove the first parameter of your constructor. What is the goal you try to achieve with it? — Hugues Stefanski
– Hugues Stefanski, Commented May 23, 2015 at 20:13
@Omri, @Hugues: HI. Thanks a lot. See Update 1. Should I have to call the act()-function in another way? Or, how do I pass the Input-value to this.input in class Aktion? — Nico
– Nico, Commented May 25, 2015 at 8:15

Omri Aharon · Accepted Answer · 2015-05-23 15:13:03Z

1

Two things that I spot:

Not related specifically to Typescript, but since you're looking for best practices I'm sure this counts - you shouldn't make HTTP calls directly from your controller, use a service to handle the logic and then just use the controller to call the service. Controllers should not be handling logic.
Try not to have any as a type when defining the type of your variables. This loses much of Typescript's benefits. It might take a bit of extra effort but it's worth it. Sometimes you can't help but use any, but as best practices go - only as a last resort.

answered May 23, 2015 at 15:13

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Hugues Stefanski Over a year ago

Also, in the last line, I like to inject my dependencies explicitly, so taht I am sure I do not miss one for the constructior: theapp.controller('AktionsController', ['$http', ($http)=>new Aktion($http]);. What I like less about this is that you have to type your reference in three times...

Omri Aharon Over a year ago

@HuguesStefanski I share that exact approach and dislike :)

Nico Over a year ago

Thanks. To put HTTP-Calls in a Service was clear to me, but this code is in a low stage. But thanks a lot for this hint.

Nico Over a year ago

Type "any" was from a tutorial. I will change it.

Hugues Stefanski Over a year ago

DefinitelyTyped will become your best friends ;-)

Hugues Stefanski · Accepted Answer · 2015-05-23 15:23:54Z

0

If you want some guidance in structuring an angular app, check out John Papa's style guide. Though not focused on TypeScript, it is a great help to get started properly. I would place the controller in a separate file, and enclose it in a module (like MyApp.Controllers), to avoid polluting the global scope, and use kind of a namespacing.

answered May 23, 2015 at 15:23

Hugues Stefanski

1,1821 gold badge8 silver badges11 bronze badges

Collectives™ on Stack Overflow

TypeScript class with angularjs

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related