TypeScript
TypeScript with AngularJS
Szukaj…
Parametry
Nazwa | Opis |
---|---|
controllerAs | to nazwa aliasu, do której można przypisać zmienne lub funkcje. @ patrz: https://docs.angularjs.org/guide/directive |
$inject | Lista zależności wtrysku jest rozwiązywana przez kąt i przekazywana jako argument funkcji konstruktora. |
Uwagi
Wykonując dyrektywę w TypeScript, należy pamiętać o mocy tego języka niestandardowego typu i interfejsów, które można utworzyć. Jest to niezwykle pomocne przy tworzeniu dużych aplikacji. Uzupełnianie kodu obsługiwane przez wiele IDE pokaże możliwą wartość według odpowiedniego typu, z którym pracujesz, więc jest o wiele mniej, o czym należy pamiętać (w porównaniu do VanillaJS).
„Kod przeciw interfejsom, a nie implementacje”
Dyrektywa
interface IMyDirectiveController { // specify exposed controller methods and properties here getUrl(): string; } class MyDirectiveController implements IMyDirectiveController { // Inner injections, per each directive public static $inject = ["$location", "toaster"]; constructor(private $location: ng.ILocationService, private toaster: any) { // $location and toaster are now properties of the controller } public getUrl(): string { return this.$location.url(); // utilize $location to retrieve the URL } } /* * Outer injections, for run once controll. * For example we have all templates in one value, and we wan't to use it. */ export function myDirective(templatesUrl: ITemplates): ng.IDirective { return { controller: MyDirectiveController, controllerAs: "vm", link: (scope: ng.IScope, element: ng.IAugmentedJQuery, attributes: ng.IAttributes, controller: IMyDirectiveController): void => { let url = controller.getUrl(); element.text("Current URL: " + url); }, replace: true, require: "ngModel", restrict: "A", templateUrl: templatesUrl.myDirective, }; } myDirective.$inject = [ Templates.prototype.slug, ]; // Using slug naming across the projects simplifies change of the directive name myDirective.prototype.slug = "myDirective"; // You can place this in some bootstrap file, or have them at the same file angular.module("myApp"). directive(myDirective.prototype.slug, myDirective);
Prosty przykład
export function myDirective($location: ng.ILocationService): ng.IDirective {
return {
link: (scope: ng.IScope,
element: ng.IAugmentedJQuery,
attributes: ng.IAttributes): void => {
element.text("Current URL: " + $location.url());
},
replace: true,
require: "ngModel",
restrict: "A",
templateUrl: templatesUrl.myDirective,
};
}
// Using slug naming across the projects simplifies change of the directive name
myDirective.prototype.slug = "myDirective";
// You can place this in some bootstrap file, or have them at the same file
angular.module("myApp").
directive(myDirective.prototype.slug, [
Templates.prototype.slug,
myDirective
]);
Składnik
Dla łatwiejszego przejścia do Angulara 2 zaleca się użycie Component
, dostępnego od Angulara 1.5.8
myModule.ts
import { MyModuleComponent } from "./components/myModuleComponent";
import { MyModuleService } from "./services/MyModuleService";
angular
.module("myModule", [])
.component("myModuleComponent", new MyModuleComponent())
.service("myModuleService", MyModuleService);
components / myModuleComponent.ts
import IComponentOptions = angular.IComponentOptions;
import IControllerConstructor = angular.IControllerConstructor;
import Injectable = angular.Injectable;
import { MyModuleController } from "../controller/MyModuleController";
export class MyModuleComponent implements IComponentOptions {
public templateUrl: string = "./app/myModule/templates/myComponentTemplate.html";
public controller: Injectable<IControllerConstructor> = MyModuleController;
public bindings: {[boundProperty: string]: string} = {};
}
templates / myModuleComponent.html
<div class="my-module-component">
{{$ctrl.someContent}}
</div>
kontroler / MyModuleController.ts
import IController = angular.IController;
import { MyModuleService } from "../services/MyModuleService";
export class MyModuleController implements IController {
public static readonly $inject: string[] = ["$element", "myModuleService"];
public someContent: string = "Hello World";
constructor($element: JQuery, private myModuleService: MyModuleService) {
console.log("element", $element);
}
public doSomething(): void {
// implementation..
}
}
services / MyModuleService.ts
export class MyModuleService {
public static readonly $inject: string[] = [];
constructor() {
}
public doSomething(): void {
// do something
}
}
gdzieś.html
<my-module-component></my-module-component>
Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow