Angular2 / Typescript对象和属性绑定到模板

Question

Note: I want to know correct way or something more
_____________________________________________________________________
ANGULAR1

In angular1 , we could do something like below.

$scope.user={};
$scope.user.name="micronyks";
$scope.user.age="27";

or directly like

$scope.user={name:"micronyks",age:"27"}

Binding to template looks like,

<div>My name is {{user.name}} & I'm {{user.age}} year(s) old. </div>

______________________________________________________________________
ANGULAR2

In angular2 with Typescript ,

models.ts

export class LoginModel()
{
  private name:string;
  private age:number;
}

app.ts

import {LoginModel} from '../models.ts';

user=new LoginModel()
constructor()
{
   this.user.name="micronyks"
   this.user.age="27"
}

app.html

<div>My name is {{user.name}} & I'm {{user.age}} year(s) old. </div <div>My name is {{user.name}} & I'm {{user.age}} year(s) old. </div >

Can we directly create an object with property(ies) with values?

I know TypeScript is mainly concerned with type .

But would like to know if something else is there and if someone know something into deep.

If you want to show something you can use this plunker: Plunker

Answer 1

You can use also use literal objects in Angular2 like Angular1. Since Angular2 can be used with TypeScript, you can leverage its strong types. This way you can specify the types for properties and parameters. Checks aren't now possible and this allows to get type errors if uncorrect types are used.

import {LoginModel} from '../models.ts';

export class Test {
  user:LoginModel = new LoginModel()

  constructor() {
    this.user.name = 'micronyks';
    this.user.age = 27;

    this.someMethod(this.user);
  }

  someMethod(user:LoginModel) {
    // ...
  }
}

Another point is related to dependency injection since Angular2 can rely on type to know which instance to inject... Otherwise you need to use @Inject .

There are also impacts within your IDE. Since you can have completion if you define types instead of no type or any .

In fact, it's even possible to mix things:

interface INumbersOnly {
  [key: string]: number;
}

var x: INumbersOnly = {
  num: 1, // works fine
  str: 'x' // will give a type error
};

So I would say that you're free to do what you want ;-)

See this question for more details:

• typescript strong typing - specifying object value types