MVW在Angular2中代表什么? [英] What does MVW stand for in Angular2?

查看:59
本文介绍了MVW在Angular2中代表什么?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有很多介绍MVC,MVP,MVVM等的链接.但是我没有一个告诉我们M在Angular2中确切代表什么,V在Angular2中确切代表什么,W在Angular2中确切代表什么.也许W有一个答案.那就是W代表什么.

任何人都可以通过以下示例帮助我.

AppModule:

import { NgModule }           from '@angular/core';
import { BrowserModule }      from '@angular/platform-browser';

import { AppComponent }       from './app.component';
import { AppService }        from './app.service';


@NgModule({
  imports:      [
    BrowserModule
  ],
  providers:    [ AppService ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

AppComponent:

import { Component } from '@angular/core';
import { AppService }        from './app.service';
import { Message }        from './message';

@Component({
  selector: 'my-app',
  template: '<h1>{{message.body}}</h1>from<h2>{{message.sender}}</h2>',
})
export class AppComponent {
  private message: Message;

  constructor(appService: AppService) {
    this.message = userService.getMessage();
  }
}

消息:

export class Message {
  private body: string;
  private sender: string;

  constructor() {
    this.body = 'hello, world';
    this.sender = 'Lcng';
  }
}

AppService:

import { Injectable } from '@angular/core';
import { Message }        from './message';

@Injectable()
export class AppService {
  getMessage(): Message{
    let message = new Message();
    return message;
  }
}

所以我的理解是:

M(当然,它代表模型)是域模型.在上面的示例中,域模块是AppService.因此,大多数情况下,M是服务(公用事业服务等除外).

V是视图,由组件的模板呈现.在上面的示例中,V是问候语屏幕.

W是什么.它是看起来像控制器,ViewModel以及其他任何东西的组件.

并且,以上示例中的Message类是一个实体模型,它不是M.

所以我说的对吗?你能帮我吗?.

解决方案

AppComponent类等同于控制器类,因此是您的W.

view是HTML的组成部分

模型是可以提供/注入的服务.

I've got many links which introduce MVC, MVP, MVVM and so on. But I didn't get one which tells what M exactly stands for in Angular2, what V exactly stands for in Angular2 and what W exactly stands for in Angular2. Maybe there is an answer for W. That is W stands for whatever.

Can anyone help me with the following example.

AppModule:

import { NgModule }           from '@angular/core';
import { BrowserModule }      from '@angular/platform-browser';

import { AppComponent }       from './app.component';
import { AppService }        from './app.service';


@NgModule({
  imports:      [
    BrowserModule
  ],
  providers:    [ AppService ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

AppComponent:

import { Component } from '@angular/core';
import { AppService }        from './app.service';
import { Message }        from './message';

@Component({
  selector: 'my-app',
  template: '<h1>{{message.body}}</h1>from<h2>{{message.sender}}</h2>',
})
export class AppComponent {
  private message: Message;

  constructor(appService: AppService) {
    this.message = userService.getMessage();
  }
}

Message:

export class Message {
  private body: string;
  private sender: string;

  constructor() {
    this.body = 'hello, world';
    this.sender = 'Lcng';
  }
}

AppService:

import { Injectable } from '@angular/core';
import { Message }        from './message';

@Injectable()
export class AppService {
  getMessage(): Message{
    let message = new Message();
    return message;
  }
}

So my understanding is:

M (of course it stands for Model) is the Domain Model. And in the above example the Domain Module is the AppService. So most of the time M is the services(except something like utility services).

V is View, which is rendered by a Component's template. In the above example V is the greeting screen.

W is whatever. And it is the Component which looks like a Controller, a ViewModel, and a whatever..

And, the class Message in the above example is a Entity Model which is not the M..

So am I right? Could you help me please..

解决方案

AppComponent class is equivalent to the controller class and is thus your W.

view is the components HTML

model is the services that can be provided / injected.

这篇关于MVW在Angular2中代表什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆