Angular2 笔记

作者: Realank | 来源:发表于2018-03-20 11:41 被阅读28次

安装相关:

安装Angular CLI工具:

npm install -g @angular/cli

创建新应用:

ng new new-app

启动应用服务器

//cd add directory
ng serve --open  //open参数自动打开浏览器

创建新的内容

创建新组件

ng generate component newcomponent

创建服务

ng generate service newservice --module=app //后面的参数把服务自动提供给AppModule

创建模块

ng generate module app-routing --flat --module=app
//--flat 把这个文件放进了 src/app 中,而不是单独的目录中。
//--module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中

创建类(也可以直接创建一个ts文件)

ng generate class newclass

创建指令

ng generate directive highlight

数据绑定

在html中显示组件中的属性

{{title}}

CSS 类绑定

<span [hidden]="isUnchanged">changed</span>
<button [style.color]="isSpecial ? 'red': 'green'">Red</button>

for循环

<div *ngFor="let hero of heroes">{{hero.name}}</div>

属性绑定:

<img [src]="heroImageUrl">
<app-hero-detail [hero]="currentHero"></app-hero-detail>
<div [ngClass]="{'special': isSpecial}"></div>

事件绑定:

<button (click)="onSave()">Save</button>
<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
<div (myClick)="clicked=$event" clickable>click me</div>

相关文章

  • spark_learn

    Angular2学习笔记——NgModule es6 新增的map和foreach AngularJS2.0 学习...

  • 3.5 使用 Angular2 框架

    3.5 使用 Angular2 框架 问题一:如何接入Angular2 框架? 由于 Angular2 项目中采用...

  • Angular2 的 View Encapsulation(样式

    Angular2 的 View Encapsulation(样式封装) angular2 版本:2.4.8, 测试...

  • Angular2 笔记

    安装相关: 安装Angular CLI工具: 创建新应用: 启动应用服务器 创建新的内容 创建新组件 创建服务 创...

  • Angular2语法

    Angular2语法

  • Angular2中如何使用jquery

    Angular2中如何使用jquery Angular2是以TypeScript语言作为默认编码语言,所以你看到的...

  • Angular2编译部署

    Angular2编译部署

  • Angular参考资料收集

    1 、Angular2文档学习的知识点摘要——Angular模块(NgModule) 2、Angular2父子组件...

  • 来一波angular2概念

    Angular2学习之: angular2官方将框架按以下结构划分: Module(模块) 组件、方法、类、服务等...

  • angular2学习笔记

    demo设计原则: 用vscode编辑器。 构建原型图原型,想好逻辑。 围绕所学的内容。 ts文件和class的命...

网友评论

    本文标题:Angular2 笔记

    本文链接:https://www.haomeiwen.com/subject/epbvqftx.html