从flask视角学习angular

前端框架完全不懂。

看着angular中文官网的英雄编辑器教程和核心知识，用偷懒的类比法，从flask django的角度 记录一下自己对angular的理解.

app.module.ts

这个文件有点类似extends.py 在这里import各种依赖的插件。比如要双向绑定，就要import  FormsModule

import { NgModule }      from ‘@angular/core‘;
import { BrowserModule } from ‘@angular/platform-browser‘;
import { FormsModule }   from ‘@angular/forms‘; // <-- NgModel lives here

import { AppComponent }  from ‘./app.component‘;

@NgModule({
  imports: [
    BrowserModule,
    FormsModule // <-- import the FormsModule before binding with [(ngModel)]
  ],

@ngModule 类Flask的app，其他的component类似blueprint。在这里declarations里添加其他的component，类似 注册蓝图

import { NgModule }       from ‘@angular/core‘;
import { BrowserModule }  from ‘@angular/platform-browser‘;
import { FormsModule }    from ‘@angular/forms‘;

import { AppComponent }         from ‘./app.component‘;
import { DashboardComponent }   from ‘./dashboard.component‘;
import { HeroDetailComponent }  from ‘./hero-detail.component‘;
import { HeroesComponent }      from ‘./heroes.component‘;
import { HeroService }          from ‘./hero.service‘;

import { AppRoutingModule }     from ‘./app-routing.module‘;

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
  declarations: [
    AppComponent,
    DashboardComponent,
    HeroDetailComponent,
    HeroesComponent
  ],
  providers: [ HeroService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

类似

from flask import Flask

from scenario import scenario
from situation import situation
from posture import posture
from assistant import assistant
from do_action import do_action
from rule import rule

# ————————注册blueprint————————
app.register_blueprint(scenario)
app.register_blueprint(situation)
app.register_blueprint(posture)
app.register_blueprint(do_action)
app.register_blueprint(assistant)
app.register_blueprint(rule)

app = Flask(__name__)

app.component.ts

import { Component } from ‘@angular/core‘;

@Component({
  selector: ‘my-app‘,
  template: `
    <h1>{{title}}</h1>
    <nav>
      <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
      <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
    </nav>
    <router-outlet></router-outlet>
  `,
  styleUrls: [‘./app.component.css‘],
})
export class AppComponent {
  title = ‘Tour of Heroes‘;
}

@Component 相当于 flask里

1 /templates/每个blueprint下的用 jinja2 语法的XXX.html，2 /static/下的 css

区别在于：flask强调"动静分离"。这样部署的时候，static的东西用nginx, web api部分 用 gunicorn

angular 的component（有点类似Unity3d里的gameobject），把css 模板 都封装在了组件里，写在了代码里。

angular的“前后端”统统用ts/js搞了。这样开发者不需要太在乎“动静”与“前后"的分野。

Model部分

export class Hero {
  id: number;
  name: string;
}

类似 models.py定义的ORM类。可以送进模板用双括号访问属性 {{hero.name}}

ng的双向绑定很给力。

<div>
  <label>name: </label>
  <input [(ngModel)]="hero.name" placeholder="name">
</div>