标签：开发 scom 教程 selector 文件 app ring 绑定 https
前端框架完全不懂。
看着angular中文官网的英雄编辑器教程和核心知识，用偷懒的类比法，从flask django的角度 记录一下自己对angular的理解.
这个文件有点类似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)]
],
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__)
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>
标签：开发 scom 教程 selector 文件 app ring 绑定 https
原文地址：http://www.cnblogs.com/xuanmanstein/p/7614590.html
