Angular2 初识

AppComponent 壳的三个实现文件：

app.component.ts— 组件的类代码，这是用 TypeScript 写的。
app.component.html— 组件的模板，这是用 HTML 写的。
app.component.css— 组件的私有 CSS 样式。

添加组件 heroes 后生产的类文件代码：

import { Component, OnInit } from '@angular/core';@Component({selector: 'app-heroes',templateUrl: './heroes.component.html',styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {constructor() { }ngOnInit() {}}

在组件类中，需要从 Angular 核心库中导入 Component 符号，并为组件类加上 @Component 装饰器。

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

@Component 是个装饰器函数，用于为该组件指定 Angular 所需的元数据。CLI 自动生成了三个元数据属性：

selector— 组件的选择器（CSS 元素选择器）
templateUrl— 组件模板文件的位置。
styleUrls— 组件私有 CSS 样式表文件的位置。

CSS 元素选择器 app-heroes 用来在父组件的模板中匹配 HTML 元素的名称，以识别出该组件。

ngOnInit 是一个生命周期钩子，Angular 在创建完组件后很快就会调用 ngOnInit。这里是放置初始化逻辑的好地方。

始终要 export 这个组件类，以便在其它地方（比如 AppModule）导入它。

<h2>{{hero.name | uppercase}} Details</h2>

绑定表达式中的 uppercase 位于管道操作符（ | ）的右边，用来调用内置管道 UppercasePipe。

管道是格式化字符串、金额、日期和其它显示数据的好办法。 Angular 发布了一些内置管道，而且你还可以创建自己的管道。

AppModule

Angular 需要知道如何把应用程序的各个部分组合到一起，以及该应用需要哪些其它文件和库。这些信息被称为元数据（metadata）。

有些元数据位于 @Component 装饰器中，你会把它加到组件类上。另一些关键性的元数据位于 @NgModule 装饰器中。

最重要的 @NgModule 装饰器位于顶级类 AppModule 上。

Angular CLI 在创建项目的时候就在 src/app/app.module.ts 中生成了一个 AppModule 类。这里也就是你要添加 FormsModule 的地方。

导入 `FormsModule`

打开 AppModule (app.module.ts) 并从 @angular/forms 库中导入 FormsModule 符号。

import { FormsModule } from '@angular/forms'; // <-- NgModel lives here

然后把 FormsModule 添加到 @NgModule 元数据的 imports 数组中，这里是该应用所需外部模块的列表。

imports: [BrowserModule,FormsModule
],

转载于:https://www.cnblogs.com/AndyChen2015/p/9619739.html

Angular2 初识相关推荐

【Angular2】如何创建一个Angular2项目
[前言] 这个也是从晓风写的文档上借鉴来的, 我做端到端测试的时候用的就是这个项目. [正文] 项目流程安装webstorm-持续集成服务器下载地址:http://www.jetbrains.co ...
Angular2 入门教程
一. 入门 1.初识Angular2 硬知识:Angular2与Angular的区别 (1)依赖加载:Angular1是依赖前置,angular2是按需加载 (2)数据绑定: Angular1 在启动 ...
day3----编码-集合-深浅copy-文件操作-函数初识
day3----编码-集合-深浅copy-文件操作-函数初识本文档主要内容: 一编码二集合三深浅copy 四文件操作五函数初识首先,我们来看看两个字符串的比较打开cmd,进入do ...
⑥python模块初识、pyc和PyCodeObject
一.模块初识(一) 模块,也叫库.库有标准库第三方库. 注意事项:文件名不能和导入的模块名相同 1. sys模块 import sys print(sys.path) #打印环境变量 print(sy ...
初识java类的接口实现
初识java类的接口实现如果两个类之间不存在继承关系,且两个类都想实现同一个接口,两个类都必须实现接口中全部方法,否则报语法错误如果两个类之间存在继承关系也想实现同一个接口,父类如果实现了某个接口 ...
vba 编辑combobox内容_初识Visual Basic编辑器并建立一段简单的代码
大家好,从今日开始我正式推出"VBA之EXCEL应用"教程,这个教程是面向初学人员的教程,教程一共三册,十七个章节,从简单的录制宏实现一直讲到窗体的搭建,都是我们在利用EXCEL工 ...
16.1、python初识面向对象（1）
初识面向对象楔子你现在是一家游戏公司的开发人员,现在需要你开发一款叫做<人狗大战>的游戏,你就思考呀,人狗作战,那至少需要2个角色,一个是人, 一个是狗,且人和狗都有不同的技能,比如人 ...
精通Python网络爬虫：核心技术、框架与项目实战.1.1　初识网络爬虫
摘要网络爬虫也叫做网络机器人,可以代替人们自动地在互联网中进行数据信息的采集与整理.在大数据时代,信息的采集是一项重要的工作,如果单纯靠人力进行信息采集,不仅低效繁琐,搜集的成本也会提高.此时,我们 ...
初识mysql数据字段属性_MySQL数据库～～～～初识、基础数据类型
一数据库初识 1.1 什么是数据库数据库(DataBase,简称DB),简而言之可视为电子化的文件柜----存储电子文件的处所,用户可以对文件中的数据运行新增,截取,更新,删除等操作. 所谓数据库 ...

Angular2 初识

AppModule

导入 `FormsModule`

Angular2 初识相关推荐

最新文章

热门文章

Angular2 初识

AppModule

导入 FormsModule

Angular2 初识相关推荐

最新文章

热门文章

导入 `FormsModule`