publication

TypeScript Models

Miquel Canal

Tuesday 13, June 2017
  • Angular
  • Typescript

What is a data model in TypeScript?

Data models are models that help organize the internal data relations of an element. It is widely used across coding languages and is an essential tool to represent what data and what format needs to be used.

The base of TypeScript is to extend JavaScript by adding types to the language. This addition of types allows developers to define the format of data that is been used across the application. TypeScript model classes are a great example of this potential following an object-oriented approach.

Models in TypeScript can be referenced in other classes (components) to explicitly define the data format of an object. The following is a basic example where the a model class named “Server” is used on the “MonitorComponent” to create an array of available servers:

// Model
export class Server {
    private id: string;
    private ip: string;
    private account: string;
    private active = false;
    
    constructor( identification: string, ip: string, account: string ){
        this.id = identification;
        this.ip = ip;
        this.account = account;
    }
    
    toggleStatus() {
        this.active = !this.active;
    }
}


// Usecase to define a property of an external class
export class MonitorComponent {
    private servers: Array< Server >;
    
    constructor() {
        this.servers = [
            new Server('1', '192.168.0.1', 'user_account_1'),
            new Server('2', '192.168.0.2', 'user_account_2'),
            new Server('3', '192.168.0.3', 'user_account_3')
        ]
    }
}
Angular: Routing

Angular: Routing

Understand the basics of Angular routing and review core concepts and internal architecture.

How to compile Angular into single bundle.

How to compile Angular into single bundle.

Steps to compile an Angular application into a single bundle. An overview of the types of Angular compilation bundles and ways to cache bust an Angular application.

Create Angular Component after Application Initializes

Create Angular Component after Application Initializes

Basic learning of how to use build-in tools provided by Angular in order to create components after an application has been loaded.

This site uses cookies to ensure a great experience. By continue navigating through the site you accept the storage of these cookies.