1) Wstrzykiwanie serwisów
WorkApp.ts:
/// <reference path="../../../typings/tsd.d.ts" />
(function() {
angular.module("workApp", [])
})();
ValuesService.ts:
/// <reference path="../../../typings/tsd.d.ts" />
namespace Services {
export class ValuesService {
static IID: string = "valueService";
constructor() { }
reachValue(val: string): string {
return "dqwdqwdwdqwdq" + val;
}
}
}
WorkController.ts
class WorkController {
firstName: string;
value: number;
lastName: string;
static inject = ["$scope", Services.ValuesService.IID];
constructor($scope: ng.IScope, private valuesService: Services.ValuesService) {
let vm = this;
vm.firstName = "Paweł";
vm.lastName = "Hałat";
}
getFullName(): string {
return this.valuesService.reachValue(this.firstName) + " " + this.lastName;
}
}
2) Wstrzyknięcie i wykorzystanie $timeout
WorkController.ts:
class WorkController
{
firstName: string;
value: number;
lastName: string;
static inject = ["$scope", "$http"];
constructor($scope: ng.IScope, private $timeout: ng.ITimeoutService) {
let vm = this;
vm.firstName = "Paweł";
vm.lastName = "Hałat";
this.myMethod();
}
public myMethod() {
this.$timeout(() => { this.firstName = "fewfwfewffwe" }, 5000);
}
}
workApp.ts:
(() => {
angular.module("workApp", [])
.controller("workController", WorkController)
})();
3) Wstrzyknięcie $http, wywołanie obiektów json z strony
WorkController.ts:
class WorkController { myData: any;
private httpService: any;
static inject = ["$scope", "$http"];
constructor($scope: ng.IScope, private $http: ng.IHttpService) {
let vm = this;
this.httpService = $http;
this.getData();
}
getData(): any {
return this.httpService.get("http://www.w3schools.com/angular/customers.php")
.then((response) => { this.myData = response.data.records });
}
}
workApp.ts:
(() => {
angular.module("workApp", [])
.controller("workController", WorkController)
})();
4) Dodawanie inputów dynamicznie wysłanie przez json
Index.html:
<html>
<head>
@Scripts.Render("~/bundles/angular")
@Scripts.Render("~/content/typescript/controllers")
@Scripts.Render("~/scripts/work")
</head>
<body data-ng-app="workApp">
<div data-ng-controller="workController as ctrl">
<fieldset data-ng-repeat="choice in ctrl.arr">
<input type="text" ng-model="choice.name" placeholder="name">
<input type="text" ng-model="choice.surname" placeholder="surname">
</fieldset>
<button ng-click="ctrl.addField()">Add new field</button>
<div class="well">
{{ctrl.arr}}
</div>
</div>
</body>
</html>
WorkController.ts:
class WorkController {
myData: any;
public arr = [{ id: 1 }];
public vm: any;
static inject = ["$scope"];
constructor($scope: ng.IScope) {
}
addField() {
let itemNo = this.arr.length + 1;
if (itemNo < 20) {
this.arr.push({ "id": itemNo });
console.log(this.arr);
}
}
}
(() => {
angular.module("workApp", [])
.controller("workController", WorkController)
})();
4) Disabled/Enabled Button, Hide ActionLink
<html>
<head>
</head>
<body data-ng-app="workApp">
<div data-ng-controller="workController as ctrl">
<input type="checkbox" data-ng-model="checkBoxActive" />
@Html.ActionLink("Powrót", "Index", null , new { @class = "btn btn-info", ng_hide = "checkBoxActive" })
<button ng-disabled="checkBoxActive">Click Me</button>
{{checkBoxActive}}
</div>
</body>
</html>
@Scripts.Render("~/bundles/angular")
@Scripts.Render("~/content/typescript/controllers")
@Scripts.Render("~/scripts/work")
