Component类似flask app下面的每个blueprint。

import 'rxjs/add/operator/switchMap';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Location } from '@angular/common'; import { Hero } from './hero';
import { HeroService } from './hero.service';
@Component({
selector: 'hero-detail',
templateUrl: './hero-detail.component.html',
styleUrls: [ './hero-detail.component.css' ]
})
export class HeroDetailComponent implements OnInit {
hero: Hero; constructor(
private heroService: HeroService,
private route: ActivatedRoute,
private location: Location
) {} ngOnInit(): void {
this.route.paramMap
.switchMap((params: ParamMap) => this.heroService.getHero(+params.get('id')))
.subscribe(hero => this.hero = hero);
} goBack(): void {
this.location.back();
}
}

@Component 说明了两个路径,

1 /templates/每个blueprint下的用 jinja

2 语法的XXX.html,2 /static/下的 css

也可以直接把模板内容和css直接写在@Component下面,这时Component有点类似Unity3d里的gameobject,@Component里面的“selector,template” 有点类似gameobject里的“transfrom”,"material"。(U3d里是gameobject->component  不要和ng的Component混了)。

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

angular的“前后端”统统用ts/js搞了。这样开发者不需要太在乎“动静”与“前后"的分野。封装程度类似unity3d里的prefab,感觉很不错。

定义

每次开头都要导入Component

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

类似blueprint:

from flask import Blueprint

导出

export class AppComponent {
title = 'Tour of Heroes';
hero = 'Windstorm';
}

类似

user_blueprint = Blueprint('user', __name__, url_prefix='/user')

OnInit

不同于构造函数constructor。

import { OnInit } from '@angular/core';

export class AppComponent implements OnInit {
ngOnInit(): void {
}
}

感觉constructor类似于python的__new__() 而ngOnInit()类似于通常使用的__init__(self)

看介绍:

只要我们实现了 Angular 的 ngOnInit 生命周期钩子,Angular 就会主动调用这个钩子。 Angular提供了一些接口,用来介入组件生命周期的几个关键时间点:刚创建时、每次变化时,以及最终被销毁时

又有点像unity3d的Monobehaviour的 Awake() Start() Update()...由引擎在特定时机调用调用。

命名

注意命名方法 HeroDetailComponent 大概类似于把蓝图对象命名为HeroDetailBlueprint

文件名和组件名遵循风格指南中的标准方式。

  • 组件的类名应该是大驼峰形式,并且以Component结尾。 因此英雄详情组件的类名是HeroDetailComponent

    The component class name should be written in upper camel case and end in the word "Component". The hero detail component class is HeroDetailComponent.

  • 组件的文件名应该是小写中线形式,每个单词之间用中线分隔,并且以.component.ts结尾。 因此HeroDetailComponent类应该放在hero-detail.component.ts文件中。

引用Componet视图

父组件AppComponent会告诉子组件HeroDetailComponent要显示哪个英雄, 告诉的方法是把它的selectedHero属性绑定到HeroDetailComponenthero属性上。

这种绑定(协调主视图AppComponent与HeroDetailComponent的方式)是这样的:

<hero-detail [hero]="selectedHero"></hero-detail>

在等号的左边,是方括号围绕的hero属性,这表示它是属性绑定表达式的目标。 我们要绑定到的目标属性必须是一个输入属性,否则Angular会拒绝绑定,并抛出一个错误。

1 把AppComponentselectedHero属性绑定到HeroDetailComponent的input 属性hero上。表示了传输关系

2 <hero-detail>是HeroDetailComponent 的 @Component里的selector。

这样的好处是,不用在AppComponent里显示引用HeroDetailComponent。只要[hero]是declaration过的某个Component里的input属性就OK了。

——这个比较别扭但又很巧妙。

从flask视角理解angular(二)Blueprint VS Component的更多相关文章

  1. 从flask视角理解angular(四)Route

    app-routing.modules.ts import { NgModule } from '@angular/core'; import { RouterModule, Routes } fro ...

  2. 从flask视角理解angular(三)ORM VS Service

    把获取模型数据的任务重构为一个单独的服务,它将提供英雄数据,并把服务在所有需要英雄数据的组件间共享. @Injectable() export class HeroService { getHeroe ...

  3. 从flask视角学习angular(一)整体对比

    写在前面 前端框架完全不懂. 看着angular中文官网的英雄编辑器教程和核心知识,用偷懒的类比法,从flask django的角度 记录一下自己对angular的理解. 作为工科的武曲,自己的体会是 ...

  4. 用三维的视角理解二维世界:完美解释meshgrid函数,三维曲面,等高线,看完你就懂了。...

    完美解释meshgrid函数,三维曲面,等高线 #用三维的视角理解二维世界 #完美解释meshgrid函数,三维曲面,等高线 import numpy as np import matplotlib. ...

  5. 从Java视角理解CPU缓存(CPU Cache)

    从Java视角理解系统结构连载, 关注我的微博(链接)了解最新动态众所周知, CPU是计算机的大脑, 它负责执行程序的指令; 内存负责存数据, 包括程序自身数据. 同样大家都知道, 内存比CPU慢很多 ...

  6. 第217天:深入理解Angular双向数据绑定的原理

    一.理解angular双向数据绑定 双向绑定是新的前端框架中频繁出现的一个新词汇,也是mvvm的核心原理.angularjs五条核心信念中的数据驱动,便是由双向绑定进行完成. 那么什么是双向绑定,下面 ...

  7. 深入理解OOP(二):多态和继承(继承)

    本文是深入浅出OOP第二篇,主要说说继承的话题. 深入理解OOP(一):多态和继承(初期绑定和编译时多态) 深入理解OOP(二):多态和继承(继承) 深入理解OOP(三):多态和继承(动态绑定和运行时 ...

  8. (七)理解angular中的module和injector,即依赖注入

    (七)理解angular中的module和injector,即依赖注入 时间:2014-10-10 01:16:54      阅读:63060      评论:1      收藏:0      [点 ...

  9. C++ 中类的构造函数理解(二)

    C++ 中类的构造函数理解(二) 写在前面 上次的笔记中简要的探索了一下C++中类的构造函数的一些特性,这篇笔记将做进一步的探索.主要是复制构造函数的使用. 复制构造函数 复制构造函数也称拷贝构造函数 ...

随机推荐

  1. shell 脚本的时间差计算

    在某个时间点上增加一段时间 将时间转为时间戳,然后增加时间 [root@~]# date +%s -d '2017-05-27 12:0:0' 1495857600 [root@ ~]# new_ti ...

  2. 获取RadioButton选中的值

    1.RadioButtonList的RepeatDirection="Horizontal"可以设置按扭选项横对齐: 2.获取选中的RadioButton值; $("#& ...

  3. Eclipse java项目将普通文件转化为Source文件的操作

    前提:该项目中已经将原有的Source folder删除掉. 右键单击普通文件>Build path>Use as Source Folder.

  4. Android中activity的四个启动模式

    activity的四个启动方式分别是standard.singletop.singletask.singleinstance.第一个其实就是只要新打开活动就会新建一个实例.第二个顾名思义返回栈的顶部只 ...

  5. CentOS7 安装git服务器

    在CentOS7系统中安装git服务器有两种方法,分别为yum安装和下载git安装包手动安装,这篇文章只有下载git安装包手动安装方法. 方法一:使用yum安装 暂无 方法二:下载git安装包手动安装 ...

  6. ODAC(V9.5.15) 学习笔记(九)TOraSQLMonitor

    名称 类型 说明 Active Boolean 激活SQL跟踪 DBMonitorOptions 将跟踪信息发送到dbMonitor工具软件的选择项 Host IP地址 Port 端口号 Reconn ...

  7. GCD与莫比乌斯反演的勾当

    目录 机房最后一个学懵逼钨丝的人 题目一 题目 bzoj1101 机房最后一个学懵逼钨丝的人 题目一 链接 题目没找到 求\(\sum_{1}^{n}\sum_{1}^{m}gcd(i,j)\) 式子 ...

  8. CentOS7.2中systemctl的使用

    CentOS 7.x开始,CentOS开始使用systemd服务来代替daemon,原来管理系统启动和管理系统服务的相关命令全部由systemctl命令来代替. 1.原来的 service 命令与 s ...

  9. 全排列+字符串查找|扑克排序|2014年蓝桥杯A组题解析第六题-fishers

    标题:扑克序列 A A 2 2 3 3 4 4, 一共4对扑克牌.请你把它们排成一行. 要求:两个A中间有1张牌,两个2之间有2张牌,两个3之间有3张牌,两个4之间有4张牌. 请填写出所有符合要求的排 ...

  10. [分享]Active-HDL 9.2 安装

    Download 点击下载Active-HDL 9.2 How to Install ? 解压后依次进行以下操作 1.运行Active_HDL_9.2sp1_main_setup.exe,允许程序所有 ...