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")
Brak komentarzy:
Prześlij komentarz